屏幕阅读器和JavaScript打印功能
[英]Screen readers and JavaScript print feature
问题描述
I have written a JavaScript-based print feature for a web page. 
我为网页编写了一个基于JavaScript的打印功能。 It extracts HTML from a hidden div on the page, renders it into a new window and triggers the print dialog. 它从页面上的隐藏div中提取HTML，将其渲染到新窗口并触发打印对话框。
The option is made available over a button with an onclick="printTheThing()" event. 该选项通过带有onclick="printTheThing()"事件的button提供。 I know that for example screen readers have some caveats with JavaScript. 我知道，例如屏幕阅读器对JavaScript有一些警告。 I am wondering whether/how many people such as blind or vision-impaired I block from using this feature. 我想知道是否/有多少人，如失明或有视力障碍，我阻止使用此功能。
The implementation opens a new browser window and appends to its document: 该实现打开一个新的浏览器窗口并附加到其文档：
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();
}
Update: This is what the button looks like: 更新：这是按钮的样子：
<button type="button" onclick="printTheThing()">Print the thing!</button>
In addition, I am using CSS to replace the button by an image. 另外，我使用CSS来替换图像按钮。 I have tested the button with the Firefox plug-in "Fangs". 我已经使用Firefox插件“Fangs”测试了该按钮。 It suggests that screen-readers will perfectly read out the original button text. 它表明屏幕阅读器将完美地读出原始按钮文本。 But Fangs does not provide any interactivity so I cannot test the printing with it. 但是Fangs没有提供任何交互性，所以我不能用它测试打印。
4 个解决方案
解决方案1
4 2012-04-20 13:18:49
The Chrome extension shouldn't be relied on at all. 不应依赖Chrome扩展程序。 You should test stuff with NVDA, which is free. 您应该使用免费的NVDA测试内容。 I will guess that Google fanboys will say Chrome Vox is fine. 我猜猜谷歌的粉丝们会说Chrome Vox很好。 Trust me, I have been working with AT for nearly 15 years. 相信我，我已经与AT合作了将近15年。
Anyway, I would need to see the code for the button, not the JS... The JS looks fine. 无论如何，我需要看到按钮的代码，而不是JS ... JS看起来很好。 Some people have trouble with knowing there is a new window, however the print dialog should grab focus versus the window 有些人在知道有新窗口时遇到问题，但是打印对话框应该抓住焦点而不是窗口
解决方案2
1 2012-04-20 13:04:58
The best way is surely to try it out yourself. 最好的方法肯定是自己尝试一下。
There is a Google Chrome extension allowing you this: https://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn 有一个Google Chrome扩展程序允许您这样做： https ： //chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn
解决方案3
1 已采纳 2012-04-20 13:17:29
to improve accessibility by using screen readers use W3C WAI-ARIA live regions, for more info see their recommendations and FAQ . 使用屏幕阅读器改善可访问性使用W3C WAI-ARIA实时区域，有关更多信息，请参阅他们的建议和常见问题解答 。
to test you can use the following screen readers: 测试你可以使用以下屏幕阅读器：
on Windows - JAWS, NVDA 在Windows上 - JAWS，NVDA
on Linux - orca (is not working with Chromium) + advice of Florian Margaine 在Linux上 - orca（不与Chromium合作）+ Florian Margaine的建议
you can also use AChecker to test on compliance of WCAG 2.0, Section 508, Stanca Act accessibility standards. 您还可以使用AChecker测试WCAG 2.0，Section 508，Stanca Act可访问性标准的合规性。
解决方案4
1 2012-04-20 14:21:34
The way to render a printable page is to use @media CSS directives. 呈现可打印页面的方法是使用@media CSS指令。 That way you don't need to do anything special like pop-up another window or worry about accessibility: the content is simply printed correctly (and possibly very differently from the on-screen layout, if that's what you want). 这样你就不需要做任何特别的事情，如弹出另一个窗口或担心可访问性：内容只是正确打印（可能与屏幕上的布局非常不同，如果这是你想要的）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.