屏幕阅读器和 JavaScript 打印功能答案

【问题标题】：Screen readers and JavaScript print feature屏幕阅读器和 JavaScript 打印功能
【发布时间】：2012-04-20 12:53:55
【问题描述】：

我为网页编写了一个基于 JavaScript 的打印功能。它从页面上隐藏的 div 中提取 HTML，将其呈现到新窗口中并触发打印对话框。

该选项通过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 不提供任何交互性，所以我无法用它测试打印。

【问题讨论】：

试试自己怎么样？ chrome.google.com/webstore/detail/…
这样 :-) 将其添加为答案？

标签： javascript accessibility screen-readers

【解决方案1】：

根本不应该依赖 Chrome 扩展程序。您应该使用免费的 NVDA 进行测试。我猜谷歌粉丝会说 Chrome Vox 很好。相信我，我在 AT 工作了将近 15 年。

无论如何，我需要查看按钮的代码，而不是 JS……JS 看起来不错。有些人不知道有一个新窗口，但是打印对话框应该抓住焦点而不是窗口

【讨论】：

适用于 Windows 的 NVDA、适用于 Linux 的 Orca、适用于 OS X 的 VoiceOver。您的回答 +1 :)
感谢您的 +1！ @chiccodoro，HTML 看起来不错。

【解决方案2】：

要通过使用屏幕阅读器来提高可访问性，请使用 W3C WAI-ARIA 实时区域，有关详细信息，请参阅 their recommendations 和 FAQ。

您可以使用以下屏幕阅读器进行测试：
在 Windows 上 - JAWS、NVDA
在 Linux 上 - orca（不使用 Chromium）+ Florian Margaine 的建议

您还可以使用 AChecker 来测试 WCAG 2.0 第 508 节 Stanca Act 无障碍标准的合规性。

【讨论】：

这是很好的信息，但与原始问题并不真正相关：WAI-ARIA 实时区域专门用于实时更新的页面区域，例如代码和新闻提要等。 OP 更关心基本的 javascript 是否适用于屏幕阅读器（简短回答：是的，但要测试确认）。
谢谢，大。虽然有些提示与我的问题没有直接关系，但有些是。顺便说一句：即使 ScreenReaders 可能支持它，我还是决定采用非 JavaScript 方式，因为还有其他原因可以让网站在没有 JavaScript 的情况下运行。

【解决方案3】：

最好的方法肯定是自己尝试一下。

有一个谷歌浏览器扩展允许你这样做：https://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn

【讨论】：

【解决方案4】：

呈现可打印页面的方法是使用@media CSS 指令。这样你就不需要做任何特别的事情，比如弹出另一个窗口或担心可访问性：内容只是正确打印（如果你想要的话，可能与屏幕上的布局有很大不同）。

【讨论】：

这不仅仅是一个易于打印的布局。我只想打印页面上的一小部分信息，而这只适用于那个按钮。如果用户选择文件->打印页面，则应该打印整个页面。