3

我为网页编写了一个基于 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 不提供任何交互性，所以我无法用它测试打印。

4

4 回答 4

4

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

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

于 2012-04-20T13:18:49.887 回答
1

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

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

于 2012-04-20T13:04:58.453 回答
1

要通过使用屏幕阅读器来提高可访问性，请使用 W3C WAI-ARIA 实时区域，有关更多信息，请参阅他们的建议和常见问题解答。

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

您还可以使用AChecker测试 WCAG 2.0 第 508 节 Stanca Act 可访问性标准的合规性。

于 2012-04-20T13:17:29.690 回答
1

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

于 2012-04-20T14:21:34.223 回答