Avanzado⏱ 45 min
🌐
HTML · Capítulo 12
HTML y Accesibilidad
Aprende ARIA roles, alt descriptivo y navegación por teclado para crear páginas inclusivas.
📖
Teoría
La accesibilidad web (a11y) asegura que personas con discapacidades puedan usar la web. En Colombia y toda Latinoamérica, es también un requisito legal para sitios gubernamentales.
Principios clave (WCAG):
- Perceptible: el contenido puede ser visto/escuchado
- Operable: funciona con teclado y otros dispositivos
- Comprensible: el contenido y la UI son entendibles
- Robusto: compatible con tecnologías asistivas
html
<!-- ARIA roles y labels -->
<nav aria-label="Navegación principal">
<ul role="list">
<li><a href="/" aria-current="page">Inicio</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<!-- Botón accesible (no usar div clickeable) -->
<button type="button" aria-label="Cerrar menú" aria-expanded="false">
<span aria-hidden="true">✕</span>
</button>
<!-- Imagen informativa vs decorativa -->
<img src="grafica.png" alt="Gráfica: ventas aumentaron 40% en Q3 2026">
<img src="decoracion.png" alt="" role="presentation">
<!-- Landmark regions -->
<main id="contenido-principal">
<a href="#contenido-principal" class="skip-link">
Saltar al contenido
</a>
</main>🚀Prueba con teclado
La mejor prueba de accesibilidad básica: desconecta tu mouse y navega con Tab, Enter y las teclas de flecha. Si puedes usar toda la página así, es un buen indicador de accesibilidad.
⚡
Ejercicio práctico
🎯 Tu misión
Audita y corrige la siguiente página con problemas de accesibilidad: imágenes sin alt, botones hechos con divs, falta de labels en inputs, y sin estructura ARIA.
Vista previa