ARIA and Accessibility: label role aria-*
Associate labels with controls, apply ARIA roles where needed, and use aria-label and aria-describedby for screen reader support.
ARIA and Accessibility: label role aria-* is a free Frontend Academy lesson on CoddyKit — lesson 2 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.
Why ARIA?
ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that communicate the purpose, state, and properties of UI components to assistive technologies like screen readers — especially for custom widgets that have no native HTML equivalent.
The First Rule of ARIA
Don't use ARIA if a native HTML element or attribute can do the job. <button> is always better than <div role="button">. Native HTML is free accessibility.
Landmark Roles
ARIA landmark roles let screen reader users jump to sections of the page. Most are implied by semantic HTML: <main> → role=main, <nav> → role=navigation. Add explicit roles only when a semantic element isn't used.
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
aria-label provides an invisible accessible name for an element. Use it when there's no visible text label to reference. Common for icon buttons.
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
aria-labelledby points to another element's text as the label, using an ID reference. Preferred over aria-label when a visible label already exists.
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
aria-describedby references additional descriptive text — like an error message or hint — that supplements the label. Screen readers read the label first, then the description.
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded and aria-haspopup
Dynamic widgets need state attributes. aria-expanded indicates whether a disclosure widget (accordion, dropdown) is open or closed. Update it in JavaScript when the state changes.
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
aria-hidden="true" removes an element and all its children from the accessibility tree. Use it for decorative elements like SVG icons that are already labelled by visible text.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>Live Regions: aria-live
aria-live tells screen readers to announce changes to this region. polite waits for the user to finish their current action. assertive interrupts immediately (use sparingly).
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
role="alert" is implicitly aria-live=assertive. Insert error messages or important notifications into an element with this role and screen readers announce them immediately.
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediatelyAccessible Form Errors
When a field has an error: use aria-invalid="true", link the error message with aria-describedby, and update role="alert" content. This three-part approach ensures screen readers communicate all necessary information.
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>Quick Check
Which ARIA attribute provides the accessible name for an element when there is no visible text label?
Recap: ARIA Essentials
Prefer native HTML over ARIA. aria-label for icon buttons. aria-labelledby to reference visible labels. aria-describedby for hints and errors. aria-expanded for disclosure widgets. aria-hidden for decorative content. aria-live for dynamic status updates. aria-invalid + role=alert for form errors.
Frequently asked questions
Is the “ARIA and Accessibility: label role aria-*” lesson free?
Yes — the full text of “ARIA and Accessibility: label role aria-*” 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 and Accessibility: label role aria-*”?
Associate labels with controls, apply ARIA roles where needed, and use aria-label and aria-describedby for screen reader support. 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 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “ARIA and Accessibility: label role aria-*” 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
- Form Controls: input types select textarea
- ARIA and Accessibility: label role aria-*
- Semantic HTML5: semantic vs div soup
- Form Validation Attributes