ARIA
ARIA stands for Accessible Rich Internet Applications.
It is a set of attributes and roles that can add accessibility information to web interfaces when native HTML alone does not communicate enough meaning to assistive technologies.
What It Does
ARIA can communicate information such as:
- What an element is
- What it is called
- Whether it is expanded or collapsed
- Whether it is selected
- Whether it is disabled
- How parts of an interface relate to one another
This information can help a screen reader understand custom or dynamic controls.
How It Works
ARIA adds roles, states, and properties to elements in the page.
For example, ARIA may help provide an accessible name for an icon-only control or communicate the current state of a custom interface.
ARIA does not automatically make an element behave correctly. Adding a button role to a generic element does not automatically give it the keyboard behaviour of a real HTML button.
That is why semantic HTML should generally be preferred when an appropriate native element already exists.
Why It Matters
Modern web applications often contain interactions that need more accessibility information than their visual design alone provides.
Used correctly, ARIA helps assistive technologies interpret those interfaces.
Used incorrectly, it can make an otherwise understandable interface more confusing.
Common Problems
Common ARIA issues include:
- Using ARIA when native HTML would work
- Assigning incorrect roles
- Missing accessible names
- Failing to update dynamic states
- Adding labels that conflict with visible text
- Creating custom controls without keyboard navigation
How to Improve
Start with semantic HTML.
Add ARIA only when additional accessibility semantics are actually needed, and test the resulting interaction with both keyboard navigation and relevant assistive technology such as a screen reader.