アクセシビリティ：aria-liveを使用するページローダーインジケータ

Question

問題：私は苦労しているアクセシビリティの問題があります。私は角のウェブアプリケーションを持っています。コンテンツが読み込まれているときにページローディング/スピン/インジケータが表示されます。ページの内容が読み込まれると、スピナーは非表示になります。この「div」はDOMから決して削除されません。

ロードdivが表示されている場合、ロードdivの内容は（NVDAまたはジョーによって）読み取られません。

<div class='loading' aria-live='polite' aria-label='Do not refresh the page' tabindex="-1">Do not refresh the page</div> 

私は、アプリケーションの構造を変更したいが、これを解決するために「ARIAタグ」を使用して回避、私はアリア・ライブ作品を作るためにもっと何かをする必要があります場合は不思議ではないでしょうか？

更新（27/7月/ 2016）

さらに明確化：私はDOMからコンテンツを削除しますが/非表示のコンテンツを表示するには、CSSを使用していない（表示：表示するなし：ブロックおよびその逆）

Answer 1

aria-liveは、aria-liveの要素（またはaria-liveの要素内のテキスト）がDOMに追加または削除されたときにスクリーンリーダーをトリガーします。対照的に、非表示の要素を再表示すると、要素もテキストもDOMに追加または削除されないため、要素のaria-liveプロパティは機能しません。

これらのオプションのいずれかが、トリックを行う必要があり、「ページを更新しないでください」発表するスクリーンリーダーを取得するには：

• あなたは最初から<div class='loading' aria-live='polite'>要素とそのテキストコンテンツを作成し、その要素を追加することができますDOMに渡します。
• または、空の<div class='loading' aria-live='polite'>要素で開始し、テキストコンテンツを入力することができます。

他のいくつかの一口：限り、要素内のテキストは、あなたが声を出して読むことがしたいのか、あなたは要素のaria-label='Do not refresh the page'属性を省略することができているよう

• 。
• ケーキのアイシングのために、それはinclude a role attribute on the div that has aria-liveに傷つけることはできません。どのロールを使用するかわからない場合は、role="status"となってください。これはかなり安全な賭けです。
• ページが「ページを更新しないでください」と表示されなくなった場合は、上記の手順を逆にしてください（つまり、最初のオプションを使用して要素全体をDOMに取り除いて、その要素全体をDOMから削除するか、2番目のオプションを指定して要素のテキストコンテンツを取り込んだ場合は、その要素のテキストコンテンツをクリアします）。