web-dev-qa-db-ja.com

HTMLでは、スクリーンリーダー（つまり、視覚障害者）だけがアクセスできるテキストを作成するにはどうすればよいですか？

私は、数字で色分けされたdivがあるWebサイトを持っています。内側に番号2の赤いブロック。色は理解にとって重要です。目の不自由なユーザーから、スクリーンリーダーに対して「2赤」と表示できるかどうかを尋ねるメールが届きました。

これをalt = "2赤"として追加してみましたが、何もしなかったと彼は言いました。画像のaltタグのみを読み取る可能性があると彼は考えています。

これをdivに対して行う良い方法はありますか？

htmlaccessibility
24
Some Guy

Altテキストに関しては、あなたは正しいです、それは画像に対してのみ機能します。

機能するソリューション

ARIAラベル★★★★★★

aria-label（aria-labeledbyでフォーカスする必要はありません）は、alt=属性がオフスクリーンの説明的なコンテンツを画像に追加する方法で、オフスクリーンの説明的なコンテンツを要素に追加するために使用されます。画像が表示できない場合に使用されます。

違いは、aria-labelは非画像要素で使用できることです。

<div aria-label="test A"><p aria-hidden="true">test B</p></div>
<!--
     result (screenreaders):  test A
     result (regular):        test B
-->

aria-hidden属性を追加すると、内部テキストが非表示になります。

位置+クリップ+折りたたみ★★★★

.screenreader {
    position: absolute !important; /* Outside the DOM flow */
    height: 1px; width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

クリップは、1px x 1px要素を完全に非表示にするために使用されます。それ以外の場合は、画面に表示されます。

位置★★★

.screenreader {
    position: absolute;
    left:-9999px;
}

<div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div>

インデント★

.screenreader {
    text-indent: -5000px;
}

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

このソリューションは、テキストの完全なブロックに対してのみ機能します。アンカーやフォーム、右から左に書く言語、または他のテキストと混合した特定のインラインテキストではうまく機能しません。

動作しないでしょう

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

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

幅：0px;高さ：0px

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

さらに：

42
davidcondrey

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

少なくとも受け入れられた回答で別様に述べられていない限りChromevox1 およびNVDA2 display:noneが設定されている場合は、スタイルvisibility: hiddenまたはaria-hidden=false CSS属性を持つ要素も読み取ります。ただし、現在Chromeのみ（65）で、FirefoxやEdgeにはありません（私のテストによると）。

したがって（現在のところ残念ながらChromeのみ）、次のようなことも可能です。

<h1 aria-hidden="false" style="display: none;">Heading only for Screen Readers</h1>
<h1 aria-hidden="false" style="visibility: hidden;">Second Heading only for Screen Readers</h1>
<h1 aria-hidden="true">Heading only for Screen</h1>

chromevoxとNVDAは最初と2番目の見出しを読みます。これも参照してください： https://jsfiddle.net/4y3g6zr8/6/

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

1Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn2NVDA https://www.nvaccess.org/

2
klues

内部に視覚的に隠された要素を置くことができます：

<div>
    <span class="visually_hidden">2 red</span>
</div>

「視覚的に隠す」には、HTML5ボイラープレートがどのように行うかを借りることができます。

.visually_hidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}
2
kinakuta

タイトルの質問について：いいえ、スクリーンリーダーのみがアクセスできるテキストを（HTMLなどで）入手する方法はありません。空ではないimg属性と欠落または無効なalt属性を持つsrc要素を使用したり、CSSを使用して視覚的に何かを非表示にしたりするなど、あなたが何をしても、それを読むことに関心があるすべてのソフトウェアで使用できます（スクリーンリーダーにアクセスできない場合があります）何らかの理由で）。

一方、実際に使用する場合は、.

<div class=foo>2 <img alt=red></div>

その場合、ほとんどのスクリーンリーダーはそれを「2つの赤」として読みますが、正常に動作する通常のブラウザもそうなので、効果はスクリーンリーダーに限定されません。

アクセシビリティのために何をすべきかは別の問題であり、コンテキストと赤い色を使用する目的によって異なります。ブラウザがボックスを赤く表示しても、色覚異常のため、ユーザーはそれを赤く見えない場合があります。特に赤と緑を区別することが適切である場合、多くの人々はそうすることに失敗します。

特定のケースで単純な解決策がある場合や、適切な解決策がない場合はトリッキーな問題である場合があります。一般的な注意事項とさまざまな手法については、ドキュメント WCAG 2.0を満たす方法：色の使用 を参照してください。

1
Jukka K. Korpela