Navigation
Accessible links: Examples and Testing
Published by whatisADA / Grow Wild Agency · Updated
What to build
Use a real anchor with a destination when the purpose is navigation. Write link text that identifies the destination or resource, and preserve normal browser behaviors such as opening in a new tab.
A practical example
A billing page links to “Download April invoice (PDF).” The destination and file type are understandable without a vague “click here,” and the user can copy the link normally.
How to check it
- Navigate and activate the link by keyboard, then use the browser's open-in-new-tab behavior.
- Read its accessible name and compare it with its visible label and destination.
- Check focus, color-independent identification and any advance information needed for a file or external workflow.
What can be missed
An anchor without href is not an ordinary navigational link. Do not use href="#" to imitate a button or make the user infer the destination from an unlabeled icon.
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.
<a href="/guides/pdf-accessibility">PDF accessibility guide</a>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.