トピックを検索
現在のページも行き先も伝えないページネーション
ショップのページ番号は現在のページをクラスだけで示し、リンクは数字と矢印だけです。そのため、スクリーンリーダーでは今どのページにいるのか、各リンクがどこへ行くのかが分かりません。
<a href="/kitchen/mugs?page=3">›</a> 問題
スクリーンリーダー利用者は、一覧の何ページ目にいるのか、矢印のリンクがどこへ行くのかが分かりません。ページのリンクが、それを見た目だけで示しているためです。
ショップのマグカップのカテゴリーページは、ページのリンクの列で終わります。戻る矢印、1から4の数字、進む矢印です。見慣れた、すっきりしたデザインです。2ページ目では2が濃い四角の中に入ります。目で見る人には、4ページ中の2ページ目であること、矢印が1ページ目と3ページ目へ行くことがすぐに分かります。
スクリーンリーダーの利用者がTabキーで同じ列を移動すると、「‹、リンク」「1、リンク」「2、リンク」「3、リンク」「4、リンク」「›、リンク」と聞こえます。2が表示中の結果ページであること、そもそも数字がページであることは伝わりません。矢印は、スクリーンリーダーや音声がその記号に持つ名前で読まれるか、スクリーンリーダーと句読点の読み上げ設定によっては読まれないため、「次のページ」を意味するリンクが行き先を何も伝えません。列はナビゲーションとして読み上げられず、スクリーンリーダーのランドマーク一覧にも出ないので、長い商品一覧の最後にあるページのリンクへ移動する手段がありません。
ページのリンクは関係を示しています。一つの一覧の中を移動するためのリンクのまとまりで、その一つが表示中のページです。WCAG 1.3.1「情報及び関係性」は、見た目で示した情報をコードかテキストでも伝えることを求めています。この例では、まとまりはレイアウトにしかありません。列は div 要素で、支援技術に対しては何もまとめないからです。達成方法H97は、関連するリンクを nav に入れることで1.3.1を満たします。現在のページも見た目にしかありません。current クラスはブラウザーにとって意味がないためです。
リンクは2.4.4「リンクの目的（コンテキスト内）」も満たしません。リンクの目的は、リンクのテキストだけか、テキストとプログラムが解釈できるコンテキスト（同じ文、段落、リストの項目、表のセル、そのセルに関連付けた見出しセル）から分かる必要があります。「›」は行き先を何も伝えず、「2」はこの一覧のページであることを伝えません。目で見る人は、商品一覧の下という列の位置と、矢印のよくある意味からそれを読み取りますが、マークアップはどちらも伝えません。リンクを囲む div も、スクリーンリーダーが参照できるコンテキストになりません。
ページ送りは、ショップのカテゴリー、検索結果、ブログのアーカイブ、掲示板など、ほぼどの一覧の下にもあります。たいていは一つの共通コンポーネントから作られるため、一か所直せばサイト中の一覧に届きます。特に重要なのは、どこまで見たか、あとどれだけ残っているかを知る必要がある長い一覧です。
10グループ中2グループに影響
自動チェックは、「2」や「›」も含めて、すべてのリンクに名前があるとして合格にします。空のリンクは不合格になりますが、記号は通ります。current や active といったクラス名には意味がないので、一つのリンクが現在地として装飾されていることは分かりません。数字が行き先を伝えているかも判断できません。EaseWebの診断では、クラスや名前からページ送りと分かる場所で、表示中のページへのリンクが隣のリンクと違う見た目なのに aria-current も現在のページだと伝えるテキストもないものを報告します。名前全体が記号だけで、周りの文、リストの項目、セルにも言葉がないリンクも報告します。ナビゲーションのランドマークの外にあるページのリンクは、そのリンクを添えて、人が確認する項目として渡します。「2」のような数字だけのリンクも、その人の判断に任せます。手で書いたページ送りも、コンポーネントライブラリから写したものも、AIツールが生成したものも、確かめ方は同じです。二つのページでページのリンクを聞き、今いる場所と行き先が伝わるかを確かめてください。
修正方法
ページのリンクを名前付きのnavにまとめ、現在のページをコードかテキストで示し、どのリンクにも言葉の名前を付けます。
- 1ページのリンクは、固有の短い名前を付けた
navに入れる。 - 2現在のページには
aria-current="page"を付けるかテキストで示し、見た目も同じ条件で設定する。 - 3ページのリンクには、見た目にかかわらず「Page 2」「Next page」のような言葉の名前を付ける。
<h1>Mugs</h1>…<div class="pagination"> <a href="/kitchen/mugs?page=1">‹</a> <a href="/kitchen/mugs?page=1">1</a> <a href="/kitchen/mugs?page=2" class="current">2</a> <a href="/kitchen/mugs?page=3">3</a> <a href="/kitchen/mugs?page=4">4</a> <a href="/kitchen/mugs?page=3">›</a></div>名前付きのnav、aria-current、隠したテキストの名前
<h1>Mugs</h1>…<nav class="pagination" aria-label="Pagination"> <ul> <li> <a href="/kitchen/mugs?page=1"> <span aria-hidden="true">‹</span> <span class="visually-hidden">Previous page</span> </a> </li> <li> <a href="/kitchen/mugs?page=1"> <span class="visually-hidden">Page </span>1 </a> </li> <li> <a href="/kitchen/mugs?page=2" aria-current="page"> <span class="visually-hidden">Page </span>2 </a> </li> <li> <a href="/kitchen/mugs?page=3"> <span class="visually-hidden">Page </span>3 </a> </li> <li> <a href="/kitchen/mugs?page=4"> <span class="visually-hidden">Page </span>4 </a> </li> <li> <a href="/kitchen/mugs?page=3"> <span aria-hidden="true">›</span> <span class="visually-hidden">Next page</span> </a> </li> </ul></nav>この方法を選ぶ理由：クラスではなく状態から見た目を決める
current クラスは2の見た目を変えるだけで、div も何もまとめません。スクリーンリーダーは「2、リンク」と隣のリンクと同じように読み、矢印は「‹、リンク」「›、リンク」と読みます。
デザインは変わりません。数字も矢印も描かれたとおりに見えます。列が固有の名前を持つ nav になったため、スクリーンリーダーは入るときに「Pagination、ナビゲーション」と読み、ランドマーク一覧にも並びます。2に付けた aria-current="page" により、スクリーンリーダーはそこで「現在のページ」と読みます。濃い四角もこの属性で選ぶため、見た目とコードが別のリンクを示すことはありません。隠したテキストが「Page 2」「Previous page」「Next page」というリンクの名前になります。矢印の文字は aria-hidden で隠すので、名前に重ねて記号が読まれることはありません。
どちらも1.3.1と2.4.4を満たします。検索結果やアーカイブのように一覧が長いときや、ページを行き来するときは、数字を残して aria-current と隠した名前を付けてください。デザインは描かれたとおりのまま、見た目は属性から決まります。一覧が短いとき、スマートフォンでは数字がどのみち収まらないとき、すべての名前を目に見える形にしたいときは、ページ数の両側にPrevious pageとNext pageを置いてください。隠すものがなく、音声操作の利用者は見えたとおりに言えます。
ページのリンクには、ほかにも判断が必要な点があります。
- 隠したテキストの代わりの
aria-label：<a href="…" aria-label="Page 2">2</a>でも同じ名前になります。ブラウザーの翻訳機能は、ページ内のテキストに比べてaria-labelの翻訳が確実ではありません。 - 名前：スクリーンリーダーが「ナビゲーション」を補うので、「Pagination」で足ります。区別できない複数のナビゲーションランドマークを参照してください。同じページのリンクを一覧の上と下に置くときは、二つの
navに別の名前を付けるか、上の列をnavに入れないでください。 - 最初と最後のページ：1ページ目では、Previous pageを出さないか、ただのテキストにします。同じページへ行くリンクや、どこへも行かないリンクにはしません。ページ番号の間の省略記号は、リンクの外で、独立したリストの項目のテキストとして置きます。
- ページを読み込まずに変わる一覧：並べ替え、絞り込み、ページのリンクで結果をその場で入れ替えるときは、
aria-currentも一緒に移し、一覧が変わったことを伝えます。読み上げられないSPAの画面遷移を参照してください。 - ページタイトル：ページのタイトルを「Mugs、2/4ページ」のようにすると、スクリーンリーダー利用者はページを開いた時点でどこにいるか分かります。これは2.4.2「ページタイトル」の範囲で、すべてのページで同じページタイトルで扱っています。
Windowsのコントラスト テーマでも現在のページが見分けられるようにします。強制配色では2の後ろの濃い塗りが消え、ほかの数字と同じに見えます。太字は残り、ほかより太い境界線を引けば、それも残ります。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得、または全ガイドをコーディングエージェントで使う。
デザインの案
ページのリンクは、いろいろな見た目で描けます。
ほかに3通りの描き方です。リンクにマウスを重ね、Tabで移動し、ページをクリックすると目印がそこへ移ります。2つは合格です。1つはページを点で描くため、読み上げや音声操作に使える言葉がどのリンクにもありません。
デザインファイルで
- ページのリンクそれぞれの名前を横に書く。数字や矢印しか見えない場合も、「2ページ」「前のページ」「次のページ」のように。
- 今いるページを独立した状態として描く。Windowsのコントラスト テーマでは塗りが消えるため、塗りだけでなく太字や線でも示す。
- 最初と最後のページも描く。そこでは矢印の一方に行き先がない。
合格
- 太字の数字と下線、両端に言葉 2を#1d1d1fの太字にし、下に3pxの線を引きます（白に対して16.83:1）。太さも線も強制配色で残ります。「前のページ」と「次のページ」は言葉で書くので、音声操作の利用者はそのまま言えます。数字の名前には、コードで「ページ」の語を足します。最初と最後のページでは、行き先のない側を薄くし、リンクにしません。
- ページ数を挟む丸い矢印 40pxの丸い矢印二つで、太字の「2 / 4」を挟みます。今いるページは描くのではなく書いて示します。矢印には画面上に言葉がないので、「前のページ」「次のページ」という名前をデザインファイルに書いてください。
修正の確認
マウスを使わない5つの確認
確認方法： スクリーンリーダー、キーボード、音声入力
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通のページ送りのコンポーネントを変更した際は、再度確認します。
制限
このサンプルは、どの一覧でも同じ結果になることを保証するものではありません。aria-current やランドマークの読み上げ方はスクリーンリーダーによって異なり、記号の読み方は句読点の読み上げ設定で変わります。利用者が使うスクリーンリーダーで確かめてください。スクロールや「もっと見る」ボタンで続きを読み込む一覧には示すページがないため、別の配慮が必要です。同じページの上にあるパンくずリストには、別の問題があります。現在のページを見た目だけで示すパンくずリストを参照してください。サイトのメインメニューも、同じ属性で現在のページを示します。現在のページを見た目だけで示すナビゲーションを参照してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。