Screen readers and JavaScript print feature

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

Question

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.

Was it helpful?

Solution

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.

OTHER TIPS

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).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top