ページではなくサブメニューが開いてしまうドロップダウンの親メニュー

家具店のヘッダーに「ホーム」「商品」「会社概要」の三つの項目があります。「商品」は全商品をまとめたページへのリンクで、マウスを重ねると「照明」「椅子」「ラグ」の一覧が下に開きます。マウスの利用者は、一覧へポインターを移してカテゴリーを選ぶことも、「商品」をクリックしてすべての商品を見ることもできます。ポインターは、リンクを押さずにその上で止まっていられるからです。

キーボードには、止まっているという操作がありません。Tabキーで「商品」へ移動してEnterキーを押すと、一覧を開くかページへ移動するかは、サイト側で決めるしかありません。よくある作り方の一つは、1回目と2回目で使い分けるものです。1回目のEnterでは一覧が開いてページはそのまま、2回目でリンク先へ移動します。スクリーンリーダーは押す前も後も「商品、リンク」と読むため、利用者には何も起きなかったように聞こえます。もう一度押すと「商品」のページへ移り、「照明」にはたどり着けません。

もう一つのよくある作り方は、キーボードでメニューを使えるようにするために書かれたものです。Enterキーで一覧が開閉し、リンクは「折りたたみ」「展開」と読まれます。その代わりに、「商品」のページへ行く手段がなくなりました。マウスで「商品」をクリックすればそのページへ移動しますが、キーでは移動できません。スクリーンリーダーを使っていると、逆のことも起きます。ブラウズモードでは、スクリーンリーダーがEnterキーをページに渡さずにリンクを自分でクリックすることが多いため、利用者は「商品」のページへ移動し、一覧を目にすることはありません。

リンクがリンクとして読み上げられるのは、押すとどこかへ移動するからです。ここでは1つのリンクが、ページへの移動と一覧の開閉という二つの役目を持っています。どちらか一方だけを選べるのはポインターだけで、重ねれば一覧が開き、クリックすればページへ移動します。これらの作り方では、押したときにどちらの役目を果たすかをスクリプトが決めており、その決まりはマークアップのどこにも書かれていません。

WCAG 2.1.1 キーボードは、ページでできることをすべてキーボードでもできるよう求めています。二つ目の作り方は、この基準を満たしません。キーのハンドラーが「商品」でのEnterを取り消して一覧を開く一方、マウスのクリックはリンク先へ移動するため、「商品」のページはマウスなら1回のクリックで開けるのに、キーボードでは届きません。一つ目の作り方は、2回目のEnterでページに届くため、2.1.1は満たします。

4.1.2 名前・役割・値は、コントロールの役割と状態を読み取れること、そしてその変化が伝わることを求めています。一つ目の作り方では、「商品」は一覧を開くので、開いているか閉じているかという状態を持ちますが、それを示すものがありません。スクリーンリーダーは一覧が開いていてもいなくても「商品、リンク」と読みます。二つ目の作り方では、aria-expanded で状態は伝わりますが、役割はリンクのままで、そのリンクはEnterキーでリンクとして働きません。「商品、リンク、折りたたみ」から分かるのは何かが開くということだけで、Enterキーではページへ移動できないことは分かりません。また、ブラウズモードのスクリーンリーダーはたいていEnterキーをリンクのクリックに置き換え、キーのハンドラーは動かないため、何が起きるかはスクリーンリーダーを使っているかどうかで変わります。

スマートフォンでタップしたときの動作は、スクリプトだけでなくブラウザーにも左右されます。最初のタップで一覧を開き、2回目でリンク先へ移動するブラウザーもあれば、すぐに移動するブラウザーもあります。同じヘッダーが利用者によって三通りに動き、そのどれもが前もって伝えられません。

10グループ中3グループに影響

• 全盲 （影響あり）
• 弱視 （影響なし）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 筋力・可動域 （影響なし）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 手の操作が限られる キーボードやスイッチの利用者は、「商品」のページへ行こうとして「商品」でEnterキーを押します。一つ目の作り方では、ページではなく一覧が予告なく開き、2回目でようやくページへ移動します。二つ目の作り方では、マウスのクリックで開くページに、どのキーでも届きません。
• 視覚を使わない スクリーンリーダーの利用者はリンクと聞いて、新しいページが開くと考えます。一つ目の作り方では、Enterキーを押しても何も起きないように聞こえ、次のEnterでページを離れます。二つ目の作り方では、リンクなのに「折りたたみ」と読まれます。さらにブラウズモードでは、スクリーンリーダーがEnterキーを渡さずにリンクをクリックすることがあるため、「商品」のページへ移動してしまい、一覧は開きません。
• 言語・認知・学習の能力が限られる 「商品」を押すと一覧が開くのかページが開くのか、画面のどこにも示されていません。同じ操作が1回目と2回目で違う動作をするため、覚えにくく、今どこにいるのかを見失いやすくなります。

自動チェックが読むのは <a href="/products"> という、名前のある正しいリンクです。aria-expanded もリンクに付けてよい属性なので、何も指摘されません。Enterキーを押さないため、リンクがどこへも移動しないことや、2回目でしか移動しないことには気づきません。ドロップダウンをキーボードで使えるようにする方法として、リンク先へ移動させずにEnterキーでサブメニューを開くよう勧める記事もあります。AIのコーディングツールに同じことを頼むと、二つ目の作り方そのものを書くことがあります。リンクにキーのハンドラーを付けてEnterを取り消し、一覧を開き、aria-expanded や aria-haspopup を加えるものです。このコードは自動チェックを通りますが、問題を一覧からページへ移しただけです。

この診断ツールは、サブメニューを持ち、横にボタンのない上段の各リンクでEnterキーを押します。その際、リンク先への移動は止め、ページはそのままにします。Enterキーで一覧が開き、リンク先へは一度も移動しない一方、マウスのクリックでは移動する場合は、問題として報告します。1回目のEnterで一覧が開き2回目でリンク先へ移動する場合や、どの操作でもリンク先へ移動しない場合は、確認が必要な項目として報告します。ページが何を伝えているか、「商品」のページがほかの場所からリンクされているかは、人が判断する必要があるからです。どちらの場合も、確かめるにはマウスを使わずにヘッダーをTabキーで移動し、さらにスクリーンリーダーのブラウズモードでも試します。