JavaScript and Screen Readers

A discussion on the UIUC Webmasters listserv talking about copyediting style linked to a completely unrelated article entitled Javascript and screen readers which I found to be much more interesting than the style discussion (although the style discussion was interesting, too).  The article traced some accessibility design principles back to the limitations of two popular screenreader programs (Jaws and Window Eyes).  It specifically is in the context of AJAX-enhanced pages and, I believe, serves as a foundation for future articles that will get more specific.

Summary of lessons learned:

  • "Earlier versions of screen readers would sometimes show the user a page that was out of date, because the page would change, but the virtual buffer wouldn’t get updated. Fortunately, this problem seems to have been resolved in more recent versions, and the virtual buffer is refreshed from the DOM every few seconds."
  • "For some reason, both Jaws and Window Eyes will not tell the user that an item is clickable if the click event was registered via the advanced registration model." (e.g. element.addEventListener(...); or element.attachEvent(...);). "Fortunately, there is a simple hack which will force Jaws and Window Eyes to recognize that a given element is clickable when you use the advanced registration model. Simply register an empty click event using the traditional model (onclick="" or element.onclick = "")."
  • dblclick, mousedown, mouseup are all off the table.
  • "In Jaws, there are two primary ways to navigate a web page. The first is by reading everything from top to bottom, and the second is by tabbing through all the focusable elements (links and form controls). Confusingly, this results in the user having two cursors, a reading cursor and a mouse cursor."  In Jaws, reading from top to bottom does not trigger focus and blur, though these events are triggered if Enter is pressed.  In Window Eyes, the mouse cursor does follow the reading cursor from link to link while in reading mode.
  • select, keyup, keydown, and keypress work only in forms mode.

And I thought browser (IE, Firefox,  Opera, etc.) quirks were bad enough!  :-)

Post new comment

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You may post PHP code. You should include <?php ?> tags.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options