キーボードで入れず、開いても何も伝えない操作メニュー

あるショップの注文履歴では、注文ごとにカードが並び、それぞれに「詳細」ボタンがあります。押すと、「もう一度購入」「返品する」「領収書をダウンロード」「問題を報告」という、その注文でできる4つの操作が下に開きます。「詳細」をクリックするとボタンの下にメニューが開き、「領収書をダウンロード」をクリックすると領収書がダウンロードされます。ボタンは本物のbuttonなので、Tabキーで届き、Enterキーでメニューが開きます。ところがフォーカスは「詳細」に残ったままで、各操作はクリック処理を付けたdivです。次にTabキーを押すと、開いたメニューを飛ばして、カードの下の「すべての注文を見る」へ移ります。下矢印キーはページをスクロールするだけです。メニューの中には、マウスなしでは何も届きません。スクリーンリーダーは「詳細、ボタン」と読み、Enterキーを押しても新しく何も読まれません。ボタンがメニューを開くことも、メニューが開いたことも伝わりません。スクリーンリーダー自身のキーで読み進めると、4つの操作はただの文字として出てきます。押せるものなのか、どのボタンのものなのかを示す役割はありません。

そこでチームは、手っ取り早くメニューに仕立てます。ボタンに aria-haspopup="menu"、パネルに role="menu"、各操作に role="menuitem" を付け、それ以外は何もしません。スクリーンリーダーはボタンがメニューを開くと伝えるようになりますが、押した後は何も変わりません。フォーカスはボタンに残り、メニューが開いたことは伝わらず、Tabキーは今もすべての項目を飛ばし、メニューが約束する矢印キーは何もしません。

達成基準2.1.1「キーボード」は、マウスでできることはすべてキーボードでもできることを求めています。マウスはdivをクリックして操作を実行しますが、divはフォーカスを受けないため、キーボードではメニューを開けても中の何にも届きません。「領収書をダウンロード」を含め、メニューのどの操作にもマウスが必要です。メニューのロールを足しても、この点は何も変わりません。ロールは要素が何であるかを伝えるもので、どう動くかは変えません。項目は今もフォーカスを受けず、矢印キーに応えるスクリプトもありません。

達成基準4.1.2「名前（name）・役割（role）及び値（value）」は、コントロールの役割と状態が支援技術に伝わり、その変化も伝わることを求めています。ボタンの名前と役割は伝わっていますが、メニューを開くことも、メニューが開いているかどうかも伝わっていないため、押しても、スクリーンリーダーが読み上げられる変化が何も起きません。各操作には役割がまったくありません。divにクリック処理を付けても、アクセシビリティAPIに役割は伝わらず、これは失敗例F59にあたります。ロールを足すと、ボタンはメニューを開くことを伝えますが、開いているかどうかは今も伝えず、フォーカスもボタンに残るため、メニューが開いても何も聞こえないままです。ロールが約束する動きのないロールは、アクセシビリティAPIの使い方が不完全なカスタムのコントロールとして、失敗例F15にあたります。

操作メニューは、注文履歴、住所録、ファイルの一覧、チームの設定、コメントなどにあり、行ごとに1つずつ置かれることもよくあります。スマートフォンでは、画面に並べきれない操作を同じボタンにまとめることも多くあります。その奥にあるものは、クリックできない人には届かず、画面を見られない人には開いたことさえ分かりません。

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

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

• 手の操作が限られる キーボードやスイッチの利用者はメニューを開けますが、フォーカスはボタンに残り、Tabキーは操作を飛ばすため、「領収書をダウンロード」「返品する」などはマウスなしでは実行できません。同じdivにメニューのロールを足しても、キーボードでの状況は変わりません。メニューの中へ入るキーがないからです。
• 視覚を使わない スクリーンリーダー利用者には「詳細、ボタン」と聞こえ、押しても何も聞こえないため、メニューが開いたことが分かりません。読み進めると、各操作は役割のないただの文字として出てきます。メニューのロールを足した後も、フォーカスが一度も届かないメニュー項目として出てくるだけです。

最初のメニューには名前のある本物のbuttonと、役割のないdivしかないため、axeが報告することはありません。メニューのロールもaxeに合格します。どの menuitem も menu の中にあり、どれにも名前があるからです。axeが確かめるのはロールの組み合わせが正しいかで、フォーカスが項目に届くかや、キーが何をするかは確かめません。

この診断ツールはキーを押します。aria-haspopup でメニューを開くと伝えるボタンと、「More」「Actions」「Options」「詳細」「その他」「その他の操作」「操作」という名前のボタンや、kebab、overflow、dropdownなどのクラスを持つボタンを、サイトのナビゲーションとヘッダーの外から探します。それぞれを読み込み直したページでEnterキーを押して開き、現れたものを調べます。フォーカスがメニューに移らず、下矢印キーでもTabキーでも届かず、どの操作もTabの移動先でなければ、報告します。フォーカスを受けても、矢印キーでもHomeやEndでも、フォーカスが届いた項目から動けない role="menu" も報告します。メニューが開いてもフォーカスを自分に残し、aria-expanded のないボタンも報告し、aria-expanded がfalseのまま変わらないものも報告します。項目がTabの移動先で、矢印キーが何もしないメニューは、人が確認する項目として渡します。ほかの名前で、それと分かる属性やクラスのないメニューボタンや、ヘッダーの中のものは見つからず、並んでいる操作が利用者に必要なものかは、どの確認でも分かりません。

2つ目のメニューは、AIに直させるとこうなることがある形です。今あるdivにロールを足しただけで終わり、それでもaxeには合格します。すべての項目に tabindex="0" を付ける修正もあります。項目はそれぞれTabの移動先になりますが、矢印キーは何もしないメニューのままです。