Component - Button examples
Purpose: Ensure assistive tech understands the button's purpose.
<button type="button" aria-label="close">
This defines a button with image icon and that only aria-label is announced.
HTML Code
<button type="button" aria-label="Close">
<img src="close-button.png" >
</button>
Assistive technologies
NVDA - Screen Reader announcement
- Chrome browser: Close. Button.
- Firefox browser: Close. Button.
Why it's accessible:
- aria-label provides an accessible name.
- Button is still keyboard-accessible.
- If a button has both aria-label and child elements (like <img> with alt), the aria-label takes precedence as the accessible name.
- Use alt="" for decorative images inside a button with aria-label.
Purpose: Ensure assistive tech understands the button's purpose and its aria hidden value.
<button type="button" aria-hidden="true" tabindex="-1">
This defines a button with image icon with aria-hidden="true" and is skipped and not announced but the Screen Reader.
HTML Code
<button aria-hidden="true" tabindex="-1">
<img src="close-button.png" >
</button>
Assistive technologies
NVDA - Screen Reader announcement
- Chrome browser: Adding a tabindex="-1" will remove it from keyboard navigation and the Screen Reader will not announce it.
- Firefox browser: TBD
Why it's not accessible:
- aria-hidden="true" hides the decorative icon from screen readers.
- Button is not keyboard-accessible when a tabindex="-1" is set.
← Back to component list