Using Shared Libraries
Trigger events “onFocus” as well as “onHover”, to keypress events as well as mouseclick events, and to focus exiting and entering as well as hover entering and exiting. The former only pays attention to when the mouse is hovering over an element; the latter also recognizes keyboard focus, and allows keyboard navigation of your site. It is a very low effort way of making a huge improvement.
Fake page elements (e.g. buttons, links)
<span style="background-color: #ddd; border: medium outset white;"
onkeydown="if(event.keyCode==13 || event.keyCode==32) alert('You activated me with the keyboard');"
onclick="alert('You clicked me with the mouse');" >Push Me</span>
Without the WAI-ARIA attribute role=”button” and the HTML attribute tabindex=”0″, this button won’t be accessible to screen reader or keyboard users. role=”button” tells the browser to treat this span as if it were a button; tabindex=”0″ makes sure that it’s accessible via the keyboard (since under normal circumstances, a plain span would not be).
This video shows how difficult navigation becomes when the website relies on fake page elements without using the correct WAI-ARIA roles.
Capturing focus into a search box on page load when there are other things someone with the keyboard might be doing, so any keyboard commands are instantly captured into the search box, ESPECIALLY if you don’t let the search box give it the focus. Similarly, capturing all keystrokes for your own keyboard built-ins, without any way to turn that off, so keyboard usage is impossible. (Rememberthemilk is an example of this — the site is actually completely unusable without a mouse, because there is no way to turn off the capture of all useful keystrokes.)
Dynamically updating pages
Use WAI-ARIA to tell screen reader users when the page is updating: Dynamic webpages often update sections of the page based on user events. It’s important to let users of screen readers, whose text-to speech engine might be reading them a section of the page far from automated update, know that the page has changed. There are WAI-ARIA roles to indicate the importance of a changed section, ranging from an urgent alert (e.g. “you typed your password wrong”) to an unimportant update (e.g. the clock changed on the top of the page). Section 4.7 has more details.</p>
- How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6
- Our brief introduction to WAI-ARIA
- Accessibility of Rich Internet Applications
- Introduction to WAI ARIA
Despite the problems Flash can introduce for screen reader users, there are techniques to make Flash content and navigation more accessible, such as text equivalents and keyboard accessibility. See WebAIM’s Creating Accessible Flash Content
Note: Because Flash is not supported on many mobile devices, the use of Flash should be limited to those circumstances where there is no alternative.