スクリーンリーダーが新しいコンテンツ（または表示されるコンテンツ）をドキュメントに読み込ませる方法はありますか？ロールアラートはいくつかのタグでのみ機能します

Question

私はスクリーンリーダーをdisplay:noneからdisplay:blockに切り替えるコンテンツを読むようにしようとしています。私はrole="alert"を使用して良い方法だと思うが、コンテンツがdiv、pまたはspanにある場合にのみ動作します。

しかし、私のコンテンツはdiv、span、pのミックスで、読者を選別する他のタグ（h1、ul、liのように、など）読み取りません。

スクリーンリーダーですべてのコンテンツを読み取るにはどうすればよいですか？

例があります：

<button onclick="show()"> 
    Show 
</button> 

<div id="button" style="display:none" role="alert"> 
    Lettera A 
    <div> 
    Lettera B 
    <h1> 
    Lettera E 
    </h1> 
    <div> 
     Lettera C 
     <ul> 
     <li>Lettera D</li> 
     </ul> 
    </div> 
    </div> 
</div> 

Javascriptを：この例では

function show() { 
    $('#button').show(); 
} 

、スクリーンリーダーが（私はWindows上のFirefoxでNVDAを使用する）読み取り専用：
Lettera A
Lettera Bを
レターケC

Answer 1

aria-live propertyはあなたが探しているものです。要素が更新されることを示すために使用され、ユーザーエージェント、支援技術、およびユーザーがライブリージョンから期待できる更新の種類を記述します。領域は丁寧として指定されている場合

、支援技術は、アップデートをユーザーに通知しますが、一般的に現在のタスクを中断しない、と更新が低い優先度を取ります。地域が主張として指定されると、支援技術は直ちにユーザーに通知し、以前の更新の音声キューをクリアする可能性があります。