誰もが使いやすいメガメニューを実装したい
メガメニュー（ドロップダウンメニュー）について考えたことをまとめます。
メガメニューとは
（この記事では）ドロップダウンメニューのドロップダウンする部分が横幅いっぱいに広がっているような見た目のものを指します。
実際のUIについては下記をご参照ください。
（この記事では）初期表示時に表示されている部分を大項目、開閉する部分を小項目と呼びます。
よくある仕様
PC表示では大項目が横並び、モバイル表示では縦並びになっている
PC表示では、大項目がリンクになっていて、マウスオーバーすると小項目が表示され、クリックするとリンク先に遷移する
モバイル表示では、大項目はボタンになっていて、タップすると小項目が表示される
大項目すべてがトリガーになっていない場合もある
キーボードによる操作は対応しているところが少ない印象です。
Appleのメガメニューをお手本に
Windows & Androidをメインに使っているのもあり、これまでApple社のサイトのメニューをしっかり見たことがなかったことを反省しています。
是非、Appleのサイトを開いたら、Tabキーを押してフォーカスを移動させてみてください。
なんと、各リンクの隣に小項目を開くボタンが設置されているんですね。
しかもフォーカスが当たらないとボタンが可視化されないので、マウスを使うユーザーはボタンの存在に気づかないまま「リンクにマウスオーバーして開く」という通念を疑わずに操作できます。
なるほどその手があったか！と衝撃を受けました。
（余談ですが、フォーカスリングの色がちゃんとSafari仕様になっているのはさすがだなと思いました）
必要なキーボードサポートの確認
メガメニュー（ドロップダウンメニュー）に必要なキーボードによるサポートを、W3Cでは下記のように規定しています。
https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/#kbd_label
ちなみに今回実装した機能は下記の通りです。
Tab or (Shift + Tab) キー
隣り合うリンクやボタンにフォーカスを移動させる。Space or Enter キー
ボタンにフォーカスがある場合はドロップダウンを開閉する。Escape キー
ドロップダウンを閉じて、ドロップダウンを開閉するボタンにフォーカスを移動する。上下左右矢印キー
隣り合うリンクやボタンにフォーカスを移動させる。Home キー
同階層の最初のリンクにフォーカスを移動させる。Endキー
同階層の最後のリンクにフォーカスを移動させる。
実装してみた感想
Appleのメガメニューをお手本にすると、見た目はそのままにキーボードでも操作しやすいメガメニューを実装することは可能でした。
ただ、モバイル表示時に開閉するボタンを非表示にして実装できないので、リンクを無効にするか、モバイル表示時の見た目を調整してもらう必要があります。
誰もが使いやすいサイトを実装するのはフロントエンド実装者の責務だと考えて、これからも誠心誠意、頑張っていきます。