Los lectores de pantalla tienen comandos para pasar rápidamente de un encabezado a otro o a regiones de puntos de referencia específicos. De hecho, una encuesta de usuarios de lectores de pantalla descubrió que, a menudo, navegan por una página desconocida al explorar los encabezados.
Si usas elementos de encabezados y puntos de referencia correctos, puedes mejorar drásticamente la experiencia de navegación en tu sitio para los usuarios de tecnologías de accesibilidad.
Usar encabezados para delinear la página
Usa elementos h1-h6 para crear un esquema estructural de tu página. El objetivo es crear un esqueleto o un andamiaje de la página de modo que cualquier persona que navegue por encabezados pueda formar una imagen mental.
Una práctica común es usar un solo h1 para el título o logotipo principal de una página, elementos h2 para designar las secciones principales y elementos h3 en las subsecciones complementarias:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
No omitas niveles de encabezados
A menudo, los desarrolladores omiten los niveles de encabezado para usar los estilos predeterminados del navegador que coinciden estrechamente con su diseño. Esto se considera un antipatrón porque rompe el modelo de contorno.
En lugar de depender del tamaño de fuente predeterminado del navegador para los encabezados, usa tu propio CSS y no omitas niveles.
Por ejemplo, este sitio tiene una sección llamada "EN LAS NOTICIAS" seguida de dos títulos:
El encabezado de la sección "EN LAS NOTICIAS" podría ser h2, y los títulos complementarios podrían ser elementos h3.
Como el valor de font-size de "IN THE NEWS" es más pequeño que el titular, puede resultar tentador convertir el titular de la primera noticia en h2 y hacer que "IN THE NEWS" sea un h3. Si bien podría coincidir con el estilo predeterminado del navegador, rompería el contorno transmitido a un usuario de lector de pantalla.
Puedes usar Lighthouse para comprobar si tu página omite algún nivel de encabezado. Ejecuta la auditoría de accesibilidad (Lighthouse > Options > Accessibility) y busca los resultados de la auditoría de encabezados en los que no se pueden omitir niveles.
Cómo usar puntos de referencia para facilitar la navegación
Los elementos HTML5, como main, nav y aside, actúan como puntos de referencia o regiones especiales en la página a las que puede saltar un lector de pantalla.
Usa etiquetas de puntos de referencia para definir secciones principales de tu página, en lugar de depender de elementos div. Ten cuidado de no exagerar, ya que tener demasiados puntos de referencia puede ser abrumador. Por ejemplo, mantén solo un elemento main, en lugar de 3 o 4.
Lighthouse recomienda auditar manualmente el sitio para comprobar que "los elementos de punto de referencia HTML5 se utilizan para mejorar la navegación". Puedes usar esta lista de elementos de puntos de referencia para verificar tu página.
Evita el contenido repetitivo con vínculos de navegación
Muchos sitios incluyen navegación repetitiva en sus encabezados, lo que puede resultar molesto para navegar con tecnología de accesibilidad. Usa un vínculo para omitir a fin de permitir que los usuarios omitan este contenido.
Un vínculo de navegación es un ancla fuera de la pantalla que siempre es el primer elemento enfocable del DOM. Por lo general, contiene un vínculo in-page al contenido principal de la página. Dado que es el primer elemento del DOM, la tecnología de accesibilidad solo requiere una acción para enfocarlo y omitir la navegación repetitiva.
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
[Main content]
</main>
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
Muchos sitios populares, como GitHub, The NY Times y Wikipedia contienen vínculos de navegación. Intenta visitarlos y presionar la tecla TAB en tu teclado varias veces.
Lighthouse puede ayudarte a comprobar si tu página contiene un vínculo de navegación. Vuelve a ejecutar la auditoría de accesibilidad y busca los resultados de la auditoría La página contiene un encabezado, un vínculo de omisión o una región de punto de referencia.