ページ付け

この料理帳のパターンは、ページ付け（pagination）を表示するために使用されるナビゲーションのパターンを示し、ユーザーは検索結果などのコンテンツのページ間を移動できます。

要件

ページ付けのパターンは通常、項目を1行に表示します。 スクリーンリーダーを使用している人がページ付けであることを理解できるようにするために、項目を <nav> 要素内のリストとしてマークアップし、CSS を使用してレイアウトを視覚的に1行として表示します。

通常、ページ付けのコンポーネントはコンテンツの下側にあり、水平方向の中央に配置されます。

レシピ

行った選択

このパターンは、フレックスボックスを使用してレイアウトされています — 一方のフレックスコンテナは別のフレックスコンテナの中にネストされています。 <nav> 要素は、justify-content プロパティを使用してリストを中央に配置できるように、フレックスコンテナとして指定されています。

リスト自体も、項目を行としてレイアウトするためのフレックスコンテナになります。 項目を配置するために、フレックス項目には margin を使用します。

代替方法

column-gap プロパティがブラウザーに実装されると、項目の間隔を空けるためにマージンの代わりにこれを使用できます。

.pagination {
  list-style: none;
  margin: 0; 
  padding: 0;
  display: flex;
  column-gap: 2px;
}

アクセシビリティへの懸念

スクリーンリーダーを使用している人が、このナビゲーションが何をするのか、そしてリンクをクリックしたときにどこに行くのかを確実に理解できるようにしたいです。 これを手助けするために、<nav> 要素に aria-label="pagination" を追加しました。

スクリーンリーダーによって読み取られるが視覚的に隠されている追加のコンテンツを追加し、ページング矢印に aria-hidden 属性を設定しました。

このドキュメントの最後にある「関連情報」セクションには、関連するアクセシビリティのトピックへのリンクがあります。

ブラウザー実装状況

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

justify-content

フレックスレイアウトの column-gap

関連情報

• justify-content、column-gap
• ARIA を知る: 「Hidden」対「None」（英語）
• スクリーンリーダーのユーザーには見えないコンテンツ（英語）
• アクセシビリティを意識した CSS の書き方（英語）（日本語訳）
• アクセシビリティ（a11y）スタイルガイド: ページ付け（英語）