When to use HTML buttons vs. links for accessibility
TL:DR
The choice is always defined by what the element does, not how it looks.
You should use an HTML link <a>) when the element's primary function is to navigate the user to a new page or a different location on the current page. Conversely, you should use an HTML button (<button>) when the element's primary function is to perform an action or change the state of the current page, such as submitting a form, toggling a menu, or deleting an item.
When to use an <a> (link)
Use an <a> element (anchor) when the user expects to navigate to a different URL, page, or a section within the current page.
| Scenario | Semantic purpose | Correct HTML |
|---|---|---|
| Navigating to a new page | Takes the user to a different resource. | <a href="/checkout">Proceed to Checkout</a> |
| Downloading a file | Navigates the browser to the file's location to start the download. | <a href="/document.pdf" download>Download Report</a> |
| Navigating within the page | Moves the user to a different section on the current page (a jump link). | <a href="#contact-us">Go to Contact Form</a> |
Accessibility benefits of <a>
- Keyboard control: works natively with the
Enterkey. - Announcement: screen readers announce the element as "link", telling the user they are about to leave or move within the current context.
When to use a <button> (button)
Use a <button> element when the user is expected to perform an action or change the state of the current page, without causing a full page refresh or navigation.
| Scenario | Semantic purpose | Correct HTML |
|---|---|---|
| Navigating to a new page | Triggers the form to be sent to the server. | <button type="submit">Send Message</button> |
| Downloading a file | Shows/hides content (like expanding a menu, collapsing an accordion, or opening a modal). | <button aria-expanded="false">Show Filters</button> |
| Navigating within the page | Runs client-side script that modifies data (e.g., adding an item to a cart, deleting a row, liking a post). | <button onclick="addItem()">Add to Cart</button> |
Accessibility benefits of <button>
- Keyboard control: Works natively with both the
EnterandSpacebarkeys. - Announcement: Screen readers announce the element as "button", indicating that an immediate action will occur upon activation.
Common mistakes to avoid
The most frequent accessibility mistake is using the wrong element and trying to fix it with ARIA.
| Mistake | Why it’s wrong | The fix |
|---|---|---|
| Link acting as a button | <a href="#" onclick="deletePost()">Delete</a> | Screen reader announces "link," confusing the user who expects navigation but gets an action. |
| Button acting as a link | <button onclick="window.location.href='about.html'">About</button> | Screen reader announces "button," confusing the user who expects an action but gets navigation. Also, users often instinctively hit Enter on links, not the Spacebar needed for buttons. |
If you are still unsure, then the acid test is to ask yourself:
If disabling JavaScript still allows the element to complete its task (i.e., navigate to a new page), it should be a link. If the element relies on JavaScript to perform an action on the page, it should be a button.
Article by Simon Leadbetter
The Accessibility Guy at Kindera
