Screen readers and JavaScript print feature

StackOverflow https://stackoverflow.com/questions/10246641

문제

I have written a JavaScript-based print feature for a web page. It extracts HTML from a hidden div on the page, renders it into a new window and triggers the print dialog.

The option is made available over a button with an onclick="printTheThing()" event. I know that for example screen readers have some caveats with 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. I have tested the button with the Firefox plug-in "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.

도움이 되었습니까?

해결책

to improve accessibility by using screen readers use W3C WAI-ARIA live regions, for more info see their recommendations and FAQ.

to test you can use the following screen readers:
on Windows - JAWS, NVDA
on Linux - orca (is not working with Chromium) + advice of Florian Margaine

you can also use AChecker to test on compliance of WCAG 2.0, Section 508, Stanca Act accessibility standards.

다른 팁

The Chrome extension shouldn't be relied on at all. You should test stuff with NVDA, which is free. I will guess that Google fanboys will say Chrome Vox is fine. Trust me, I have been working with AT for nearly 15 years.

Anyway, I would need to see the code for the button, not the JS... The JS looks fine. Some people have trouble with knowing there is a new window, however the print dialog should grab focus versus the window

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

The way to render a printable page is to use @media CSS directives. 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 ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top