トピックを検索
現在のページを見た目だけで示すナビゲーション
表示中のページへのメニューのリンクはクラスで太字と下線になっていますが、マークアップには現在のページだという情報がありません。
class="active" 問題
スクリーンリーダー利用者は、メニューを移動しても今どのページにいるのか分かりません。
サイトのヘッダーに、Home、Products、Pricing、Contactの四つのリンクがあります。料金ページでは、Pricingのリンクが太字になり、下に線が付きます。目で見る人は、今どこにいるかがすぐに分かります。スクリーンリーダーで同じメニューを移動すると、「Home、リンク」「Products、リンク」「Pricing、リンク」「Contact、リンク」と読まれます。どれが今のページかは伝わりません。セクションやサブメニューのある大きなサイトでは、ページがどのセクションに属するかも分かりません。
太字と下線は、スタイルシートだけが読む active というクラスによるものです。メニューは「このリンクが今のページ」という関係を見た目で示しています。WCAG 1.3.1「情報及び関係性」は、見た目で示した情報をコードかテキストでも伝えることを求めています。この例では、その情報が見た目にしかありません。クラス名はブラウザーにとって意味がないため、支援技術に伝わるものがありません。
スクリーンリーダー利用者も、目で見る人と同じように、メニューで現在地を確かめます。検索結果や共有されたリンクからページに来た人は、特にどこに着いたかを知る必要があります。目印がないと、見出しや本文を読んで推測するしかありません。
10グループ中1グループに影響
- 全盲 （影響あり）
- 弱視 （影響なし）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響なし）
- 届く範囲・力 （影響なし）
- 認知 （影響なし）
- 光過敏 （影響なし）
- 視覚を使わない スクリーンリーダーではメニューのリンクがすべて同じように読まれるため、今どのページにいるのか、そのページがどのセクションに属するのかがメニューから分からず、本文を読んで確かめる必要があります。
自動チェックは、名前のある正しいリンクが四つあるとして合格にします。active、selected、is-here といったクラス名には意味がないため、一つのリンクが現在地として装飾されていることは分かりません。ページが変わったときに目印が移るかも確認できません。AIによるコード生成では、リンクに aria-selected="true" や role="tab" を付けることがよくあります。これらはタブやリストボックスのためのもので、通常のリンクでは無視されるか誤って伝わります。現在のリンクから href を外す例もありますが、Tabキーで届かなくなるうえ、現在のページだという情報はやはり伝わりません。二つの別のページでメニューを聞いて確かめてください。
試してみる
Tabキーでメニューを移動してください。
下の欄に、各リンクでのスクリーンリーダーの読み上げが出ます。今どのページにいるか分かりますか？別のリンクでEnterキーを押すと、そのページへ移動します。
問題あり 修正できますか？
スクリーンリーダーの読み上げ：
（Tabでリンクへ移動）再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
どのメニューのリンクが現在のページかをコードで示し、見た目もそこから設定します。
- 1現在のページのリンクには
aria-current="page"を付けるか、リンクの中に隠したテキストを入れる。 - 2見た目とコード上の目印を同じ条件で設定し、同じリンクを示すようにする。
- 3目印は一つのメニューに一つだけ付け、ページが変わったら移す。
<nav aria-label="Main"> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/pricing" class="active">Pricing</a></li> <li><a href="/contact">Contact</a></li> </ul></nav>リンクにaria-current
<nav aria-label="Main"> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/pricing" aria-current="page">Pricing</a></li> <li><a href="/contact">Contact</a></li> </ul></nav>この方法を選ぶ理由：クラスではなく状態から見た目を決める
active クラスはPricingのリンクの見た目を変えるだけです。スクリーンリーダーはほかの三つと同じく「Pricing、リンク」と読みます。
aria-current="page" は、このリンクが表示中のページだと支援技術に伝え、スクリーンリーダーは「現在のページ」と読み上げます。スタイルもクラスではなく属性で選ぶため、見た目とコードが一つの目印から決まり、別々のリンクを示すことがありません。href は残すため、Tabキーで届き、リンクとしても働きます。
どちらも1.3.1を満たします。aria-current="page" を使ってください。属性一つで同じ役割を果たし、翻訳する文言もなく、スクリーンリーダーが利用者の言語で読み上げます。属性から見た目を設定すれば、見た目とコードも結び付きます。隠したテキストは、メニューに属性を付けられない場合にだけ使い、クラスとテキストを同じ条件で設定してください。
メインメニューを直した後も、ほかのリンクやメニューで判断が必要です。
- セクションのリンク：Productsの中の個別の商品ページにいるとき、Productsのリンクは現在のページではありません。
aria-current="true"と控えめなスタイルで現在のセクションを示すサイトもあれば、何も付けないサイトもあります。pageは付けないでください。 - 複数のメニュー：ヘッダー、サブメニュー、フッターが同じページへリンクすることがあります。どこで読んでも同じ答えになるよう、それぞれのリンクに付けます。
- パンくずリスト：最後の項目が現在のページを示し、リンクであれば
aria-current="page"を付けます。パンくずリストは別のガイドで扱います。 - クライアント側のルーティング：シングルページアプリでは、表示が変わるたびにルーターが属性を移す必要があります。クリックの処理ではなく、ルーターの現在のURLから設定すれば、戻るボタンでも更新されます。
強制カラーモードでも見た目の目印が残るようにします。太字と境界線はWindowsのコントラストテーマでも残りますが、背景色や文字色の変化だけでは消えます。色だけの区別は1.4.1も満たしません。現在のページもリンクとして残してください。再読み込みやアドレスのコピーに使う人がいるうえ、href を外すとページごとにTabキーの順序が変わります。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得
修正の確認
マウスを使わない5つの確認
確認方法： スクリーンリーダー、キーボード、強制配色
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。メニューやルーターを変更した際は、再度確認します。
制限
このサンプルは、どのメニューでも同じ結果になることを保証するものではありません。aria-current の読み上げ方はスクリーンリーダーによって異なり、リンク名の前に読むものも後に読むものもあります。正しいリンクに目印があっても、サイトの構造が分かりにくければ迷います。分かりやすいページタイトル、見出し、パンくずリストで補ってください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。