Landmarks y skip links efectivos

Cómo estructurar regiones de página y enlaces de salto para acelerar la navegación asistida.

📘 Teoría

Patrones concretos para estructurar páginas largas y navegaciones complejas.

Debe existir un único `main` que represente el contenido central de la vista.

Si hay más de un `nav`, etiqueta cada uno con `aria-label` descriptivo.

Tiene que ser el primer foco útil y mostrar estilo visible cuando recibe foco.

El objetivo del salto suele requerir `tabindex="-1"` para recibir foco.

Define landmarks en layout base para que todas las páginas hereden estructura correcta.

Múltiples `main` o skip links escondidos permanentemente fuera de pantalla.

Cómo desplegar landmarks y saltos de contenido sin romper diseño.

Audita primero plantillas globales: header, sidebar, navegación secundaria y pie.

Añade skip links al inicio del body y comprueba su visibilidad al foco en desktop y móvil.

Valida navegación por landmarks con lector de pantalla para asegurar que los nombres son útiles.

Base de layout con skip link visible al foco y región principal preparada.

Ejemplo Demo guiada Navega una página con menú largo y salta directo al contenido principal.

⌄

Reto Reto práctico Corrige un skip link que no funciona por destino no enfocable.

⌄

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Recursos del curso 25