ARIA Landmarks en profundidad

Cómo estructurar landmarks avanzados para navegación rápida en aplicaciones complejas.

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Uso avanzado de landmarks en layouts con múltiples regiones.

Regiones principales

Header, navegación, main, complementaria y pie deben estar claramente diferenciados.

Nombres únicos

Si hay varias regiones del mismo tipo, usa etiquetas descriptivas con aria-label.

No sobrecargar

Demasiados landmarks pueden generar ruido en lugar de orientación.

Coherencia entre vistas

Mantén patrones de regiones similares entre páginas para aprendizaje del usuario.

Integración con headings

Landmarks y jerarquía de títulos deben reforzarse, no competir.

Error común

Usar role main en más de una región simultáneamente.

Aplicación en proyectos reales

Cómo aplicar landmarks en plataformas con navegación múltiple.

Audita la arquitectura de layout global antes de etiquetar componentes sueltos.

Prioriza regiones que representen tareas: búsqueda, navegación principal, contenido y utilidades.

Valida la experiencia con atajos de landmarks en NVDA o VoiceOver.

Define estándar de naming para regiones repetidas.
Evita roles ARIA redundantes cuando HTML nativo ya cubre la semántica.
Prueba navegación de landmarks en páginas largas y paneles internos.
Incluye revisión de landmarks en auditorías periódicas.

Patrón de código

Ejemplo de distribución de landmarks con nombres explícitos.

Landmarks con labels

<header role="banner">...</header>
<nav aria-label="Navegación principal">...</nav>
<main id="contenido" role="main">...</main>
<aside aria-label="Atajos de cuenta">...</aside>

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

🧪 Aprende probando

Ejemplo Demo guiada Recorre regiones y verifica que cada landmark comunica propósito.

⌄

🏁 Retos

Reto Reto práctico Diferencia dos navegaciones del mismo layout con etiquetas claras.

⌄

🧰 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 21

Accesibilidad en React: focus management

Lección 23

No keyboard trap: detección y solución

›