Required
All screens MUST be navigable via the keyboard. Tab and Shift+Tab are the primary navigation keys for moving between links on web pages; Up | Down arrow keys to navigate comboboxes and radio buttons; Spacebar to select and deselect checkboxes; and Spacebar/Enter for actioning links and other elements. Treeviews and Tabbed Interfaces also have special requirements.
Many people are keyboard only users. People who use Screen Readers use their keyboard exclusively and never use their mouse. People with mobility impairments also use the keyboard and may not be able to use a mouse at all. So it is very important that we make sure all pages are accessible through the keyboard without the use of the mouse. It is easy to test. Just hide your mouse behind your monitor and try to access your page without it.
It is important that we make sure all links are actionable from the keyboard. Links made with onClick rather then using an HTML Anchor tag are not accessible. Treeviews and Tabbed interfaces should make use of the latest techniques for standardizing key across all our web properties.
Many people who use Screen Readers use their keyboard exclusively and never use their mouse. Consequently, when using JavaScript commands like OnMouse, ondblclick, onClick, etc. you must also include an OnKeyPress event.
Additional Information:
1. Some event handlers, when invoked, produce purely decorative effects such as highlighting an image or changing the color of an element's text. Other event handlers produce much more substantial effects, such as carrying out a calculation, providing important information to the user, or submitting a form. For event handlers that do more than just change the presentation of an element, content developers should do the following
2. Use application-level event triggers rather than user interaction-level triggers. In HTML 4.01, application-level event attributes are "onfocus", "onblur" (the opposite of "onfocus"), and "onselect". Note that these attributes are designed to be device-independent, but are implemented as keyboard specific events in current browsers.
3. Otherwise, if you must use device-dependent attributes, provide redundant input mechanisms (i.e., specify two handlers for the same element):
4. Note that there is no keyboard equivalent to double-clicking ("ondblclick") in HTML 4.01.
5. Do not write event handlers that rely on mouse coordinates since this prevents device-independent input.
6. Use noscript to Provide for Those Who Can't Use Javascript
<form action="foo">
<input type="button" value="Previous Reports"
onclick="window.location='http://www.zeldman.com/daily/0103c.shtml.';"
onkeypress="window.location='http://www.zeldman.com/daily/0103c.shtml.';"
/>
<noscript>
<p>
<a href="/daily/0103c.shtml">Previous Reports</a>
</p>
</noscript>
7. Folks who have impaired mobility can and do use JavaScript-capable browsers, but might be unable to click or perform other mouse maneuvers.
Provide alternate code for these users:
<input type="button"
onclick="setActivityStyleSheet('default');return false;"
onkeypress="setActivityStyleSheet('defualt');return false;"
/>
Use the tab key to move from one link/form field to the next. IE will highlight the current object with a box. Make sure you can tab to and action each link and or form field.
Look out for drop down select boxes with out a go button
If the drop down uses an onChange coupled with a URL redirect (call to windows.location in Javascript), it will create accessibilty problems. The user will not be able to enter the drop down past the first option.
TBD