Landmarks y skip links efectivos

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

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

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

Región principal única

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

Navegaciones con nombre

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

Skip link funcional

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

Destino enfocable

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

Consistencia por plantilla

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

Error típico

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

Aplicación en proyectos reales

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.

Evita repetir regiones sin diferenciarlas por nombre.
Usa objetivos de salto estables aunque cambie el contenido interno.
Incluye test visual de foco para skip links en QA.
Documenta reglas en el sistema de diseño para nuevos layouts.

Patrón de código

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

Skip link + landmarks

<a class="skip-link" href="#contenido">Saltar al contenido principal</a>
<header>
  <h1>Portal</h1>
</header>
<nav aria-label="Principal">...</nav>
<main id="contenido" tabindex="-1">
  <h2>Noticias</h2>
</main>

1 Claves teóricas 2 Aplicación en proyectos reales 3 Patrón de código

🧪 Aprende probando

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

⌄

🏁 Retos

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

⌄

🧰 Recursos

Enlaces útiles

W3C WAI Fundamentals MDN Accessibility WCAG 2.1 Quick Reference ARIA Authoring Practices Guide

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Test de Accesibilidad Web

Recursos del curso 25

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 07

Teclado y foco visible sin trampas

Lección 09

Contraste y legibilidad en interfaces

›