屏幕阅读器和 JavaScript 打印功能

Screen readers and JavaScript print feature

本文关键字：JavaScript 打印 功能 屏幕      更新时间：2023-09-26

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

该选项在具有onclick="printTheThing()"事件的button上可用。我知道例如屏幕阅读器对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将按钮替换为图像。我已经用火狐插件"尖牙"测试了按钮。它表明屏幕阅读器将完美地读出原始按钮文本。但是 Fangs 不提供任何交互性，所以我无法使用它测试打印。

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

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

要使用屏幕阅读器改进辅助功能，请使用 W3C WAI-ARIA 实时区域，有关详细信息，请参阅其建议和常见问题解答。

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

您还可以使用 AChecker 测试是否符合 WCAG 2.0、第 508 节、Stanca 法案可访问性标准。

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

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

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

相关文章：