HTML and XHTML, Script
This technique relates to Success Criterion 2.1.1: Keyboard (Advisory).
The objective of this technique is to demonstrate how to provide keyboard access to a user interface control that is implemented by actions to static HTML elements such as div or span. This technique ensures that the element is focusable by setting the tabindex attribute, and it ensures that the action can be triggered from the keyboard by providing an onkeyup or onkeypress handler in addition to an onclick handler.
When the tabindex attribute has the value 0, the element can be focused via the keyboard and is included in the tab order of the document. When the tabindex attribute has the value -1, the element cannot be tabbed to, but focus can be set programmatically, using element.focus().
Because static HTML elements do not have actions associated with them, it is not possible to provide a backup implementation or explanation in environments in which scripting is not available. This technique should only be used in environments in which client-side scripting can be relied upon.
Such user interface controls must still satisfy Success Criterion 4.1.2. Applying this technique without also providing role, name, and state information about the user interface control will results in Failure F59, Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML.
Resources are for information purposes only, no endorsement implied.
In a user agent that supports Scripting:
- Click on the control with the mouse
- Check that the scripting action executes properly
- Check that it is possible to navigate to and give focus to the control via the keyboard
- Set keyboard focus to the control
- Check that pressing ENTER or SPACE invokes the scripting action.
- All of the checks are true