aria-label vs aria-labelledby
Choose between an inline name and a referenced one.
aria-label vs aria-labelledby is a free Web Accessibility 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 Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Two Ways to Name
When native labeling is not enough, you have two ARIA tools: aria-label for an inline string, and aria-labelledby to point at existing text.
aria-label Holds a String
Use aria-label when there is no visible text to borrow. You type the spoken name right on the element itself.
<button aria-label="Search">🔍</button>aria-labelledby Holds an ID
Use aria-labelledby when visible text on the page can serve as the name. Its value is the id of that element, not a string.
<h2 id="sec">Billing</h2>
<section aria-labelledby="sec">...</section>Prefer Visible Text
Reach for aria-labelledby first. Reusing on-screen text keeps the spoken name and the visible name in sync automatically.
labelledby Can Combine IDs
Give aria-labelledby several ids separated by spaces, and the browser joins their text in that order into one name.
<span aria-labelledby="verb noun">Go</span>
<span id="verb">Delete</span> <span id="noun">file</span>labelledby Beats label
If both are present, aria-labelledby wins. The browser ignores aria-label entirely, so never expect them to merge.
An Element Can Name Itself
With aria-labelledby an element may reference its own id, which is handy for naming a region by its visible heading text.
label Is Invisible
An aria-label never appears on screen. It changes only what assistive tech announces, so sighted users see no difference.
Watch the Translation Trap
An aria-label is plain text that page translators often skip, while labelledby reuses visible content that does get translated.
IDs Must Match Exactly
An aria-labelledby id has to match a real element id. A typo silently leaves the element with no computed name at all.
Pick By Source of Truth
Ask where the name lives. If it is already on screen, use aria-labelledby; if it exists only for assistive tech, use aria-label.
Quick Check
A section already shows an h2 heading. How should you name the section?
Recap: label or labelledby
You learned to use aria-labelledby for existing visible text and aria-label for invisible inline names, never expecting them to combine. 🎯
Frequently asked questions
Is the “aria-label vs aria-labelledby” lesson free?
Yes — the full text of “aria-label vs aria-labelledby” is free to read here on the web, and the Web Accessibility 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 Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “aria-label vs aria-labelledby”?
Choose between an inline name and a referenced one. You practise Web Accessibility 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 Web Accessibility Academy?
No prior experience is required. Web Accessibility 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-label vs aria-labelledby” 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 Web Accessibility Academy lesson?
Yes. Every Web Accessibility 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.