屏幕阅读器和JavaScript打印功能

3
我为网页编写了基于JavaScript的打印功能。它从页面上一个隐藏的div中提取HTML,将其呈现到一个新窗口中并触发打印对话框。
用户可以通过一个带有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不提供任何交互功能,因此我无法用它来测试打印效果。


1
不妨自己试试?https://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn - Florian Margaine
将以下程序相关内容从英语翻译为中文。请仅返回翻译后的文本作为答案。 - chiccodoro
4个回答

4
Chrome扩展程序不应完全依赖。你应该使用免费的NVDA进行测试。我猜谷歌粉丝们会说Chrome Vox很好用。相信我,我已经从事辅助技术工作将近15年了。
无论如何,我需要看到按钮的代码,而不是JS... JS看起来不错。有些人可能会不知道有一个新窗口,但打印对话框应该抓住焦点,而不是窗口。

NVDA适用于Windows,Orca适用于Linux,VoiceOver适用于OS X。并且+1给你的答案 :) - FelipeAls
感谢点赞!@chiccodoro,HTML看起来很好。 - Ryan B

1

1
为了提高屏幕阅读器的可访问性,可以使用W3C WAI-ARIA实时区域。更多信息请参见他们的建议常见问题解答
要进行测试,可以使用以下屏幕阅读器:
在Windows上 - JAWS、NVDA
在Linux上 - orca(与Chromium不兼容)+ Florian Margaine的建议
您还可以使用AChecker来测试WCAG 2.0、508节和Stanca Act辅助功能标准的合规性。

这是很好的信息,但与原始问题并不相关:WAI-ARIA实时区域专门用于页面上实时更新的区域,例如跑马灯和新闻提要之类的。OP更关心基本JavaScript是否能够与屏幕阅读器配合使用(简短回答:是的,但需要测试以确认)。 - BrendanMcK
谢谢,dae。虽然有些提示与我的问题无直接关系,但有些确实有用。顺便说一句:尽管可能被屏幕阅读器支持,但我决定采用非JavaScript的方式,因为还有其他原因需要让网站在没有JavaScript的情况下运行。 - chiccodoro

1
渲染可打印页面的方法是使用@media CSS指令。这样,您无需执行任何特殊操作,如弹出另一个窗口或担心可访问性:内容会被正确地打印(如果需要,可能与屏幕布局非常不同)。

1
这并不仅仅是关于打印友好的布局。我只想打印页面上的一小部分信息,而且这仅适用于该按钮。如果用户选择文件->打印页面,则应打印整个页面。 - chiccodoro

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接