キーボードで開けず、読み上げられないカスタムのドロップダウン

あるショップの商品ページで、「カートに入れる」ボタンの上に「サイズ」のドロップダウンがあります。角の丸い枠に山形の印と「サイズを選択」が表示され、クリックするとS、M、L、XLの一覧が開きます。キーボードで操作する人は、作り方によって二つのどちらかに出会います。一つ目では、Tabキーを押すと商品名から「カートに入れる」へ飛び、ドロップダウンにはフォーカスが当たりません。サイズを選べないため、カートに入れることもできません。二つ目では、フォーカスは当たり、Enterキーで開き、矢印キーで強調がサイズを移動します。しかしスクリーンリーダーは「サイズを選択」と読むだけで、役割も開けることも伝えず、強調が動いても何も言わず、Enterキーを押したあともどのサイズを選んだか伝えません。

達成基準2.1.1は、マウスでできることをキーボードでもできるよう求めています。一つ目の作りでは、開くための部品はクリック処理を付けた div で、フォーカスを受け取れず、それにも選択肢にもどのキーも届きません。達成基準4.1.2は、操作部品の名前、役割、値と、利用者が変えられる状態を支援技術が取得できるよう求めています。二つ目の作りではキーボードで動きますが、要素に役割がなく、名前は表示中の文字そのもので、一覧が開いていることも伝わらず、強調はCSSのクラスです。ブラウザーには伝えるものがなく、スクリーンリーダーの利用者は推測で操作するしかありません。

ドロップダウンは、サイズ、配送先の国、受け取りの時間帯など、ほかの操作より先に済ませる必要がある手順であることがよくあります。使えないドロップダウンは、その作業全体を止めます。スマートフォンでは標準のselectが大きな行のシステムの選択画面を開きますが、作り直したものはその画面も使えなくなります。

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

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

• 手の操作が限られる キーボードやスイッチの利用者は一覧を開けないか、Enterキーで何が選ばれるか分からないまま移動することになり、サイズのような必須の選択でフォーム全体が止まります。
• 視覚を使わない スクリーンリーダーの利用者には、役割も値もないまま表示中の文字だけが読まれ、強調が動いても何も聞こえないため、選ぶ部品であることも、何が選ばれているかも、ほかに何があるかも分かりません。
• 視覚が限られる 薄い背景色だけの強調は強制配色で消えることがあり、背景色だけで描いた閉じたドロップダウンは操作部品に見えなくなることがあります。
• 言語・認知・学習の能力が限られる ドロップダウンに見えるのにそのキーで動かない部品は分かりにくく、サイズが選ばれていないことに気づかないことがあります。

スキャンが見るのは、文字の入った div と、li 要素の並ぶ ul です。役割もARIAもないため、スキャナーが知っている規則に反するところがなく、一覧はクリックするまで隠れています。tabindex の有無だけを見るスキャンは、二つ目の作りを合格にします。AIに「デザインしたドロップダウン」を頼むと、まさにこの二つの作りを書くことがよくあります。一覧に role="listbox" を付けても、開く部品に役割、値、aria-activedescendant がなければ、強調は読み上げられないままです。使えるかどうかは、Tabキーで移動し、開き、矢印キーを押し、読み上げを聞いて初めて分かります。