HTML

Accesibilidad (A11Y) y el estándar ARIA

La accesibilidad (A11Y) es requisito legal y clave para SEO y usabilidad.

¿Cuánto sabes de HTML?

📘 Teoría

Claves teóricas

Resumen con ideas principales para repasar rápido.

Árbol de accesibilidad

Representación que consumen los lectores de pantalla para describir la interfaz.

Roles ARIA

Define qué es un componente cuando HTML no alcanza (role="tablist", role="alert").

Etiquetas accesibles

Usa aria-label o aria-labelledby para nombrar controles sin texto visible.

Estados

aria-expanded, aria-pressed y aria-selected comunican cambios de UI.

Teclado y foco

Todo elemento interactivo debe ser alcanzable con Tab y mostrar foco.

tabindex

tabindex="0" añade foco; tabindex="-1" permite foco programático.

Árbol de accesibilidad

El Accessibility Tree es la estructura que usan NVDA o VoiceOver para explicar qué hay en pantalla.

Si un elemento no tiene rol ni etiqueta, el lector de pantalla no podrá describirlo correctamente.

Usa HTML semántico antes de añadir ARIA.
Comprueba el orden de foco con Tab.
Asegura contraste suficiente entre texto y fondo.

ARIA en componentes

ARIA se usa cuando no existe una etiqueta semántica equivalente (por ejemplo, menús personalizados).

aria-label describe el propósito; aria-expanded indica si un panel está abierto.

role="alert" anuncia errores de forma inmediata.
aria-live="polite" para mensajes informativos sin interrumpir.
aria-controls vincula un botón con el panel que controla.

Ejemplo: Botón de cerrar accesible

La letra "X" sola no explica su función. Añade un nombre accesible y oculta la X al lector de pantalla.

aria-hidden="true" evita que el lector anuncie el icono visual.

Botón accesible

<button class="btn-close">X</button>

<button aria-label="Cerrar ventana" class="btn-close">
  <span aria-hidden="true">X</span>
</button>

1 Claves teóricas 2 Árbol de accesibilidad 3 ARIA en componentes 4 Ejemplo: Botón de cerrar accesible

🧪 Aprende probando

Ejemplo Botón de cerrar accesible Compara un botón sin etiqueta con uno accesible.

⌄

🏁 Retos

Reto Reto: botón de búsqueda accesible Añade aria-label y role correcto para alertas.

⌄

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre HTML.

Test de HTML

Recursos del curso 27

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

‹

Lección 16

SEO técnico en HTML: metadatos, Open Graph y datos estructurados

Lección 18

Rendimiento web con HTML: Core Web Vitals en la práctica

›