Native HTML elements have built-in keyboard accessibility, roles, and states.
If you choose to use ARIA instead or in addition, you are responsible for mimicking the equivalent browser behavior in script. If you are not a developer, you will need one to implement ARIA.
ARIA tags can greatly enhance accessibility, usability, and navigability for screen reader and screen magnification users. Developers can use it to incorporate accessibility into both new and legacy pages.
ARIA supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is no other mechanism.
Dos and Don'ts
Use Native HTML When Possible
HTML, when implemented correctly, conveys the semantic meaning of the content to people using assistive technology (such as screen readers) without any additional effort because it is already mapped to the accessibility APIs.
Use HTML elements.
Don't use ARIA when an HTML element is available.
Don't change native semantics unless it is essential.
Make ARIA Controls Usable With a Keyboard
ARIA overrides certain HTML attributes and functions. It also provides custom control semantics, but the control won't work as expected with a keyboard.
Don't use role="presentation" or aria-hidden="true" on a focusable element.
The ARIA-hidden attribute is intended to hide the content or element from the accessibility APIs and the element that has ARIA-hidden set to true is not supposed to be interactive in any way. Defining either of these attributes on the visible focusable elements results in some users focusing on nothing.
Include Accessible Names With Interactive Elements
Interactive elements such as but not limited to the following must have accessible names:
- Text fields
- Combo boxes
- Radio buttons
Without an accessible name, assistive technologies do not understand what the control does.
Do use varying techniques to provide accessible names, which vary from control to control.
|HTML links and buttons||The link text or button value becomes the accessible name.|
|Input text fields||Associate a form control with its visible label either implicitly or explicitly.|
|Custom widgets||Use ARIA-label or ARIA-labelledby.|
Don't include an interactive element with a visible label but no accessible name.