屏幕閱讀器和JavaScript打印功能

我寫了一個基於JavaScript的網頁打印功能。它從頁面上的隱藏div中提取HTML，將其呈現到新窗口並觸發打印對話框。屏幕閱讀器和JavaScript打印功能

該選項通過button與onclick="printTheThing()"事件可用。我知道，例如屏幕閱讀器有JavaScript的一些警告。 我想知道是否/有多少人，如盲人或視力受損我阻止使用此功能。

的實施將打開一個新的瀏覽器窗口，並追加到它的文檔：

function printTheThing() { 
    var dispSettings = "toolbar=yes,location=no,directories=yes,menubar=yes," 
     + "scrollbars=yes,width=550,height=400", 
     html = $('#theDivToPrint').html(), 
     printWindow = window.open("", "", dispSettings), 
     doc = printWindow.document; 

    doc.open(); 
    try { 
     doc.write('<html><head>'); 
     doc.write('<title>' + title + '</title>'); 
     doc.write('</head><body>'); 
     doc.write(html); 
     doc.write('</body></html>'); 
    } finally { 
     doc.close(); 
    } 
    printWindow.focus(); 
    printWindow.print(); 
}

更新：這是按鈕看起來像什麼：

<button type="button" onclick="printTheThing()">Print the thing!</button>

另外，我使用的CSS用圖像替換按鈕。我已經用Firefox插件「Fangs」測試了這個按鈕。它表明屏幕閱讀器將完美地讀出原始按鈕文本。但Fangs不提供任何交互性，所以我不能用它來測試打印。

來源

2012-04-20 chiccodoro

如何嘗試自己？ https://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn – 2012-04-20 12:57:02

那樣:-)添加它作爲答案？ – chiccodoro 2012-04-20 13:03:04

使用屏幕閱讀器，以提高可訪問使用W3C WAI-ARIA實時區域，更多信息請參見their recommendations和FAQ。

來測試你可以使用下面的屏幕閱讀器：
在Windows - JAWS，NVDA
在Linux上 - 逆戟鯨（不與鉻工作）+諮詢弗洛裏安Margaine的

你也可以使用AChecker來測試WCAG 2.0，第508節，Stanca Act可訪問性標準的符合性。

來源

2012-04-20 13:17:29

這是一個很好的信息，但與原始問題無關：WAI-ARIA實時區域專門針對實時更新的頁面區域，例如代碼和新聞提要等。 OP更關心的是基本的javascript是否可以與屏幕閱讀器一起工作（簡短回答：是的，但測試確認）。 – BrendanMcK 2012-04-30 07:48:36

謝謝，dae。雖然有些提示與我的問題沒有直接關係，但有些提示。順便說一句：我決定採用非JavaScript方式，即使它可能受ScreenReaders支持，因爲還有其他原因可以使網站在沒有JavaScript的情況下運行。 – chiccodoro 2012-05-02 14:44:26

最好的方法是自己嘗試一下。

有一個谷歌Chrome擴展讓你：https://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn

來源

2012-04-20 13:04:58

根本不應該依賴Chrome擴展。你應該用免費的NVDA測試東西。我猜想Google的粉絲們會說Chrome Vox沒問題。相信我，我一直在AT工作近15年。

無論如何，我需要看按鈕的代碼，而不是JS ... JS看起來不錯。有些人在知道有一個新窗口時遇到了麻煩，但是打印對話框應該抓住焦點與窗口之間的關係

來源

2012-04-20 13:18:49

適用於Windows的NVDA，適用於Linux的Orca，適用於OS X的VoiceOver以及適用於您的答案的+1。 – FelipeAls 2012-04-20 13:36:40

HTML的好處，我將它添加到問題 – chiccodoro 2012-04-20 13:56:03

感謝+ 1！ @chiccodoro，HTML看起來很好。 – 2012-04-20 14:12:43

呈現可打印頁面的方式是使用@media CSS指令。這樣你就不需要做任何特別的事情，比如彈出另一個窗口或者擔心可訪問性：內容打印正確（可能與屏幕布局非常不同，如果這是你想要的）。

來源

2012-04-20 14:21:34

好吧，這不僅僅是一個打印友好的佈局。我只想打印頁面中的一小部分信息，這隻適用於該按鈕。如果用戶選擇文件 - >打印頁面，則應該打印整個頁面。 – chiccodoro 2012-04-23 06:14:18

屏幕閱讀器和JavaScript打印功能

回答

相關問題