How to test
Buttons & Links
Buttons do things; links go places. Test that each is the right element, carries a clear accessible name, and — for toggles — exposes its current state.
What to test
- Buttons are <button>; links are <a href>. Actions aren't links; navigation isn't a button.
- Every control's accessible name matches or contains its visible label.
- Icon-only controls have an accessible name (aria-label or visually-hidden text).
- Toggle buttons expose aria-pressed; disclosures expose aria-expanded.
- Link text makes sense out of context — no bare “click here” / “read more”.
- Targets are at least 24 × 24 CSS pixels.
How to test
- 1Tab to each control and listen: name + role should be announced (e.g. “Save, button”).
- 2Confirm the visible label is part of the accessible name (label-in-name).
- 3Activate toggles and confirm the state change is announced.
- 4List all links in a screen reader and check each is self-describing.
Common failures
- <div onclick> styled to look like a button.
- Icon button announced as just “button” with no name.
- aria-label that doesn't include the visible text.
- Toggle that only changes color, with no aria-pressed.