What ARIA means
ARIA can label icons or explain the state of a menu, but native HTML elements are usually better. A common rule is to use ARIA only when plain HTML cannot do the job, because incorrect ARIA can make things worse.
Why it matters for your website
Custom menus, tabs and pop-ups often look fine but tell a screen reader nothing about what they are or whether they are open. Correct ARIA fills that gap so all customers can use your interface. Used wrongly, though, ARIA can make a page harder to use than having no ARIA at all.
Example
A clinic's mobile menu button uses aria-expanded to tell screen reader users whether the menu is open or closed, and aria-label to name the button 'Main menu'.
Tips
- Use native HTML elements like button and nav first, and add ARIA only when needed.
- Test custom components with an actual screen reader, not just a code checker.
- Make sure ARIA states update when a component opens, closes or changes.
Common mistakes
- Adding ARIA roles to elements that already have the correct built-in meaning.
- Setting aria-hidden on content that keyboard users can still focus.
Questions about ARIA
What is ARIA?
Accessible Rich Internet Applications: HTML attributes that describe custom elements to assistive technology.
What is the first rule of ARIA?
The W3C guidance says that if a native HTML element already does what you need, use it instead of adding ARIA. Native elements come with built-in keyboard and screen reader support.
Does ARIA make my website accessible?
Not on its own. ARIA only describes elements to assistive technology. You still need keyboard support, good contrast, labels and the rest of WCAG.
