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

Question

数字が入った色付きの div がある Web サイトがあります。たとえば、内側に数字 2 が入った赤いブロックなどです。色は理解する上で重要です。視覚障害のあるユーザーが私に電子メールを送り、スクリーン リーダーで「2 赤」を読み上げてもらえないかと尋ねてきました。

alt="2 red" として追加してみましたが、何も起こらないと言われました。彼は、これは画像の alt タグを読み取るだけかもしれないと考えました。

div 要素を使用してこれを行う良い方法はありますか?

Answer 1

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/}}

Answer 2

代替テキストに関しては、おっしゃる通りです。画像でのみ機能します。ただし、次のように、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 スクリーン リーダー エミュレーター