Accesibilidad · AA

Accesibilidad web

Patrones prácticos para aplicar AA sin convertirlo en un laberinto técnico: contraste, teclado y foco, formularios, texto alternativo y componentes accesibles listos para adaptar.

Cómo usar este kit

Está pensado para que abras un patrón, veas el ejemplo y copies la estructura en tu proyecto sin pelearte con la normativa. Menos teoría abstracta y más bloques reutilizables.

La idea es que puedas mejorar la accesibilidad de una web o una interfaz sin tener que leerte toda la WCAG antes. Cada bloque cubre un mínimo de AA: colores con contraste suficiente, navegación por teclado, foco visible, formularios utilizables y alternativas de texto coherentes.

Siempre que pueda, añadiré ejemplos descargables y pequeños patrones que puedas llevarte tal cual a clase, a un prototipo o a una revisión de diseño.

  • Empieza por el apartado que más “duela” en tu proyecto.
  • Usa los ejemplos como checklist visual de lo que no se puede dejar fuera.
  • Combina varios patrones para construir una hoja de ruta mínima de accesibilidad.

Patrones principales

Los bloques clave para cubrir lo esencial: colores, teclado, foco, formularios, alt-text y componentes interactivos.

Contraste & color

Combinaciones de color que cumplen AA en texto normal y grande, aplicadas a botones, fondos y componentes típicos.

Ver contraste →

Teclado y foco visible

Recorridos de teclado predecibles y estilos de foco claros en menús, botones, enlaces y modales, sin perderte en la página.

Ver teclado & foco →

Formularios accesibles

Campos con label, ayuda, errores claros, agrupación lógica y estados de error/éxito que no dependen solo del color.

Ver formularios →

Texto alternativo

Ejemplos de cómo escribir alt-text útil, cuándo usarlo vacío y cómo plantear descripciones para imágenes complejas y multimedia.

Ver texto alternativo →

Componentes accesibles

Botones, toggles, alertas, menús y modales con roles claros, foco visible y comportamiento consistente para teclado y lector de pantalla.

Ver componentes →

Uso docente y práctico

Cómo trabajar con estos recursos de accesibilidad

Esta parte del kit está pensada para que puedas abrir un patrón en clase, revisarlo en vivo y, a partir de ahí, pedir a tu grupo que lo aplique a una web, un prototipo o un sistema de diseño que ya tengan entre manos.

Puedes usarlo tanto para sesiones rápidas como para trabajos más largos:

  • En una sesión corta, escoge un bloque (por ejemplo, contraste o teclado y foco) y pídele al alumnado que revise una página real usando esos ejemplos como guía.
  • Para proyectos de más recorrido, combina varios apartados (contraste, formularios, alt-text y componentes) y plantea mejoras iterativas sobre el mismo diseño.
  • También puedes usar estos recursos como base para una rúbrica de evaluación mínima de accesibilidad en trabajos de UX y UI.

Como en todo KIT UX UI: entra, copia y adapta. Si te sirve para tus clases o proyectos y quieres mencionarlo, mejor todavía.