0Pricing
Web Accessibility Academy · Lesson

Naming Multiple Regions With aria-label

Tell two navs apart so users know which is which.

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>

All lessons in this course

  1. header, nav, main, footer: The Big Four
  2. Putting Content in main and Only One main
  3. Naming Multiple Regions With aria-label
  4. Landmark Navigation: How Users Jump Around
← Back to Web Accessibility Academy