Buttons
Buttons are used to initiate an action (e.g., submit information) on a form.
Challenges disabled users face with buttons are:
- Understanding what the button is for
- Accessing the button directly with the keyboard
Example
Regular Button
Sample button selected
Application Buttons
(Press the Ctrl key to reveal any access keys)
Next button selected
Submit button selected
Cancel button selected
Edit button selected
-
Button text is descriptive
Text should plainly describe a button's purpose:
default.htm (excerpt)<button id="btnSample">Sample Button</button> <button id="btnSubmit" type="submit">Submit</button> <button id="btnCancel" type="reset">Cancel</button>When generic text or an image is used, provide a title attribute to explain the button's meaning:
default.htm (excerpt)<button … title="Previous Item (Alt + R)">Previous</button> <button … title="Next Item (Alt + N)">Next</button> <button … value="Edit" title="Edit John Smith's record (Alt + I)">Edit</button> -
Button provides keyboard access
For application buttons (e.g., Previous, Next, Submit, etc.) use the accesskey attribute to allow for quick keyboard access:
default.htm (excerpt)<button accesskey="r" …>Previous</button> <button accesskey="n" …>Next</button> <button accesskey="s" …>Submit</button> <button accesskey="c" …>Cancel</button> <button accesskey="i" …>Edit</button>NOTE: Verify accesskey does not conflict with the browser's menu bar (e.g., f = IE's File menu).
-
Button text is descriptive
Visual Inspection
- Look at the text on the button to ensure that it makes sense
- Ensure that the text fits appropriately on the button
Web Accessibility Toolbar
- Select Doc Info - Show Titles
- Verify titles are accurate for image buttons
-
Button provides keyboard access
Keyboard
- Tab to the button and press Enter or Space Bar
- If an access key is known through documentation, underline, pressing the Ctrl key, verify button is activated on its use
Visual Inspection
- See if there is an underline specifying the access key
- Press the Ctrl key, see if access keys are displayed
Web Accessibility Toolbar
- Select Structure - Access Keys
- Verify access keys are provided for application buttons
NOTE: access keys should ONLY be applied to application buttons.
-
Button text is descriptive
Dragon
- Voice the text on the button to select it
- Use the Button command to flag the button and select it by saying the flag number
JAWS
- Tab to the button and ensure the text is spoken
- For a generic (e.g., Edit) or image button, ensure the button's title attribute is spoken
MAGic
- Ensure button does not pixillate under magnification
-
Button provides keyboard access
JAWS
- Press Insert + F5 to display the associated access keys
- Press the access key combination to activate the button
MAGic
- Press CapsLock + F5 or Insert + F5 to display the associated access keys
- Press the access key combination to activate the button
NOTE: access keys should ONLY be applied to application buttons.