リンクと読み上げられ、Spaceキーで押せないボタン

あるお店の商品ページに、売り切れになったリネンのトートバッグが表示されています。価格の下には、深緑の丸いボタン「再入荷のお知らせ」があります。押すと、メールアドレスを入力する小さなフォームがページの上に開きます。見た目はボタンで、働きもボタンです。その場で何かを開くだけで、どこへも移動しません。

ところが、作りはリンクです。キーボード利用者がTabで丸いボタンへ移動し、ボタンを押すつもりでSpaceを押すと、ページが1画面分下へスクロールします。丸いボタンは画面の外へ流れ、フォームは開きません。Enterなら開きます。スクリーンリーダーの利用者には「再入荷のお知らせ、リンク」と聞こえます。リンクは別のページへ移動するものなので、この商品ページから離れると思い込みます。入荷の連絡を受け取る方法をページのボタン一覧から探しても、見つかりません。この操作要素は、リンク一覧のほうに入っているからです。

達成基準4.1.2「名前（name）・役割（role）及び値（value）」は、支援技術が操作要素の種類を伝えられるよう、すべての操作要素の役割（ロール）をコードから判別できることを求めています。href を持つ a 要素は、ブラウザーにとってリンクであり、スクリーンリーダーにもリンクというロールを渡します。フォームを開くクリック処理を加えても、丸いボタンの見た目にするクラスを付けても、ロールは変わりません。そのため、コード上のロールはリンクのままで、働きだけがボタンです。ARIA Authoring Practicesも、ボタンが行う操作はリンクの機能とはっきり異なり、ウィジェットの見た目とロールはどちらも、その機能に合わせるべきだと述べています。

キー操作もロールに従います。ブラウザーはリンク上のEnterをクリックとして扱いますが、リンク上のSpaceはページをスクロールするキーです。そのため、Spaceではクリック処理が実行されません。HTML標準のボタンなら、EnterでもSpaceでもクリック処理が実行されます。href="#" は、リンクにフォーカスが当たるようにし、ページの再読み込みを防ぐためだけに付けられていますが、この値にも別の落とし穴があります。「リンクを新しいタブで開く」を選ぶと同じページの複製が開き、スクリプトの読み込みが遅れていると、押したときにページの先頭へ飛びます。

マウスでもEnterでも動くため、簡単な確認では問題が見つかりません。問題が表に出るのは、操作要素が何と読み上げられるかを頼りにする人と、ボタンをSpaceで押す人だけです。

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

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

• 視覚を使わない スクリーンリーダーが「再入荷のお知らせ、リンク」と読み上げるため、商品ページから移動すると思い込みます。また、この操作要素はページのボタン一覧ではなくリンク一覧に表示されます。読み上げと実際の動作が食い違います。
• 手の操作が限られる キーボード利用者が、ほかのボタンと同じようにSpaceを押すと、ページが1画面分スクロールします。丸いボタンは画面の外に消え、フォームは開きません。使えるのはEnterだけです。

axeのようなルールベースの自動チェックには、名前とアドレスのあるリンクとしか見えないため、何も報告されません。フォームを開くリンクも、リンクとしては正しいからです。その操作要素が何をするかは、実際に押すまで分かりません。EaseWebの診断は、どこも指していないリンク（href="#"、"#!"、""、javascript: URL）を、人が押して確かめる対象として一覧にします。ただし、実在するアドレスを持ちながら、スクリプトでフォームを開くリンクは、問題がないように見えます。コード生成AIが手軽な修正として提案することのある role="button" の追加は、読み上げを変えるだけで、Spaceによるスクロールは残ります。