屏幕閱讀器和Javascript

我正在創建a website for a reading service for the blind and visually impaired，並且我正在使用JavaScript（使用jQuery）在頁面加載後向某些頁面打印一些內容。屏幕閱讀器和Javascript

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

從this page - 「一般來說，[屏幕閱讀器]訪問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的打印到＃現在扮演-DIV會讀什麼。然後，我們開始收到一些困惑的聽衆的電子郵件，想知道正在播放的鏈接發生了什麼。

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

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

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

</script>

但是，如果問題不在於JavaScript需要啓用（a recent survey shows屏幕閱讀器99％的用戶啓用JavaScript），那麼問題不解決了並且變得更糟，因爲現在屏幕閱讀器用戶會認爲JavaScript沒有啓用。

怎麼辦？

來源

2016-05-25 Dan Mantyla

你必須檢查一個特定的屏幕閱讀器提供商，沒有辦法回答這個問題 - 他們**應該**查詢活的dom，並且因此可以看到任何變化，但是如果一個特定的人查詢一次並緩存，那麼它可能不應該被使用。「靜態」頁面不再存在了，並且處理一個頁面的立即死/無用/陳舊的副本是非常毫無意義/愚蠢 –

有一個很好的方法來初步測試 - 安裝[NVDA]（http://www.nvaccess.org/）， Windows的免費屏幕閱讀器。如果您在Mac上，請嘗試使用VoiceOver。您也可以下載並運行[JAWS]的試用版（http://www.freedomscientific.com/Downloads/JAWS）。獲取[NVDA的視頻概述]（https://www.youtube.com/watch?v=Vx1vSd5uYS8）或[所有人的鍵盤快捷鍵]（https://www.paciellogroup.com/blog/2015/01/basic -screen閱讀器的命令換無障礙測試/）。之後，探索[ARIA生活區域]（https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/）。 – aardrian

我要告訴屏幕閱讀器，該網頁已更改，它需要再次閱讀內容。

這是通過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附加到文檔的內容，但壞消息是流程存在更大的問題當然，這是我的錯，

來源

2017-11-08 15:37:55

你可以測試這個，而不需要知道屏幕閱讀器如何解析DOM。我提供這個答案主要是因爲你沒有提供任何代碼來測試（「某些東西到某些頁面」不是代碼來測試），你的例子沒有提供足夠的上下文。

安裝NVDA，這是一款適用於Windows的免費屏幕閱讀器。
如果在Mac上打開VoiceOver。
如果在Ubuntu/Gnome上，請安裝Orca
下載並運行JAWS的試用版。
如果在iOS上，請啓用VoiceOver。
如果在Android上，請啓用「話語提示」。
哎呀，試試在Windows上講述。

有大量的教程讓你啓動和運行。這裏有一對夫婦：

A video overview of NVDA。
獲取列表keyboard shortcuts for many screen readers。

然後，如果你發現你的腳本在屏幕閱讀器已經解析了之後修改了DOM，請探索ARIA live regions，然後看看browser support。

最後，你上面的例子，如果左右腳本啓用實際上並不需要的腳本來工作，如果你使用<noscript>元素檢測：

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

如果瀏覽器啓用了腳本，這會不會使（其中很好）。但是，這並不能解決您想要顯示的腳本塊由於其他原因（網絡延遲，錯誤等）而失敗的情況。 More on <noscript>

既然你說你是「爲盲人和視障人士提供閱讀服務的網站」，那麼你有責任瞭解這些工具以及如何與他們一起進行測試。

來源

2016-05-25 20:45:12 aardrian

這是一個比答案更多的演講，但沒關係 –

對不起，這不是我的意圖（儘管我現在看到它聽起來有點刺骨）。部分問題是這是一個移動的目標，所以很難給出一個簡單的答案。 – aardrian

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

現代屏幕閱讀器使用Accessibility API。他們不必知道任何關於Javascript，或關於真正的DOM和HTML （唯一例外的ChromeVox）。

因爲這個原因，同樣的屏幕閱讀器將用於與您最喜歡的瀏覽器諮詢互聯網，用您最喜愛的程序（Thunderbird，Outlook，...）編寫郵件或播放Flash Player遊戲，只要因爲這些程序向其Accessibility API提供了正確的信息。他們不直接解析HTML，而是解析文檔的可訪問樹形視圖。

這意味着如果您的瀏覽器能夠理解JavaScript，您的屏幕閱讀器將會。這是因爲，您的屏幕閱讀器不會直接在頁面加載時訪問DOM，但會與您的瀏覽器提供的Accessibility API進行交互。

現在，很明顯，如果您的屏幕閱讀器在被javascript修改之前讀取內容，它將不會有任何關於javascript所做修改的線索。對於這個問題，你可以使用aria-live屬性。

這是一個簡短抽象的，而是下面的文章可以通過屏幕閱讀器爲您提供有關DOM的解析更多的信息： Why accessibility APIs matter

來源

2016-05-27 07:18:58 Adam

屏幕閱讀器和Javascript

回答

相關問題