Nombre varias regiones con aria-label
Distinga dos elementos nav para que los usuarios sepan cuál es cuál.
Nombre varias regiones con aria-label es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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. 🙌
Preguntas frecuentes
¿La lección «Nombre varias regiones con aria-label» es gratis?
Sí — el texto completo de «Nombre varias regiones con aria-label» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Nombre varias regiones con aria-label»?
Distinga dos elementos nav para que los usuarios sepan cuál es cuál. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Nombre varias regiones con aria-label»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- header, nav, main y footer: los cuatro grandes
- Coloque el contenido en main y use un único main
- Nombre varias regiones con aria-label
- Navegación por landmarks: cómo se desplazan los usuarios