web-dev-qa-db-ja.com

スクリーンリーダーとJavascript

私が作成しているのは 視覚障害者向けの読書サービス用のWebサイト そしてJavaScript（jQueryを使用）を使用して、ページが読み込まれた後にいくつかのページにいくつかのものを印刷しています。

スクリーンリーダーは、ページが読み込まれた後、jqueryを使用してページに印刷されたコンテンツを読み取りますか？

From このページ -"通常、[スクリーンリーダー]はDOM（Document Object Model）にアクセスし、ブラウザーAPI（Application Programming Interfaces）を使用して必要な情報を取得します。"

そして、jQueryがDOM操作ライブラリであることを私たちは知っています。

したがって、問題は次のようになります。スクリーンリーダーはDOM全体のコピーを取り、それを解析して読みますか？それとも、jQueryが機能するのと同じDOMを読んでいますか？

これは私がJavaScriptを使用しているページの1つの例です。これは、無線で再生しているプログラムを判別し、プログラムの名前とそれを聞くためのリンクを出力する機能を使用します。

<div id="now-playing-div"></div>

<script>

// invoke the audio-reader javascript library
$( document ).ready( function() {
  var callback = nowPlaying; // catalog, schedule, podcasts, archive or nowPlaying
  var selector = '#now-playing-div';
  makeAudioReaderPage(callback, selector);
});

</script>

ご覧のとおり、スクリーンリーダーがjavascript/jqueryが＃now-playing-divに出力する内容を読み取らない場合、何も読み取られません。それから、NowPlayingリンクに何が起こったのか疑問に思っている混乱したリスナーの電子メールをいくつか受け取り始めました。

だから今朝私はこれを追加しました：

<div id='no-js'>Please enable JavaScript to receive this content.</div>

<script>
$( document ).ready( function() {
  $('#no-js').toggle();
});

</script>

しかし、問題がJavaScriptを有効にする必要があるということではない場合（ 最近の調査によると スクリーンリーダーユーザーの99％がJavaScriptを有効にしている）、問題は解決されず、さらに悪化します。スクリーンリーダーのユーザーは、JavaScriptが有効になっていないと思います。

何をすべきか？？

javascriptjqueryaccessibilityscreen-readersjaws-screen-reader
12
Dan Mantyla

ページが変更されたことと、コンテンツを再度読み取る必要があることをスクリーンリーダーに伝える必要がありました。

これはARIA属性を使用して行われます。

aria-live="polite"をHTMLに追加しました。 「丁寧な」設定は、スクリーンリーダーに、新しいコンテンツを読み取る必要があるが、現在言われていることを中断しないように指示します。 IIRCの他の設定はoffとassertiveです。

<div id="now-playing-div" aria-live="polite"></div>

<script>

// invoke the audio-reader javascript library
$( document ).ready( function() {
  var callback = nowPlaying; // catalog, schedule, podcasts, archive or nowPlaying
  var selector = '#now-playing-div';
  makeAudioReaderPage(callback, selector); // the callback will append HTML to the element via jquery with the selector as the query term
});

</script>

今、私は何も見ることができない男がウェブサイトをテストしているところです。彼は以前は見ることができ、視力を失う前にコンピューターの使い方を学びました。残念ながら彼はウェブサイトで苦労しています。問題は、オーディオを聞くためにページにアクセスすると、キーボードショートカットを使用して再生ボタンを検索しますが、再生ボタン（jplayer）がクリック後にポップアップするポップアップウィンドウにあるため、再生ボタンがないことです。リンク。彼は欲求不満になり、電話は終わった:(

したがって、良いニュースは、jqueryを介してドキュメントに追加されたコンテンツを読むことができるということですが、悪いニュースは、Webサイトのフローと彼の期待に大きな問題があるということです。もちろんこれは私のせいです。

1
Dan Mantyla

スクリーンリーダーがDOMを解析する方法を知らなくても、これをテストできます。この回答を提供する主な理由は、テストするコードが提供されておらず（「一部のページの一部」はテストするコードではない）、例では十分なコンテキストが提供されていないためです。

  • インストール [〜＃〜] nvda [〜＃〜] 、Windows用の無料のスクリーンリーダー。
  • Macの場合は、VoiceOverをオンにします。
  • Ubuntu/Gnomeの場合は、インストール Orca
  • [〜＃〜]顎[〜＃〜] の試用版をダウンロードして実行します。
  • IOSの場合は、VoiceOverをオンにします。
  • Androidの場合は、TalkBackをオンにします。
  • 一体、Windowsでナレーターを試してみてください。

起動して実行するためのチュートリアルはたくさんあります。ここにいくつかあります：

次に、スクリーンリーダーがすでにDOMを解析した後で、スクリプトがDOMを変更していることがわかった場合は、 ARIAライブリージョン を調べてから、 ブラウザーサポート を調べます。

最後に、スクリプトが有効になっているかどうかの検出に関する上記の例では、<noscript>要素を使用する場合、実際にはスクリプトが機能する必要はありません。

<noscript>
 <p>
 Please enable JavaScript to receive this content.
 </p>
</noscript>

ブラウザでスクリプトが有効になっている場合、これはレンダリングされません（これは良いことです）。ただし、これは、表示したいスクリプトブロックが他の理由（ネットワークラグ、バグなど）で失敗する場合には対応していません。 <noscript>の詳細

あなたは「視覚障害者のための読書サービスのためのウェブサイトを作成している」と言っているので、ツールとそれらを使ってテストする方法を学ぶ責任は本当にあなたにあります。

4
aardrian

「通常、[スクリーンリーダー]はDOM（Document Object Model）にアクセスし、ブラウザーAPI（Application Programming Interfaces）を使用して必要な情報を取得します。」

最新のスクリーンリーダーはAccessibilityAPIを使用しています。 Javascript、または実際のDOMとHTML（ChromeVoxを除く）について何も知る必要はありません。

そのため、同じスクリーンリーダーを使用して、お気に入りのブラウザでインターネットを参照したり、お気に入りのプログラム（Thunderbird、Outlookなど）でメールを書き込んだり、フラッシュプレーヤーを再生したりしますそれらのプログラムがアクセシビリティAPIに正しい情報を提供する限り、ゲーム。 HTMLを直接解析するのではなく、ドキュメントのアクセス可能なツリービューを解析します。

これは、ブラウザがjavascriptを理解している場合、スクリーンリーダーが理解できることを意味します。これは、スクリーンリーダーがページの読み込み時にDOMに直接アクセスするのではなく、ブラウザが提供するAccessibilityAPIと対話するためです。

これで、明らかに、スクリーンリーダーがjavascriptによって変更される前にコンテンツを読み取った場合、javascriptによって行われた変更についての手がかりはありません。さらに言えば、aria-live属性を使用できます。

これは短い要約ですが、次の記事では、スクリーンリーダーによるDOMの解析に関する詳細情報を提供できます。 アクセシビリティAPIが重要である理由

3
Adam