JavaScript and Screen Readers

The following is republished from the Tech Times #163.

Try to use one of the poster-child Ajax web applications like GMail with a screen reader and you’ll never want to touch a screen reader again. To support those users who don’t have that luxury, then, do you have to do without JavaScript?

The answer to this question ultimately depends on the sort of web application you need to build. Of course, if you’re developing something as silly as a web-based version of Photoshop, you can probably rule out screen reader support at the outset.

Most web applications, however, will fall into a gray area where it’s possible to support screen readers—even without sacrificing any of the JavaScripty goodness you want to deliver to the rest of your user base. The question then becomes, is it practical?

A Practical Example

Setting aside the likes of GMail for the moment, let’s look again at the accordion control that’s built as an example in my upcoming book.

JavaScript and Screen Readers

A couple of issues back, we modified this example to make it accessible to keyboard users. All we had to do was include a hyperlink in the heading of each section of the accordion so that it would be keyboard-focusable. As we’ll see, making this construct accessible to screen reader users is equally straightforward—it’s doing both at once that’s a little tricky!

To refresh your memory, here’s what the HTML code for this page looks like:

<ul class="accordion">   <li id="archer">     <h2><a href="#archer">Jonathan Archer</a></h2>     <p>Vessel registry: NX-01</p>     <p>Assumed command: 2151</p>     ...   </li>   ... </ul>

If that’s all there were to this page, it would be perfectly accessible to screen readers. We only get into trouble when our JavaScript code hides portions of the page content by dynamically setting a class of "collapsed" on the list items that make up the accordion. This class hides all but the heading inside the list item:

li.collapsed * {   display: none; } li.collapsed h2, li.collapsed h2 a:link, li.collapsed h2 a:visited {   display: block; }

The problem here is that using display: none to hide an element from view also hides the element from screen readers, and screen reader users are unable to read that portion of the page.

Of course, this might not be an issue if revealing the elements by switching off the "collapsed" property also revealed those elements to screen reader users. Were that the case, screen reader users could use the accordion just as other users do: by “clicking” a header in the accordion to reveal its contents.

As it turns out, however, this is not always the case. Most screen readers work with a static copy of the page’s visible contents—a copy that is infrequently and unpredictably updated (despite early signs from some vendors that this may be changing). And even in screen readers that do refresh their copy of the page contents in response to the user clicking a link, making the user aware that the content has been revealed is problematic at best.

No, your best bet in this case is to hide the contents of the collapsed accordion in such a way that screen reader users are still able to read them. The most useful technique to do this is called offleft positioning, and the CSS code looks like this:

li.collapsed * {   position: absolute;   left: -9999px; }  li.collapsed h2, li.collapsed h2 a:link, li.collapsed h2 a:visited {   position: static; }

In essence, this technique hides elements of the page by positioning them off the left of the page (9999 pixels off the left of the page, to be precise), where they will still be visible to screen readers.

So now screen reader users can read the entire content of the page without any interference from our JavaScript-driven accordion effects! Problem solved, right?

Well, not quite. You see, offleft positioning not only reveals the hidden elements to screen readers—it makes them available to keyboard users as well! In this case, when a keyboard user taps the Tab key to step through the focusable elements in the page, the focus will also step through any hyperlinks in our hidden content. Since these elements are invisible, the keyboard focus will seem to disappear, leading to angry phone calls.

Since there’s no reliable way to hide elements from keyboard users without also hiding them from screen reader users, we need to take a different approach. How about we do something useful when keyboard focus is given to a hidden element … like expanding the relevant section of the accordion!

We can add to every focusable element within the accordion (except, of course, the links in the always-visible headers) a focus event listener:

var folds = accordion.getElementsByTagName("li"); for (var i = 0; i < folds.length; i++) {   var foldLinks = folds[i].getElementsByTagName("a");   var foldTitleLink = foldLinks[0];   addEvent(foldTitleLink, "click", Accordion.clickListener);    for (var j = 1; j < foldLinks.length; j++)   {     addEvent(foldLinks[j], "focus", Accordion.focusListener);   }  }

When triggered, that focusListener function will expand the section of the accordion that contains it:

focusListener: function(event) {   var element = this;   while (element.parentNode)   {     if (element.parentNode.className == "accordion")     {       Accordion.expand(element);       return;     }     element = element.parentNode;   } }

And there you have it—an accordion control that is accessible to both keyboard and screen reader users!

More Complex Cases

As you might expect, not all JavaScript enhancements can be adapted to avoid interference with screen readers and keyboard navigation. Sometimes, the best you can do is make it easier for these users to disable the stuff that won’t work for them.

In a recent blog post, for example, Jeremy Keith applauds Dan Champion‘s new social book review site, Revish, which offers users the option of disabling the Ajax features of the site that won’t work with screen readers when they sign up for an account. This solution is nice and slick, allows the user to feel in control, and is extremely easy to implement, too!


Category: javascript Time: 2007-04-30 Views: 1

