ページネーション

サンプル

デザイン上の考慮事項

• 桁数の多い数字が入った場合の表示を確認してください。
  • 考慮すべき桁数は案件により異なるため、

実装上の考慮事項

特になし。

アクセシビリティ上の考慮事項

• アイコンで表示している部分はaria-labelなどを使用して代替テキストが設定されていることを確認してください（達成基準 1.1.1 非テキストコンテンツ (レベル A)）
• キーボードでも操作できることを確認してください（達成基準 2.1.1 キーボード (レベル A)）。
• ナビゲーションを示すため、nav要素を使用します（達成基準 1.3.1 情報及び関係性 (レベル A) ）。
• nav要素を使用する場合、他のナビゲーションと区別できるようにするため、aria-label属性を指定します（達成基準 4.1.2 名前 (name)・役割 (role) 及び値 (value) (レベル A)）。
• 全体の項目数がスクリーンリーダーにも伝わるようにリストでマークアップします。順序が入れ替わっても各リンクが表す意味には影響しないため、ul要素を使用します（達成基準 1.3.1 情報及び関係性 (レベル A) ）。
• 現在位置を示すため、aria-current属性を使用します（達成基準 1.3.1 情報及び関係性 (レベル A) ）。