Naming Multiple Regions With aria-label
Tell two navs apart so users know which is which.
Naming Multiple Regions With aria-label is a free Web Accessibility 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 Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Two Navs, One Problem
Many pages have a main menu and a footer menu. Both are nav landmarks, and without names they sound identical to a screen reader.
Name a Region
Add aria-label to give a landmark a short, spoken name. Now the screen reader can tell your two navs apart.
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>Keep Labels Short
An aria-label should be a couple of words, like Main or Breadcrumb. Users hear it announced, so brevity respects their time.
Do Not Repeat the Role
Write Footer, not Footer navigation. The screen reader already says navigation, so adding it again is just noise.
<nav aria-label="Footer">...</nav>Reuse a Visible Heading
If a region already has a visible heading, point to it with aria-labelledby instead of typing the name twice.
<nav aria-labelledby="more">
<h2 id="more">More links</h2>
</nav>label vs labelledby
Use aria-label when there is no visible text, and aria-labelledby when a heading or text on screen can serve as the name.
It Works on Any Landmark
Naming is not just for nav. Label an aside or a section so users know what each region holds.
<aside aria-label="Related">...</aside>One Region, Skip the Label
If a page has only a single nav, it needs no label. Naming matters most when two regions share the same role.
Distinct Names Matter
Give each region a distinct name. Two navs both labeled Menu defeats the purpose, since users still cannot tell them apart.
Hear the Difference
With names in place, the landmark list reads Main navigation and Footer navigation, so users pick the right one instantly. 🔊
Labels Are Not Visible
An aria-label is announced but never shown on screen, so it changes nothing visually while helping every screen reader user.
Quick Check
You have two nav regions. What is the best label for the bottom one?
Recap: Name Your Regions
You learned to label repeated landmarks with aria-label or aria-labelledby, keeping names short, distinct, and role-free. 🙌
Frequently asked questions
Is the “Naming Multiple Regions With aria-label” lesson free?
Yes — the full text of “Naming Multiple Regions With aria-label” 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 “Naming Multiple Regions With aria-label”?
Tell two navs apart so users know which is which. 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 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Naming Multiple Regions With aria-label” 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.
All lessons in this course
- header, nav, main, footer: The Big Four
- Putting Content in main and Only One main
- Naming Multiple Regions With aria-label
- Landmark Navigation: How Users Jump Around