色や形、位置だけに頼る操作の指示

食料品店の購入手続きに、配達の手順があります。見出しの下に「配達枠を選んで、右の緑の矢印を押してください。」という1文があります。その下に配達枠のラジオボタンが3つあり、手順の最後には、左に「カートに戻る」のリンク、右に白い矢印の付いた丸い緑のボタンがあります。ボタンに言葉はなく、コード上の名前は「お支払いへ進む」です。

広い画面で見える人は、すぐに矢印を見つけます。スクリーンリーダーの利用者には、指示の文、配達枠、「カートに戻る、リンク」「お支払いへ進む、ボタン」と聞こえます。緑、矢印、右に当たるものは聞こえません。スマートフォンでは手順のボタンが縦に並び、矢印はリンクの下、左側に来るため、この文は誰にとっても正しくなくなります。

WCAG 1.3.3は、指示が形、色、大きさ、視覚的な位置、向き、音といった感覚的な特徴だけに頼らないことを求めています。この指示は、ボタンを色、形、画面上の位置だけで特定しています。形や位置だけで内容を特定する失敗例F14に当たります。この基準は、こうした言葉を禁止してはいません。見ることや聞くことに頼らない手がかりを一緒に示すことを求めていて、その手がかりは通常、操作要素の名前です。達成方法G96がその形を示しています。「丸い go ボタンを押す」が伝わるのは、「go」という言葉があるからです。

ショップやアカウントのページでは、同じ問題が別の感覚に頼る形でも現れます。

• 色：「緑の配達枠はまだ空いています」「赤い欄は必須です」と書き、ほかに印がない。
• 形：「葉っぱのマークの商品は、繰り返し使える梱包で届きます」と書き、葉っぱは文字のないアイコンだけ（記号だけで情報を伝える失敗例F26）。
• 大きさ：「住所は大きいほうの欄に入力してください」。
• 位置：「右上のメニューから」「サイドバーに詳細があります」と書き、スマートフォンではレイアウトが位置を変える。
• 音：「チャイムが鳴ったら、配達枠が確保されています」と書き、画面にメッセージが出ない。

この問題は、指示を書いた人には見えにくい問題です。書いた人の画面では正しいためです。同じ画面を受け取らない人、つまり使う感覚、画面の幅、拡大の度合いが違う人や、右から左に書く言語に翻訳して読む人には通じなくなります。

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

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

• 視覚を使わない スクリーンリーダーは指示の文を読んだ後、「カートに戻る」というリンクと「お支払いへ進む」というボタンを読み上げます。どちらも緑、矢印、右とは読まれないため、指示が何も指していません。
• 手の操作が限られる 音声操作の利用者は、操作要素の名前を話して操作します。「緑の矢印をクリック」に合うものはなく、ボタンには代わりに話せる言葉も表示されていません。
• 視覚が限られる 拡大鏡では一度に手順の一部しか見えず、「右」が画面の外にあることがあります。スマートフォンや大きな拡大表示では、矢印はそもそも右にありません。
• 色を知覚しない 緑とほかの色を見分けられない人には「緑」が手がかりにならず、形と、間違っているかもしれない位置だけが残ります。
• 言語・認知・学習の能力が限られる 左右を取り違えやすい人や、矢印を「次へ進む」と読み取らない人は推測するしかなく、その推測がカートに戻るリンクになることもあります。

文が感覚的な言葉だけに頼っているかどうかを、ルールで判定することはできません。「緑の『お支払いへ進む』ボタンを押す」は問題なく、「緑の矢印を押す」は問題ですが、どちらにも色と動詞が含まれています。EaseWebの診断は、感覚的な言葉と指示が一緒に出てくる文を英語と日本語で見つけ、確認候補として人やAIのレビューに渡します。位置の言葉がどのブレークポイントでも正しいか、アイコンの意味がどこかに書かれているか、音に代わる表示があるかは確認できません。AIが生成する文章は、デザイナーが見ている画面を説明しがちです（「下の青いボタンをタップ」）。渡されたのがデザインの画像だけだからです。