Menu
When a web page is loaded, screen readers (like the one that comes with OS X, or JAWS on Windows) will read the content of the whole page. But say your page is dynamic, and as users performing an action, new content gets added to the page. For the sake of simplicity, say you display a message somewhere in a <span>. How can you get the screen reader to read that new message?
939
They don't parse the HTML directly but an accessible tree view of a document. This means that if your browser understands javascript, your screenreader will. That because, your screen reader will not access the DOM directly on the load of the page, but will interact with the Accessibility API provided by your browser.
A screen reader uses a Text-To-Speech (TTS) engine to translate on-screen information into speech, which can be heard through earphones or speakers. A TTS may be a software application that comes bundled with the screen reader, or it may be a hardware device that plugs into the computer.
A screen reader will not know the purpose of the <div>. That's when role comes into play. If you designed your own link instead of using an <a> element, and your custom link was composed of <div> elements, that's when you'd have role="link" on your <div>. The purpose of the role isn't to force all the text to be read.
The WAI-ARIA specification defines several ways by which screen readers can "watch" a DOM element. The best supported method is the aria-live attribute. It has modes off, polite,assertive and rude. The higher the level of assertiveness, the more likely it is to interrupt what is currently being spoken by the screen reader.
The following has been tested with NVDA under Firefox 3 and Firefox 4.0b9:
<!DOCTYPE html> <html> <head> <script src="js/jquery-1.4.2.min.js"></script> </head> <body> <button onclick="$('#statusbar').html(new Date().toString())">Update</button> <div id="statusbar" aria-live="assertive"></div> </body> The same thing can be accomplished with WAI-ARIA roles role="status" and role="alert". I have had reports of incompatibility, but have not been able to reproduce them.
<div id="statusbar" role="status">...</div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
