屏幕閱讀器和Javascript

Question

我正在為盲人和視障人士的閱讀服務創建一個網站 ，我正在使用JavaScript（使用jQuery）在頁面加載后將一些內容打印到某些頁面。

屏幕閱讀器是否會在頁面加載后讀取使用jquery打印到頁面的內容？

從這個頁面 - “通常，[屏幕閱讀器]訪問DOM（文檔對象模型），他們使用瀏覽器API（應用程序編程接口）來獲取他們需要的信息。”

我們知道jQuery是一個DOM操作庫。

所以問題變成..屏幕閱讀器是否會獲取整個DOM的副本，然后解析並閱讀它？ 或者他們是否讀取了與jQuery相同的DOM？

這是我使用JavaScript的其中一個頁面的示例。 它使用一種功能來確定我們在空中播放的節目，然后打印節目的名稱和聽取它的鏈接。

<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的內容，那么它將不會讀取任何內容。 然后，我們開始收到一些混亂的聽眾的電子郵件，想知道正在播放鏈接發生了什么。

所以今天早上我添加了這個：

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

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

</script>

但如果問題不在於需要啟用JavaScript（ 最近的一項調查顯示 99％的屏幕閱讀器用戶啟用了JavaScript），那么問題就無法解決，甚至更糟，因為現在屏幕閱讀器用戶會認為JavaScript未啟用。

該怎么辦？？

Answer 1

您可以在不需要知道屏幕閱讀器如何解析DOM的情況下對此進行測試。 我提供這個答案主要是因為你沒有提供任何代碼來測試（“某些頁面的某些東西”不是要測試的代碼）而你的例子沒有提供足夠的上下文。

• 安裝NVDA ，一個用於Windows的免費屏幕閱讀器。
• 如果在Mac上，請啟用VoiceOver。
• 如果在Ubuntu / Gnome上，請安裝Orca
• 下載並運行JAWS試用版。
• 如果在iOS上，請啟用VoiceOver。
• 如果在Android上，請啟用TalkBack。
• 哎呀，試試Windows上的講述者。

有很多教程可以幫助您啟動和運行。 這是一對夫婦：

• NVDA的視頻概述 。
• 獲取許多屏幕閱讀器的鍵盤快捷鍵列表。

然后，如果您發現您的腳本在屏幕閱讀器已經解析后修改了DOM，請瀏覽ARIA實時區域 ，然后查看瀏覽器支持 。

最后，如果您使用<noscript>元素，上面關於檢測腳本是否已啟用的示例實際上並不需要腳本才能工作：

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

如果瀏覽器啟用了腳本，則不會呈現（這很好）。 但是，這不會解決您希望顯示的腳本塊因其他原因（網絡延遲，錯誤等）而失敗的情況。 更多關於<noscript>

既然你說你“正在為盲人和視障人士創建一個閱讀服務網站”，你就有責任學習工具以及如何用它們進行測試。

Answer 2

“通常，[屏幕閱讀器]訪問DOM（文檔對象模型），他們使用瀏覽器API（應用程序編程接口）來獲取他們需要的信息。”

現代屏幕閱讀器使用Accessibility API。 他們不必了解任何有關Javascript ，或真正的DOM和HTML （ChromeVox除外） 。

出於這個原因，相同的屏幕閱讀器將用於使用您喜歡的瀏覽器查詢Internet，使用您喜歡的程序（Thunderbird，Outlook，...）編寫郵件或玩Flash播放器游戲，只要這些程序提供正確的他們的Accessibility API的信息。 它們不直接解析HTML，而是解析文檔的可訪問樹視圖。

這意味着如果您的瀏覽器了解javascript，您的屏幕閱讀器將會。 這是因為，您的屏幕閱讀器不會直接在頁面加載中訪問DOM，而是會與瀏覽器提供的Accessibility API進行交互。

現在，顯然，如果您的屏幕閱讀器在javascript修改之前讀取內容，它將不會對javascript所做的修改有任何線索。 就此而言，您可以使用aria-live屬性。

這是一個簡短的摘要，但是下面的文章可以為您提供有關屏幕閱讀器解析DOM的更多信息： 為什么可訪問性API很重要

Answer 3

我需要告訴屏幕閱讀器頁面已經更改，並且需要再次閱讀內容。

這是通過ARIA屬性完成的。

我在我的html中添加了aria-live="polite" 。 “禮貌”設置告訴屏幕閱讀器它應該讀取新內容但不會中斷當前正在說的內容。 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讀取附加到文檔中的內容，但壞消息是網站的流量和他的期望存在更大的問題。 這當然是我的錯。