Buttons vs links
Buttons and links are not the same.
This button looks like a button.
<button>
Continue
</button>This button looks like a link:
<button class="inline">
Continue
</button>Fully disabled button
A button that uses the disabled attribute will not be focusable, but it is still discoverable by the screen reader while browsing.
<button disabled>
Continue
</button>Focusable disabled button
When a button isn’t ready to submit a form yet, but can still be clicked, use aria-disabled="true" to increase perceivability for people using a screen reader. Ex: Clicks submit and is notified of errors in the form.
<button aria-disabled="true">
Continue
</button>Avoid icon buttons
Buttons with no visible text (icon only) are inadvisable.
Use your words
You can think of words like a group of symbols that mean things.
Annotations for buttons
If it does something, it’s a <button>
- Buttons cause an action to occur on the same page
- Submit a form (even when submission takes you to a new page)
- Open a menu
- Launch a modal
- Expand details
- A button can look like a link, but it must be coded as a
<button>
If it goes somewhere, it’s <a> link.
- Links take the browser to a different location
- (Either another page or even another area of the same page)
- A link can look like a big shiny button but it must be coded as
<a>link
Repeating buttons
Sometimes a design will call for multiple buttons with the same text label. In a case like this, aria-label can be used to name each control’s purpose.
<h1>Payment details</h1>
<span>1 Jan, 2024</span>
<button aria-label="Edit payment date">
Edit
</div>
<span>$200.00</span>
<button aria-label="Edit payment amount">
Edit
</div>Design notes
- Contrast requirement misconception
- There is no requirement that button boundary must contrast 3:1 against adjacent elements.
- Provided that the internal text or icon naming the button have sufficient contrast, this passes 1.4.11 AA.
- Only if color is the only way to identify the control must it contrast 3:1 against adjacent elements.