Loading...
Loading content...
Loading content...
Comprehensive guide to creating accessible buttons and links with proper semantics, labels, states, and keyboard support.
Screen readers announce "Link" vs "Button". Users expect Links to take them somewhere (navigation) and Buttons to do something (action). Using the wrong one breaks this mental model.
Links have features buttons don't (open in new tab, bookmark). Buttons have features links don't (activation with Space key). Mixing them up robs users of these native behaviors.
<button> element for actions that don't navigate (submit, toggle, etc.). Use <a> for navigation. Buttons should have clear, descriptive text. If a button only has an icon, provide an aria-label. The type attribute is important: type="button" for general actions, type="submit" for form submission, type="reset" for form reset.Testing Guide
aria-label or aria-labelledby. The label should describe the action, not just say 'button'. For toggle buttons, use aria-pressed to indicate state. If the button has both icon and text, the text is usually sufficient, but ensure the icon is decorative (aria-hidden="true") or meaningful.Testing Guide
disabled attribute (not just styling) for disabled buttons. For loading states, use aria-busy="true" and provide text or aria-label indicating loading. Toggle buttons should use aria-pressed. Expanded/collapsed states use aria-expanded.Testing Guide
<a> for navigation (changing URL, going to another page). Use <button> for actions (submitting forms, toggling, opening dialogs). If it changes the URL, it's a link. If it performs an action on the current page, it's a button. Never use a link styled as a button for actions - this breaks expectations and accessibility.Testing Guide
Using an anchor tag for an action prevents keyboard users from using the Space key to activate it.
Enter key triggers navigation (refresh), Space key scrolls. Semantically incorrect.
<a href="#" onClick={save}>
Save
</a>Button handles Space/Enter activation correctly and doesn't affect URL.
<button onClick={save}>
Save
</button>"Click Here" or "Read More" provides zero context to screen reader users scanning a list of links.
Screen reader user hears: 'Link, Read More'. Read more about what?
<a href="/article">
Read More
</a>Descriptive text explains exactly where the link goes.
<a href="/article">
Read more about WCAG 2.2
</a>