Controls
Accessible buttons: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
Use a native button for an action performed on the current page, such as saving a draft or opening a dialog. Its visible name should describe the action, and its type should avoid accidental form submission.
A practical example
An invoice card includes “Email invoice.” Make it a button, preserve focus while the action runs and announce the actual result. A failed request must not produce the same success message as an accepted one.
Try the example
Use Tab and your keyboard controls, then compare the behavior with the checks below. This is an isolated learning example; test the complete pattern in your own product and assistive technology setup.
How to check it
- Reach the button with Tab and activate it with both Enter and Space.
- Check the computed name, disabled/loading states and visible focus in each theme.
- Confirm that the action occurs once and that success and failure both leave a usable next step.
What can be missed
A clickable div needs behavior that a native button already supplies. Do not combine an action button with nested links or other interactive children.
Markup and state contract
This concise markup illustrates names, relationships or state. Custom controls also need the keyboard interaction and state updates described in the checks and primary source; this snippet is not a complete component.
<button type="button">Email invoice</button>Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.