HTML · The document layer
What are the basics of ARIA and when should you use it?
Short answer
ARIA adds roles, states and properties to the accessibility tree for cases where native HTML cannot express something. Prefer native elements first, and never change a native role without a good reason.
ARIA stands for Accessible Rich Internet Applications. It does not change appearance or behaviour; it changes what assistive technology is told. If the native element already says the right thing, ARIA is unnecessary.
The first rule of ARIA is to use native HTML when it exists. A button element already has a role, keyboard activation and focus behaviour. A div with role=button has only a role unless you add all the rest.
<button aria-expanded="false" aria-controls="filters">
Filters
</button>
<div id="filters" hidden>
<label for="min">Minimum price</label>
<input id="min" type="number" />
</div>The main pieces
- Roles describe what an element is, such as navigation or dialog
- States describe a changing condition, such as aria-expanded or aria-checked
- Properties describe relationships or names, such as aria-label or aria-controls
- Only use ARIA when native semantics cannot express the pattern
- Keep ARIA values in sync with the visible and interactive state
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the first rule of ARIA?
- 2What is the difference between a role and a state?
- 3Can ARIA make a div behave like a button?
- 4Why must ARIA state stay in sync with the UI?
Say it in the interview
ARIA adds roles, states and properties to the accessibility tree for patterns native HTML cannot express. My first move is always to use a native element, because it comes with semantics and behaviour. If I add ARIA, I keep it accurate and in sync with the UI, and I test with a keyboard and screen reader. Bad ARIA is worse than no ARIA because it gives users incorrect information.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.