画面に見えるのにスクリーンリーダーが読まないテキスト

重複する写真のリンクを隠すのは正しいことですが、バッジも一緒に隠れます。釉薬のマグが売り切れだと伝える言葉は aria-hidden の中にしかないため、スクリーンリーダーは、そのカードを背の高いマグのカードとまったく同じように読みます。

テンプレートは、マグが売り切れのときだけ、写真のリンクの中ではなくその隣にバッジを書き、CSSは引き続き写真の上に描きます。画面に表示されるものとスクリーンリーダーが読むものが同じ要素から生まれ、「売り切れ、釉薬のマグ、リンク、£22」と読まれます。ページを開いている間に在庫が変わる場合は、カードごとにバッジを一つ置き、全員から一度に隠す hidden 属性で切り替えます。opacityは使いません。

どちらも1.3.1を満たし、どちらもバッジを当てはまる場所にだけ書きます。写真の外のバッジは、見えるものと読まれるものが一つの要素なので、二つを揃え続ける手間がありません。マークアップでバッジを動かせるなら、こちらを選びます。リンクに言葉を入れる方法は、マークアップを元のまま保ち、リンクで移動する人に聞こえる場所に状態を置きます。その代わり、同じ言葉を二か所に書くことになり、テンプレートでバッジと揃え続ける必要があります。どちらを選んでも、当てはまらないものは hidden か display: none で隠し、opacityは使いません。

すべてのカードに書いて透明にしたバッジ。 バッジを写真のリンクの外に移すだけでは、修正は半分です。テーマがすべてのカードにバッジを書き、在庫のあるマグでは opacity: 0 で透明にすると、逆の失敗になります。opacityは、透明な文字色や画面の外への配置と同じく、バッジを目から隠すだけでテキストには残すため、画面に表示されるのは一つでも、スクリーンリーダーはすべてのマグの前で「売り切れ」と読みます。バッジは当てはまる場所にだけ書くか、全員から隠す hidden 属性か display: none で隠します。

視覚的に隠したテキストが問題なのではありません。 スクリーンリーダーだけが受け取るテキストは、リンクの「売り切れ」や、ページ番号の前の「ページ」のように、画面の内容を繰り返したり補ったりするなら適切です。問題になるのは、透明にしたバッジのように、画面にないことを伝えるときです。上のような共通のクラスを一つ使い、テキストを画面の遠く外へ移す方法は避けます。レイアウトによっては、ページが横にスクロールしてしまうためです。

aria-hiddenの中にほかに何があるか。 重複する写真のリンクは aria-hidden に向いた場所ですが、写真だけを含む場合に限ります。写真の上に描いた価格、評価、「残り2点」も、バッジと同じ問題を抱えます。aria-hidden の中にフォーカスを受けるものがある場合は別の問題です。Tabで届くのに読み上げられない、aria-hiddenの要素を参照してください。

body要素のaria-hidden。 モーダルやメニューのスクリプトが、body に aria-hidden="true" を付けたまま外し忘れることがあります。現在のChromiumとWebKit（それぞれChromeとSafariのエンジン）、バージョン139以降のFirefoxは、ARIA 1.3の草案が求めるとおり、body要素に付いたaria-hiddenを無視します。ただし、古いブラウザーでは、支援技術からページ全体が隠れることがあります。属性を外し、モーダルの背後のページは inert かHTML標準のダイアログで隠します。背後にフォーカスが残るモーダルを参照してください。

presentationにしたテーブル。 サイズ表のようなデータテーブルに role="presentation" や role="none" を付けると、行、列、見出しが失われ、スクリーンリーダーはセルをただの言葉の並びとして読みます。W3Cが1.3.1の失敗例として挙げるF92にあたります。セルに見出しが必要なテーブルからはロールを外し、レイアウトに使うテーブルにだけ残します。ロールを外したリストには別のガイドがあります。divやアイコン、手入力の番号で作った見た目だけのリストを参照してください。

画像。 飾りだけの画像には、ここの写真のように、aria-hidden ではなく alt="" を付けます。ファイル名や同じ言葉が読まれる装飾画像を参照してください。