CSSの不透明度はアクセシビリティにどのように影響しますか？

Question

Googleやその他のSOの記事を閲覧した後、私は簡単で直接的な答えが得られることを希望して質問を明快にすることに決めました。

はDoes opacity:0 have exactly the same effect as visibility:hidden上の議論に一つの更なるステップを追加するには：私は理解してopacity:0についてdisplay:noneとvisibility:hidden隠すスクリーンリーダーからの要素などが、何それ？

リンクされた質問の回答の表には、不透明度がのタブオーダーに参加していることに注意してください。それは必然的にmapped to the accessibility APIを意味しますか？

巨大なネガを設定すると、display: noneとvisibility: hiddenの代わりにドロップダウンメニューが用意されていますが、JavaScriptを使わずにメニューをフェードアウトしたいのですが、スクリーンリーダーから隠さないようにしています。 。

Answer 1

不透明度は透明度の係数なので、不透明度：0は表示されないことを意味します。 表示について：「表示されません」と表示されている場合は、表示が非表示になりますがページにはまだサイズがありますが、表示は完全に一部のオブジェクトやコンテナには表示されません。

Answer 2

opacity: 0;は、スクリーンリーダーからコンテンツを隠すことはありませんが、目に見えるユーザーや部分的に遭遇したユーザーのコンテンツは非表示になります。
白い背景に白いテキストを表示するのと同じです（または透明で、アイデアを得る）。
これはアクセシビリティAPIにマップされますが、リンクの上でポインタが変更されていることが表示されるはずです。まだテキスト/編集を選択できます。リンクとフォーム要素を集計すると、アウトラインはいつものように表示されるか、透明になります。編集：後者は、このページのFirebugでテスト済みです。

Answer 3

これは古い質問ですが、それはGoogle検索で浮上している最初の一人だったので、私はチャイムたかった。2017年4月のよう

、ChromeVoxのスクリーンリーダーは、コンテンツを読み取りません

具体的には、要素が視覚的に利用可能なテキストでラベル付けされていない限り、ChromeVoxは不透明度を0に設定して視覚的に隠されたテキストを読み込みません。例えば

：

<!-- will not be read --> 
<a href="#!" style="opacity: 0;">not read</a> 

<!-- WILL be read --> 
<a href="#!" style="opacity: 0.001;">is read</a> 

<!-- span text will not be read --> 
<a href="#!"> 
    Read More 
    <span style="opacity: 0;"> 
    this will not be read 
    </span> 
</a> 

<!-- 
    button text will not be read, 
    but aria-labelledby text will be read on button focus 
--> 
<span id="test">button label</span> 
<button type="button" aria-labelledby="test" style="opacity: 0;"> 
    This text will not be read 
</button>