🍬

ハンバーガーメニューのキーボード操作について

最近はコーディング時にキーボード操作を考慮できるよう、普段からキーボードでWebサイトの操作を行うようにしている。

先日遭遇したサイトでは、ハンバーガーメニュー展開時、展開メニューの最後の項目まで到達したあとにTabキーを押すと、ハンバーガーメニューが自動で閉じられるメニューが設置されていた。
個人的に、このハンバーガーメニューはシンプルに「使いやすい」と感じた。
というのも、通常、必要のないハンバーガーメニューを「閉じる」ためには、「閉じる」ボタンまで戻るなど、何かしらの動作を行わなければいけない。
しかし、遭遇したサイトは閲覧を続ける流れでハンバーガーメニューが自然と閉じられる。

だが、JISアクセシビリティ達成基準を確認したところ、下記のような基準が設けられていた。

フォーカスを受け取ったときにイベントを起動することのできるすべてのコンポーネントは、コンテキストを変化させてはならない。

フォーカス時:達成基準 3.2.1 を理解する(https://waic.jp/translations/UNDERSTANDING-WCAG20/consistent-behavior-receive-focus.html)

確かに、展開メニューの最後の項目まで到達したあとにTabキーを押すとメニューが閉じられる仕様は、フォーカス時にコンテキストを変化させることになり、ユーザーの予測できない動きとなってしまう。
そのため、ある状況に置いては使用しづらさを感じる可能性があるかもしれない。

この時思うことが、「自動的に」変化を起こすものは「便利」だと捉えてしまいがちだが、「誰もが」「どの環境でも」使いやすいものを考えたときは「己の意思で操作できるかどうか」「意図した操作ができるかどうか」を念頭に置いて考える必要がある。

「Escキーで閉じる」に加え、展開メニュー時はフォーカスをメニュー内に閉じ込め、展開メニューの最後の項目まで到達後は「閉じる」ボタンにフォーカスさせるのが一番良さそう。