表示と名前が食い違うボタンとリンク

ボタンには「かごに入れる」と表示されていますが、名前は「Linen toteをカートに追加」です。表示の言葉が名前にないため、「かごに入れるをクリック」はどこにも届きません。

aria-label を外すと、ボタンのテキストが再び名前「かごに入れる」になります。見出しは説明になり、スクリーンリーダーは名前と役割の後に読み上げます。「かごに入れる、ボタン、Linen tote」です。「かごに入れるをクリック」はどのカードのボタンにも一致するため、音声操作は繰り返しのラベルのときと同じように番号を付け、利用者はどれかを選べます。

どちらも名前を表示の言葉で始め、2.5.3を満たします。説明を使う方法は、名前を表示の言葉そのままに保ち、カードの見出しがボタンのすぐそばにある一覧に向いています。ただし説明はスクリーンリーダーのボタン一覧には出ず、一覧ではどの項目も「かごに入れる」のままです。説明の読み上げを切っている人もいます。隠したテキストは商品名を名前そのものに入れるため、どこに一覧されても各ボタンを区別できます。代わりにボタンごとに隠した span が1つ要ります。同じボタンがページに何度も並ぶときは隠したテキストを、はっきりした見出しのそばに数個並ぶだけなら説明を選びます。音声認識ソフトの違いもあります。DragonとWindowsの音声アクセスは名前の一部でも照合しますが、Appleの音声コントロールは名前全体が必要だと報告されています。隠したテキストの方法では、MacやiPhoneで「かごに入れるをクリック」と話してもボタンに届かず、番号に頼ることになるかもしれません。利用者の多くがApple製品を使うなら、ボタン一覧が短くなる利点と比べて選んでください。

aria-labelかaria-describedbyか。 この二つは役割が違います。aria-label（と aria-labelledby）は名前を決めます。音声操作が照合し、スクリーンリーダーが最初に読み、ボタン一覧に表示するのが名前です。ボタンの文字は、この名前に置き換わります。aria-describedby は名前を変えずに説明を足し、説明は名前と役割の後に読まれます。音声操作は説明では照合せず、説明の読み上げを切っている人もいます。そのため、どちらを使うかは、操作要素に何が表示されているかで決まります。

• 言葉が表示されている：その言葉が名前なので、aria-label は付けません。どの商品か、補足の説明などは、説明にするか、名前の中で言葉の後ろに足します。
• アイコンだけが表示されている：残す言葉がないため、aria-label で名前を付けます。
• 言葉が表示されている操作要素の aria-label が安全なのは、その言葉で始まる場合だけです。その場合も、言葉の後ろに隠したテキストを置けば、ARIAなしで同じことができます。

足す言葉は、ARIAよりHTMLで。 ボタン自身の id を先に、見出しの id を後に並べた aria-labelledby="add-linen-tote product-linen-tote" でも、隠したテキストと同じ名前「かごに入れる Linen tote」になります。ボタン内に span を入れられないコンポーネントでは、こちらが使えます。隠したテキストはidが要りません。どちらもページ上のテキストなので、ページと一緒に翻訳されます。マークアップに書いた aria-label はそうとは限らず、ブラウザーの翻訳機能によっては元の言語のまま残り、食い違いが戻ることがあります。

表示の言葉を先頭に、一続きで。 足す言葉は表示の言葉の後ろに置き、前や間には入れません。「Linen tote、かごに入れる」は適合しますが、見えている言葉で始まりません。「かごにLinen toteを入れる」は、利用者が話す言葉を分断します。

言葉を言い換えない。 「カート」と「かご」、「購入」と「注文」、「ログイン」と「サインイン」は、開発者には同じでも、音声認識には別の言葉です。名前にもヘルプの文にも、画面に出ている言葉を使います。

アイコンと記号。 アイコンだけのボタンには見える言葉がないため、2.5.3の対象外です。言葉の名前が必要なことは、名前がないアイコンだけのボタンで扱っています。「次へ」の後ろの矢印のように、言葉に添えた記号はラベルの一部ではないため、名前は「次へ」で足ります。

フォームの入力欄。 同じ達成基準は入力欄のラベルにも当てはまります。入力欄の上に表示したラベルと違う aria-label は、ラベルがない・表示と食い違うフォームの入力欄で扱っています。