aria-label aria-labelledby and aria-describedby
Provide accessible names and descriptions for elements.
aria-label aria-labelledby and aria-describedby is a free HTML 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 HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Accessible Names Matter
Every interactive element needs an accessible name — a text string that assistive technology uses to identify it. Without an accessible name, screen readers cannot tell users what a button or input does.
aria-label
aria-label provides a text accessible name directly on an element:
<button aria-label="Close dialog">×</button>
<!-- The × character has no accessible meaning
aria-label provides the name: 'Close dialog, button' -->
<input type="search" aria-label="Search products">
<!-- No visible label — aria-label provides the accessible name -->aria-labelledby
aria-labelledby references another element as the accessible name:
<h2 id="section-title">Billing Information</h2>
<form aria-labelledby="section-title">
<!-- Form's accessible name is 'Billing Information' -->
</form>
<!-- Multiple id references: -->
<button aria-labelledby="action-verb object-name">
Delete
</button>
<span id="object-name" hidden>User Account</span>
<!-- Screen reader: 'Delete User Account, button' -->aria-describedby
aria-describedby provides an extended description (supplement to the name):
<label for="pwd">Password</label>
<input
type="password"
id="pwd"
aria-describedby="pwd-hint"
>
<p id="pwd-hint">Must be 8+ characters with one uppercase letter and one number.</p>
<!-- Screen reader: 'Password [input]' then reads the description on focus -->Label vs Description
The difference between accessible name and description:
- Accessible name — identifies the element (aria-label, aria-labelledby, or label element)
- Description — supplements the name with additional context (aria-describedby)
- Screen readers announce: name, role, state → then description
aria-label on Landmarks
Use aria-label to distinguish multiple same-type landmarks:
<nav aria-label="Primary">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<!-- Screen reader landmark list:
'Primary, navigation'
'Breadcrumb, navigation' -->
<!-- When only one nav, aria-label is optional but still helpful -->aria-labelledby on Sections
Associate sections with their headings for screen reader context:
<section aria-labelledby="about-heading">
<h2 id="about-heading">About Our Team</h2>
<p>We are a team of passionate developers...</p>
</section>
<!-- Screen reader: 'About Our Team, region' when entering section -->aria-label vs visible text
aria-label overrides visible text — be careful:
<button aria-label="Delete account permanently">
Delete
</button>
<!-- Screen reader hears: 'Delete account permanently'
Sighted user reads: 'Delete' -->
<!-- Best practice: visible text and aria-label should agree
If possible, include extra context in visible text too:
<button>Delete account permanently</button> -->
<!-- aria-label should start with the visible text when possible
for speech recognition users who use voice commands -->aria-describedby for Errors
Link error messages to their inputs:
<label for="email">Email</label>
<input
type="email"
id="email"
aria-describedby="email-error"
aria-invalid="true"
>
<span id="email-error" role="alert">
Please enter a valid email address.
</span>
<!-- When input receives focus, screen reader reads:
'Email [field], invalid. Please enter a valid email address.' -->Multiple aria-describedby References
aria-describedby can reference multiple elements:
<input
type="password"
aria-label="New password"
aria-describedby="pwd-hint pwd-strength"
>
<p id="pwd-hint">Must be 8+ characters.</p>
<meter id="pwd-strength" aria-label="Password strength" value="2" max="4">Medium</meter>
<!-- Both elements are announced as the description -->Visible vs Hidden Labels
When a visible label is not possible, use sr-only class:
<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">
/* Visually hidden but in accessibility tree: */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}Quick Check
What is the difference between aria-label and aria-labelledby?
Recap: ARIA Labels
Accessible naming essentials:
aria-label— inline text name for elements without visible labelsaria-labelledby— references existing visible text by idaria-describedby— supplementary description (read after name)- Prefer visible labels and native HTML label elements
- aria-label on landmarks distinguishes multiple same-type regions
Frequently asked questions
Is the “aria-label aria-labelledby and aria-describedby” lesson free?
Yes — the full text of “aria-label aria-labelledby and aria-describedby” is free to read here on the web, and the HTML 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 HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “aria-label aria-labelledby and aria-describedby”?
Provide accessible names and descriptions for elements. You practise HTML 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 HTML Academy?
No prior experience is required. HTML 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-label aria-labelledby and aria-describedby” 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 HTML Academy lesson?
Yes. Every HTML 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
- When to Use ARIA vs Native HTML
- role button alert dialog and landmark
- aria-label aria-labelledby and aria-describedby
- aria-hidden and aria-live