スクリーンリーダーユーザーにアクセス可能なテキストを HTML で提供するにはどうすればよいですか?

Question

たとえば、内側に数字 2 が入った赤いブロックなど、番号が記載された色付きの div がある Web サイトがあります。色は理解する上で重要です。視覚障害のあるユーザーが私に電子メールを送り、スクリーン リーダーで「2red」を読み上げてもらえないかと尋ねてきました。 alt="2red" として追加しようとしましたが、何も起こらないと彼は言いました。彼は、これは画像の alt タグを読み取るだけかもしれないと考えました。 div要素を使用してこれを行う良い方法はありますか?

P粉492959599 · Answer

2020 年を編集: 現在、display:none または visibility:hidden を使用すると、一般的にコンテンツが視覚的にもスクリーンリーダーにも非表示になるようです (Firefox および Chrome の NVDA でテスト済み)。そのため、次のステートメントは次のようになります。無効。現在、コンテンツを画面外に移動することが、スクリーンリーダーユーザーにコンテンツを提供する唯一の方法のようです。次の表も参照してください。 http://stevefaulkner.github.io/HTML5accessibility/tests/hidden-2016.html

受け入れられた回答に特に明記されていない限り、少なくとも Chromevox¹ と NVDA² は display:none## を持つファイルも読み取ります #または、aria-hidden=false が設定されている場合は、要素の visibility:hidden CSS プロパティ。ただし、これは現在 Chrome (65) のみで行われ、Firefox や Edge では行われません (私のテストによると)。

したがって、(現時点では Chrome でのみ可能です)、次のこともできます:

リーリー

Chromevox と NVDA が最初と 2 番目のヘッダーを読み取る場所。参照:

https://jsfiddle.net/4y3g6zr8/6/

すべてのブラウザーがこの動作に同意した場合、他のソリューションで提案されているすべての CSS トリックよりもクリーンなソリューションとなるでしょう。

1^{Chromevox _{https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn}}2^{NVDA _{https://www.nvaccess.org/}}

P粉594941301 · Answer

代替テキストに関しては、おっしゃる通りです。画像でのみ機能します。ただし、次のように、aria-label を使用して非画像要素の alt 属性を置き換えることができます。

効果的な解決策

ARIA タグ ★ ★ ★ ★ ★ ★

aria-label (別の要素のテキストからアクセス可能な名前を抽出する aria-labelledby と混同しないでください) は、画面外の説明コンテンツを要素に追加するために使用されますalt= 属性と同様、画面外の説明コンテンツを画像に追加し、画像が表示できない場合に使用されます。

違いは、

aria-label が画像以外の要素にも使用できることです。 リーリー

内部テキストを非表示にするには、

aria-hidden 属性を追加します。

折り折りの位置 ★ ★ ★ ★

リーリー

トリミングは、画面上にまだ表示されている 1 ピクセル x 1 ピクセルの要素を完全に非表示にするために使用されます。

ポジショニング ★ ★ ★

リーリー

インデント★

リーリー

ページレイアウトの範囲を超えている限り、実際のインデント値は重要ではありません。例では、コンテンツを 5,000 ピクセル左に移動します。

この解決策は、テキストの完全なブロックに対してのみ機能します。アンカー、フォーム、右から左へ記述する言語、または他のテキストと混合した特定のインラインテキストではうまく機能しません。

機能しない

可視性: 非表示; および/または表示: なし;

これらのスタイルはテキストを非表示にして、すべてのユーザーに表示されないようにします。テキストはページの視覚的なフローから削除され、スクリーンリーダーによって無視されます。コンテンツをスクリーンリーダーで読み上げたい場合は、この CSS を使用しないでください。ただし、スクリーンリーダーでコンテンツを読み取れないようにしたい場合は、これを使用してください。

幅:0px;高さ:0px

上記と同様、高さや幅のない要素はページフローから削除されるため、ほとんどのスクリーンリーダーはこのコンテンツを無視します。 HTML の幅と高さは同じ結果を生成する場合があります。スクリーンリーダーでコンテンツを読み取れるようにする場合は、コンテンツサイズを 0 ピクセルに設定しないでください。

＃＃＃詳しくは：＃＃＃

WebAIM障害センター

Fangs Mozilla スクリーンリーダーエミュレーター