マウスでしか開かないドロップダウンメニュー

三つのカテゴリーへのリンクは、ポインターが「商品」に重なるまで display: none のため、Tabキーは「商品」から「会社概要」へ移動します。「商品」にサブメニューがあることも、マークアップには何も書かれていません。

HTML標準のbuttonはEnterとSpaceで開閉でき、aria-expanded によって、スクリーンリーダーは「商品、ボタン、折りたたみ」、開くと「展開」と読み上げます。マークアップ上でリストはボタンの直後にあるため、Tabキーでボタンから開いたリストへそのまま移動できます。閉じている間は hidden によってリンクがTab順から外れます。Escapeでリストを閉じ、フォーカスを「商品」に戻します。Tab、Shift + Tab、ほかの場所のクリックでフォーカスが項目から離れると、フォーカスを動かさずにリストを閉じるため、開いたリストが次の移動先を覆うことはありません。リストの tabindex="-1" により、リスト内をクリックしてもフォーカスが項目の内側に残り、離れたとは見なされません。ボタンは一覧ページへ移動しなくなるため、そのページは「すべての商品」としてリストに入れます。

buttonの方法を使います。周りのページに左右される条件が残らず、それだけで適合します。開閉状態を伝え、Escapeとフォーカスが離れたときに閉じ、サブメニューごとのTabの移動先は一つだけです。details と summary はスクリプトが不要で、開いたリストが下の内容を押し下げる場合には適した方法ですが、ページに重なる場合は利用者が離れた後も開いたままになります。:focus-within で開く方法は既存のメニューへの最小限の変更で、buttonを作るまでの間、最も深刻な問題を止められます。ただし、Escapeで閉じられず、スクリーンリーダーの利用者にリストがあることも伝わりません。

上段の項目自体もページである場合は、どうするかを決める必要があります。例のように一覧ページを「すべての商品」としてリストに移すと、項目ごとの操作部品は一つで済みます。項目をリンクのまま残す必要がある場合は、リンクと小さな別のbuttonを並べ、buttonには「商品のページ」のような名前を付けて、2つ目の「商品」と聞こえないようにします。

実際のメニューでは、ほかの部分についても判断が必要です。

• マウスを重ねて開く操作：マウス利用者のために残してもかまいません。その場合はマウスを重ねると現れる内容になり、1.4.13により、ポインターを移しても開いたままで、Escapeで閉じる必要があります。詳しくはホバーで表示される内容を参照してください。
• 矢印キー：サイトのメニューでは任意です。この開閉パターンはTabキーだけで使えます。上段のボタン間を矢印キーで移動できるようにする場合も、Tabキーでの移動は残します。
• aria-haspopup：付けません。buttonに付けるとメニューとして読み上げられますが、このリストはリンクの集まりで、メニューではありません。
• スマートフォン：狭い画面のメニューでも同じbuttonが使え、リストは縦に並んで下の内容を押し下げます。メニュー全体を開く「メニュー」ボタンも同じパターンに従います。
• 現在のページ：カテゴリーのページを表示しているときは、そのリンクに aria-current="page" を付けます。現在のページで説明しています。