屏幕阅读器和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打印功能

回答

相关问题