Lesson 9 of 55 · HTML
Accessibility – ARIA Roles and Labels
Duration: 10 min
Making HTML Accessible
ARIA (Accessible Rich Internet Applications) adds semantics to custom widgets when native elements fall short.
<div role='navigation' aria-label='Main navigation'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
Core ARIA attributes
role– Defines the widget type (navigation,button,dialog,alert).aria-label– Provides an accessible name when visible text isn’t sufficient.aria-describedby,aria-controls,aria-expanded– Communicate relationships and state for dynamic components.
When to use ARIA
- Prefer native HTML elements (
<button>,<nav>,<dialog>) because they are automatically accessible. - Use ARIA only when building custom widgets that need additional semantic information.
Practical example – Custom toggle button
<button id='menuToggle' aria-expanded='false' aria-controls='mainMenu'>Menu</button>
<nav id='mainMenu' hidden>
…
</nav>
<script>
const btn = document.getElementById('menuToggle');
const menu = document.getElementById('mainMenu');
btn.addEventListener('click', () => {
const open = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', !open);
menu.hidden = open;
});
</script>
Tip: Validate ARIA usage with tools like axe, WAVE, or the built‑in Chrome DevTools Accessibility panel to catch common mistakes.
Quick checklist for ARIA
- Native element exists for the UI pattern? ✅
- ARIA role added only when needed? ✅
- Accessible name provided (
aria-labelor visible text)? ✅ - State attributes (
aria-expanded,aria-pressed) kept in sync with UI? ✅ - Tested with an accessibility validator? ✅
If any answer is “no”, refactor your markup now.