ARIA Roles and Attributes
Apply landmark roles, live regions, and aria-* attributes to enhance components where native HTML is insufficient.
ARIA Roles and Attributes is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is ARIA?
ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that describe the role, state, and properties of elements to assistive technologies. It's the bridge for custom widgets that aren't expressible with native HTML.
First Rule of ARIA: Don't Use ARIA
If a native element does what you need, use it. <button> beats <div role="button">. Misused ARIA is worse than no ARIA — it makes things sound accessible while leaving users stranded.
Categories of ARIA Attributes
Three categories: roles (what something is), properties (relatively static — aria-label, aria-describedby), states (dynamic — aria-expanded, aria-pressed, aria-checked).
Landmark Roles
Identify major page regions. Most have HTML5 equivalents and you should prefer those.
<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>aria-label and aria-labelledby
aria-label: provide an accessible name with a string. aria-labelledby: reference another element's text as the name. Use when visible text doesn't exist or is insufficient.
<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
<svg>...</svg>
</button>
<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
<h2 id="settings-title">Settings</h2>
...
</section>aria-describedby for Hints
aria-describedby links an element to a longer description. Useful for form hints, error messages, and tooltips.
<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>aria-expanded for Disclosure
Buttons that toggle a panel should expose aria-expanded = true/false.
<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
How do I cancel?
</button>
<div id="faq-1" hidden>
Visit Settings > Billing to cancel.
</div>aria-pressed for Toggle Buttons
Buttons with on/off state (mute, bold) use aria-pressed.
<button aria-pressed="true" onclick="toggleBold()">
Bold
</button>Live Regions: aria-live
Dynamically updated content (toasts, search results, error summaries) should be in a live region so screen readers announce changes. polite waits for a pause; assertive interrupts.
<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>
<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>role="alert" Shorthand
role="alert" is shorthand for an assertive live region with aria-atomic. Use sparingly — every alert interrupts the user.
aria-hidden for Decorative Content
aria-hidden="true" removes an element from the accessibility tree. Use on decorative icons next to text labels — otherwise screen readers announce them redundantly.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>Test With a Screen Reader
The only way to know if ARIA works is to test it. VoiceOver (macOS/iOS, free), NVDA (Windows, free), TalkBack (Android, free). 10 minutes with VoiceOver reveals more than any audit tool.
Quick Check
What ARIA attribute should you set on an icon-only button that has no visible text label?
Recap: ARIA
ARIA describes role, properties, and state to assistive tech. Prefer native HTML before reaching for ARIA. aria-label/aria-labelledby give accessible names. aria-describedby for hints. aria-expanded/aria-pressed for toggles. aria-live for dynamic announcements. aria-hidden for decorative content. Always test with a real screen reader.
Frequently asked questions
Is the “ARIA Roles and Attributes” lesson free?
Yes — the full text of “ARIA Roles and Attributes” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “ARIA Roles and Attributes”?
Apply landmark roles, live regions, and aria-* attributes to enhance components where native HTML is insufficient. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “ARIA Roles and Attributes” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- WCAG Levels A AA AAA
- Semantic HTML as the Foundation
- ARIA Roles and Attributes
- Keyboard Navigation and Focus Management