2.4.1 Bloques de derivación
Criterio de éxito oficial
Hay un mecanismo disponible para evitar bloques de contenido que se repiten en varias páginas web.
Relación con la estructura
Aunque este criterio se ocupa de bloques repetidos en múltiples páginas, también se promueve el marcado estructural dentro de páginas individuales según el criterio 1.3.1 Información y relaciones.
¿Qué es?
Las páginas web suelen tener contenido repetido: menús de navegación, encabezados, barras de búsqueda, barras laterales. Mientras que un usuario vidente puede ignorar visualmente estos bloques, los usuarios que navegan secuencialmente (con teclado o lector de pantalla) deben recorrer todo ese contenido en cada página antes de llegar al contenido principal.
¿Por qué es importante?
Los usuarios que dependen del teclado o de lectores de pantalla deben navegar secuencialmente por cada elemento interactivo. En un sitio con 20 enlaces en la navegación, esto significa pulsar Tab al menos 20 veces en cada página nueva antes de llegar al contenido.
Un mecanismo de derivación — ya sea un enlace de salto, landmarks semánticos o encabezados estructurales — permite ir directamente al contenido de interés, ahorrando tiempo y esfuerzo.
¿Quién se ve afectado?
Personas ciegas: Navegan con lectores de pantalla que leen secuencialmente. Sin mecanismos de salto, deben escuchar todos los menús en cada página nueva.
Personas con discapacidades motoras: Para quienes cada pulsación de tecla supone un esfuerzo físico, reducir el número de interacciones necesarias es fundamental.
Usuarios de teclado en general: Cualquier usuario que prefiera o necesite usar el teclado se beneficia de poder saltar contenido repetido.
Cómo implementar 2.4.1
Enlaces de salto (skip links)
Los enlaces de salto son la técnica más directa. Existen tres variantes:
Enlace al contenido principal
El primer elemento interactivo de la página lleva el foco directamente al <main>. Ideal cuando hay una sola área de contenido central.
Mini tabla de contenidos
Lista de enlaces al inicio que lleva a diferentes secciones. Útil cuando hay varias secciones de igual importancia.
Saltar bloque específico
Enlace antes de cada bloque repetido que permite saltar al contenido siguiente.
<!-- Enlace de salto al inicio del body -->
<a href="#contenido-principal" class="skip-link">
Saltar al contenido principal
</a>
<!-- CSS: oculto pero visible al enfocar -->
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 0;
z-index: 1000;
}Etiquetas HTML semánticas (landmarks)
Usar etiquetas HTML semánticas es la mejor forma de ayudar a los usuarios. Los lectores de pantalla permiten navegar directamente entre landmarks con atajos de teclado.
Uso correcto de tabindex
El atributo tabindex controla qué elementos pueden recibir el foco y en qué orden.
.focus()) pero no aparece en el orden de Tab.Ejemplos prácticos
Correcto Skip link visible al enfocar
Una tienda online tiene como primer elemento un enlace «Saltar al contenido principal» que está oculto visualmente pero aparece al recibir foco. Al activarlo, el foco se mueve directamente a los productos, saltando los 15 enlaces del menú.
Correcto Landmarks semánticos
Un blog usa <header>, <nav>, <main> y <footer> correctamente. Los usuarios de NVDA pueden saltar directamente al <main> con la tecla de acceso rápido, sin necesidad de skip link explícito.
Fallo Solo accesible con ratón
Una página tiene un skip link que solo funciona al hacer clic con ratón. Los usuarios de teclado no pueden activarlo porque no es enfocable con Tab.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G1 | Agregar un enlace al inicio de cada página web que conduzca directamente al área del contenido principal | Suficiente |
| G123 | Agregar un enlace al principio de un bloque de contenido repetido que vaya al final del bloque | Suficiente |
| G124 | Agregar enlaces al principio de la página web hacia cada área de contenido | Suficiente |
| H69 | Proporcionar encabezados al principio de cada sección de contenido | Suficiente |
| ARIA11 | Usar puntos de referencia ARIA para identificar regiones de la página | Suficiente |
| SCR28 | Usar un menú expandible para evitar la barra de navegación | Suficiente |
Errores comunes
- Skip link que no es enfocable con teclado (no tiene
hrefo tienetabindex="-1"). - Skip link oculto permanentemente con
display:noneovisibility:hidden. - El destino del skip link (
id="contenido-principal") no existe o no recibe el foco correctamente. - No usar
<main>nirole="main", privando a los usuarios del atajo nativo. - Múltiples elementos
<nav>sinaria-labeldiferenciadores.