Normativas · WCAG 2.2

SC 2.4.1 Nivel A WCAG 2.0

Omisión de bloques

Debe proporcionarse un mecanismo que permita a los usuarios de teclado y lectores de pantalla saltarse el contenido que se repite en cada página —habitualmente la cabecera, la navegación principal y los enlaces de utilidad— para llegar al contenido principal sin tener que tabular por decenas de enlaces.

Qué exige este criterio

Cuando un bloque de contenido aparece en varias páginas —cabecera, navegación principal, megamenú, barra de rutas de navegación (breadcrumb), enlaces de utilidad—, los usuarios que utilizan el ratón se lo saltan de forma instantánea. Los usuarios de teclado, en cambio, deben tabularlo entero cada vez. Los usuarios de lector de pantalla tienen que escucharlo. Este criterio de conformidad exige al menos un mecanismo que permita ir directamente al contenido principal.

WCAG acepta varios mecanismos: un enlace «Ir al contenido principal», regiones landmark apropiadas (<header>, <nav>, <main>, <footer>) o una jerarquía de encabezados real que los usuarios de lector de pantalla puedan recorrer con la tecla H. En la práctica, un enlace de omisión combinado con landmarks constituye la línea de base segura.

Cómo cumplirlo

  • Añadir un enlace «Ir al contenido principal» como primer elemento enfocable de la página. Debe ser visible al recibir el foco, no estar oculto de forma permanente.
  • Apuntar el atributo href del enlace de omisión al id del elemento <main> y añadir tabindex="-1" a <main> para que el anillo de foco quede situado allí en Safari.
  • Usar elementos landmark reales: un <header>, un <nav> (o varios con aria-label), un <main> y un <footer> por página.
  • Mantener una jerarquía de encabezados coherente para que los usuarios de JAWS y NVDA puedan pulsar H, 1, 2 o 3 para navegar por la página.
  • Si hay varios bloques repetidos (navegación de utilidad + navegación principal + rutas de navegación), considerar un segundo enlace de omisión para el más tedioso de recorrer.

Fallos habituales

  • Enlace de omisión ocultado con display: none en lugar de desplazarse fuera de pantalla y mostrarse al recibir el foco; la tecnología de apoyo no puede encontrarlo.
  • El destino del enlace de omisión carece de tabindex="-1", por lo que Safari/WebKit ignora el salto y mantiene el foco en el propio enlace.
  • El elemento <main> está anidado dentro de <nav> o aparece duplicado varias veces en la página.
  • Jerarquía de encabezados que salta niveles (h1 → h4) o utiliza encabezados únicamente para el tamaño visual, lo que rompe la estrategia de navegación con la tecla H.
  • Cabeceras fijas que se solapan con el elemento enfocado tras ejecutarse el enlace de omisión; véase el criterio 2.4.11.

Por qué es importante

La omisión de bloques es la mejora de accesibilidad con mejor relación coste-beneficio de toda la lista: un enlace de omisión requiere aproximadamente diez líneas de HTML y CSS. Aun así, la tasa de fallo en sitios en producción sigue rondando el 60 % en el análisis anual del Million de WebAIM. Para un usuario que navega solo con teclado en un sitio con un megamenú de 40 elementos, tener que recorrerlo en cada cambio de página resulta agotador y, en sesiones de navegación largas, incapacitante.