NVDAの動作

Question

NVDAをページで使用できるようにするために、ウェブページにライブリージョンサポートを追加しようとしています。しかし、私はaria-live属性とはかなり異なる動作を予想よりも見た。

1. Iは非表示とIはスクリーンリーダで読み取ることがその領域内のすべてのメッセージ（<p>タグで囲まれた各メッセージ）ダンプされた単一のライブ領域を追加しようとしています。正常に動作しますが、唯一の問題は、ライブ領域divに挿入された最初のメッセージがNVDAスクリーンリーダーで読み取られないことです。後続のメッセージは完全に読み取られます。このライブ領域divは、最初のメッセージが発表されるときに動的に作成されます。

2. aria-live="assertive"は、メッセージをアナウンスするために現在のフローを実際に中断しません。

3. 私はウェブページでノックアウトを使用しています。ライブ領域としてマークされたHTML divがノックアウト条件に基づいて表示される場合、スクリーンリーダーでは検出されません。たとえば、 ：ページが最初にロードされると

   <!-- ko if: $data --> 
   <div aria-live="polite" data-bind="text: $data"> 
   </div> 
   <!-- ko --> 
   

   、$データがnullです。だからライブ領域divは存在しません。しかし、データがフェッチされるとdivが挿入されます。しかし、NVDAは追加されたdivの内容を読み込みません。これは予想される動作ですか？この問題を解決するための回避策はありますか？

Answer 1

クイックアンサー、時間を押してください。

ページのレンダリング時にライブリージョンが必要です。これにより、ブラウザーが更新を監視する準備が整います。事実の後に要素を追加するのは、ブラウザを準備するだけですが、起動させることはありません。

私はあなたのペンをフォークし、最初のボタンで（ブラウザで "XYZ"を "zeyes"と発音させて）動作させました。

http://codepen.io/aardrian/pen/wgWqVm

：あなた缶は、コードを見て

http://s.codepen.io/aardrian/debug/wgWqVm

非デバッグモード：なし、それをジャッキアップするために、すべての（もフレーム）でそこにCodePenコードが存在しないので、これは、デバッグモードになっています

あなたのコードはノックアウトko if:文の中に包まれた要素にaria-liveを置くので、それは負荷でページにレンダリングされていません。

<p>Last name: 
    <!-- ko if: lastName --> 
    <strong aria-live="polite" data-bind="text: lastName"></strong> 
    <!-- /ko --> 
</p> 

私はko if:チェック周りのライブリージョンを入れて、それを微調整し、ボタンが押されたときに、今、それが発表される：

<p>Last name: 
    <div aria-live="polite"> 
    <!-- ko if: lastName --> 
     <strong data-bind="text: lastName"></strong> 
    <!-- /ko --> 
    </div> 
</p> 

はい、私は<p>で<div>を入れて、それが唯一のデモのためであります目的。

NVDA 2016.4/Firefox 50.1.1でテストされていますが、あなたが意図していると信じています。私は第2のものに全く触れなかった。