HTMLアクセシビリティ：表示されたときにスクリーンリーダーが隠しテキストを表示する

Question

w3 documentationによれば、aria-live属性を使用して、HTML要素のテキストコンテンツが変更されたときに読み取るように指示できます。しかし、私の場合、私は任意のテキストを更新し、単にそれはいくつかの条件の下で表示されたときにスクリーンリーダーが<span>の内容を発表したいことが文句を言わない（つまり、jQueryの.show()機能を使用することによって、である）ここで

は単純化です私のHTMLの& JS：このようアリアは、住んで使用

<div class="toggleable_element" hidden> 
    <span aria-live="assertive">Text to be read out</span> 
</div> 
.... 
<script> 
    $("#toggleable_element").show(); 
</script> 

は（私はこのケースでJAWSを使用しています）のテキストを読んでから、スクリーンリーダーをトリガー文句を言いません。

もう1つの提案は、role="alert"属性を追加することですが、これはスクリーンリーダーアナウンスのいずれかをトリガーするようには見えません。

スパンの内容を読み上げる方法に関する提案はありますか？

Answer 1

最新のスクリーンリーダーとブラウザの組み合わせでは、通常は動作するはずのものがあります。

iOS 10でIE/Firefox/Chrome + Jaws/NVDAとVOを試しました。内容が変更されたときに変更されたときにaria-live要素の内容が読み込まれます。 CSS表示または可視性プロパティ。 この要素がDOMに追加されたときにも読み込まれます。 これは、表示および可視性のCSSプロパティでのみ機能することに注意してください。効果的な視認性に影響する可能性のある他のCSSプロパティは機能しません。不透明度、変換、オフスクリーンの位置付けなどが含まれます。後者は一般的にスクリーンリーダーによって完全に無視されます。

ただし、動作しないのは、要素が表示またはDOMに追加された後にaria-live属性を追加することです。 このようにすると、要素はaria-live領域になることはなく、後でコンテンツの変更が読み取られることはありません。

このため、ほぼすべてのSR +ブラウザの組み合わせが一致します。

Answer 2

使用しているJAWSとウェブブラウザのバージョンはどれですか？

私は、JAWSとIE11がaria-liveを使用するときによく一緒に再生されないことを知っています。