読み上げを誤らせる、無効なARIA

ショップの購入手続きの画面で、「注文を確定する」ボタンの上に選択肢が一つあります。小さな四角いボックスと「ギフト包装にする」という言葉です。これは本物のチェックボックスではありません。ボックスとして描いた div に、クリックやSpaceキーでチェックマークを描くスクリプトと、支援技術に何であるかを伝えるARIAが付いています。そのARIAに、間違った言葉が一つ入っています。あるバージョンでは、スクリプトが状態を aria-checked="yes" と aria-checked="no" で書きます。スクリーンリーダー利用者がTabキーでボックスに移動すると、「ギフト包装にする、チェックボックス、チェックあり」と聞こえます。ギフト包装は不要なのでSpaceキーを押しますが、チェックありのまま読まれます。ボックスは空だったのに、今はチェックが入っています。別のバージョンでは、ロールが aria-role="checkbox" と書かれています。スクリーンリーダーは「ギフト包装にする」とだけ読み、ロールも状態も伝えず、Spaceキーを押しても何も読みません。

ARIAは決まった語彙です。ロール、属性、属性が取れる値のそれぞれが仕様に定められていて、ブラウザーは知っている言葉だけでアクセシビリティツリーを作ります。それ以外は作成者の誤りで、仕様はその扱い方をブラウザーに定めています。作成者の意図を推し量るわけではありません。

• aria-checked が取る値は "true"、"false"、"mixed" です。オンかオフかとして公開する状態に未知の値があるとき、ARIAは空の値と "undefined" 以外をすべて true として扱うようブラウザーに定めています。Chromeはそのとおりに動き、"no" も "yes" と同じくチェックありと読まれます。ボックスの表示に関係なく、常にチェックありです。
• aria-role は属性ですらありません。ブラウザーはこれを無視するため、div は自身のロールである generic のままで、状態を持ちません。隣の正しい aria-checked も、generic の要素はチェックできないため無視されます。
• role="check-box" のように、ARIAが定義するロールを含まない role は、ロールが指定されていないものとして扱われ、結果は同じです。

どちらのバージョンも、4.1.2（名前・役割・値）を満たしません。ソースではどちらも設定しているように見えても、操作要素が支援技術に公開すべきロールか状態が、誤っているか欠けています。

最初のバージョンは、手早い確認を通ってしまいます。Chromeでスクリーンリーダーを動かしてボックスにチェックを入れると、「チェックあり」と読まれます。問題が分かるのは空のボックスのときだけで、その状態はあまり確かめられません。同じ未知の値を別の扱い方をするブラウザーもあり、同じページで聞こえる内容が人によって違うこともあります。

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

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

• 視覚を使わない スクリーンリーダーや点字ディスプレイの利用者には、空のボックスが「チェックあり」と伝わるか、「ギフト包装にする」という言葉だけが伝わってチェックできることが分かりません。そのため、意図しない選択のまま注文したり、選択肢に気づかなかったりします。
• 視覚が限られる 読み上げ付きの拡大鏡を使う人は、見える状態と聞こえる状態が違い、支払いの前にどちらを信じるか判断しなければなりません。

axe はARIAの言葉を一つずつ仕様と照らし合わせるため、aria-checked="no"（aria-valid-attr-value）、aria-role（aria-valid-attr）、role="check-box"（aria-roles）を確実に報告します。ただし、確認するのは見つけたときの状態のページだけです。最初のクリックの後にだけ "no" を書くスクリプトは、読み込み時のページを調べても見つかりません。正しい言葉のロールが操作要素に合っているか、aria-checked がチェックマークに従っているかも、自動チェックには分かりません。手早い修正が状況を悪くすることもあります。axe が指摘した属性を削除すると、報告は消えますが、ロールのないボックスが残ります。aria-role を role に直しても、スクリプトが "yes" と "no" を書き続けるなら、一つの問題がもう一つに入れ替わるだけです。「念のため」HTML標準のチェックボックスに aria-checked を足すと、ブラウザーが無視する属性が増え、本来の状態と食い違った時点で、axe は aria-conditional-attr として報告します。