ARIA13Dar nombre a las regiones de la página con aria-labelledby

Por qué es importante

Los lectores de pantalla (programas que leen en voz alta la pantalla) muestran una lista de las regiones de la página. Si hay tres zonas «navegación» sin nombre, la persona no sabe cuál es el menú principal, cuál el de la sección y cuál el del pie.

Al usar el título que ya se ve, todos reciben el mismo nombre. Además, si alguien cambia el título, el nombre de la región cambia con él.

Cómo se hace

1. Localice las regiones que tienen un título visible, normalmente un encabezado.
2. Dé a ese título un id único, por ejemplo id="tit-agenda".
3. Añada a la región aria-labelledby="tit-agenda". Sirve en <nav>, <aside>, <section>, <form> y en elementos con un role de región.
4. Una <section> solo aparece como región cuando tiene nombre. Este atributo se lo da.
5. Use títulos breves y no repita el tipo de región: «Agenda cultural», no «Región de agenda cultural».
6. Si no hay título visible, use aria-label (técnica ARIA6).

Cómo comprobarlo

1. Busque en el código las regiones con aria-labelledby.
2. Compruebe que el id indicado existe en la página.
3. Lea el texto al que apunta y confirme que describe bien esa zona.
4. Abra la lista de regiones del lector de pantalla (en NVDA, Insert + F7; en VoiceOver, el rotor). Cada región debe aparecer con su nombre.

Ejemplo

Barra lateral cuyo nombre sale de su encabezado visible.

<aside aria-labelledby="tit-agenda">
  <h2 id="tit-agenda">Agenda cultural</h2>
  <ul>
    <li><a href="/agenda/teatro">Teatro en la plaza Mayor</a></li>
    <li><a href="/agenda/concierto">Concierto de la banda municipal</a></li>
  </ul>
</aside>