Related post

  • JavaScript generated code and screen readers 2016-01-15

    I'm asking you to help me out, I'm totally stuck with this problem. I want to make possible my code to be navigated through keyboard and adoptable to screen reader devices. But I have several issues. This is my code in JS: function changeText() { doc

  • Help tooltips and screen-readers 2015-01-14

    I have an input form that contains help tooltips for many of the field labels (usually more meaningful than the example). – Wireframes created with Balsamiq Mockups What's the appropriate/standard way to make these tooltips screenreader accessible? I

  • Bootstrap 2.3.2 modal and screen readers 2016-01-22

    I am working on a site that uses Bootstrap 2.3.2 and it appears that the Bootstrap modal dialogs are pretty much invisible to screen readers. Is there anything that I can do to make the screen reader see the contents of my bootstrap 2.3.2 modal ? Tha

  • What is the best way to protect my computer from virus and screen readers? 2009-07-15

    I'm an avid Internet poker player. What is the best way to make sure that I don't have viruses and programs that can read my screen on my computer? --------------Solutions------------- 1) Run as normal user I'd add more, but there really isn't any ne

  • Is there an email client optimized for screen readers and accessiblity? 2010-04-16

    I'm currently working on a project to help visually impaired people. We're planning to use Orca screen reader for gnome. Everything is doing great but there is a problem with email web clients the most popular ones(gmail, yahoo, hotmail) are not opti

  • Will i18next affect SEO? What about screen readers? 2014-04-11

    I'm considering using i18next for translating text. But then it suddenly struck me; If labels / text is retrieved through javascript, won't that affect SEO? And what about screen readers for visual impaired users? --------------Solutions-------------

  • What accessiblity software (screen readers) is for windows? 2009-10-22

    What accessiblity software (screen readers) is for windows that's cheap? --------------Solutions------------- See wikipedia for Comparison of screen readers. It contains a long list of contemporary screen readers with their supported platforms and th

  • 10 Nice (Assorted) JavaScript and jQuery Plugins 2012-02-07

    Just a collection of assorted JavaScript and jQuery plugins you might find useful in developing your website. Have fun! Related Posts: 2,000+ jQuery Plugins Directory 1. Fast and Simple Toggle View Content with jQuery This script is using the UL list

  • Need alt text for images in pdf for screen readers 2012-10-03

    I need the generated PDF to have "alt" text associated with each image so that a screen reader can read the alt text to the visually impaired user. I understand that essentially just including the "alt" text as the caption, or as part

  • JavaScript and HTML5 Gaming: From Angry Birds to ZX Spectrum 2012-10-04

    There's been a bit of an explosion in the HTML5/JavaScript gaming sphere of late. Browser games have seen a surge in popularity, and developers are beginning to find a suite of handy APIs and other tools at their disposal. Rob Hawkes is keen to sing

  • lock browser to troubleshoot javascript and css 2013-09-14

    Let's say I created some tooltip which displays a popup when the cursor is placed over a given part of the page, and removes it when I move the mouse. For an example, see and try to put your mouse over the popup. I now wish

  • Percentage of screen readers users in USA? 2014-05-15

    "Percentage of screen readers users in USA" : Is there a place where I can find such statistics ? A more global statistic that would still be good too. I came across this page but I could not find the more "global" numbers I was lookin

  • Gratis antivirus software (accessible by screen readers) without pop-up ads 2014-05-27

    I'm helping a friend installing and setting up Windows 7. As I have no experience with Windows, I wonder which antivirus software (real-time protection) I should install. It must be gratis. It needs to be compatible with screen readers. While I expec

  • Can/Should I Label an informational span for screen readers? 2014-06-11

    I have an informational span, specifically, a span full of stars that represent a rating (star icons that can be filled or unfilled). As is, it shouldn't be visible at all to a screen reader, since there is no text to read, but the information is imp

  • What is the most usable navigation mark up for screen readers? 2014-06-15

    When we mark up navigation data for a website we have several options available, including using html lists, html5 nav tags or just plain divs and spans. We also have various options at the attribute level such as aria and microdata. If we were creat

  • How to set up php,javascript and css to allow for our finished product to be displayed within a page? 2014-07-16

    hey wordpress experts, We have coded a table using php, javascript and css which pulls up information from a text file and displays it in the browser. We have everything working as desired when we set up our files on a local server. However, we are t

  • Do screen readers have built in "back to top" functionality? 2014-07-31

    So on my web application I have a floating button for back to top that's visible to users after they scroll down the page from the top. I was thinking whether I should consider attempting crafting the html in such a way that a screen reader would be

  • Assistive Technology: That Means Screen Readers, Right? 2014-09-26

    If you're a web developer/designer you probably come across the the acronym 'AT' or Assistive Technologies in your work. It's tempting to think of 'AT' as just another name from screen readers – but this isn't necessarily the case. In fact, Assistive

  • Resources for JavaScript and DOM Compatibility Tables 2014-11-24

    One of the best info-apps to come about in recent years is the well-known and super-practical Can I Use by Alexis Deveria. Although Can I Use is great for many cutting-edge features, there's still a lot of JavaScript and DOM stuff that's not included

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 1.525 (s). 13 q(s)