Errores WCAG frecuentes: cómo detectarlos, priorizarlos y corregirlos

Controles sin nombre accesible

Un icono de carrito, un botón de cerrar o un enlace que solo contiene una imagen necesitan comunicar su propósito a tecnologías de apoyo. El nombre puede ser texto visible o una alternativa programática adecuada, pero debe describir la acción sin depender del contexto visual.

Busca controles repetidos y corrige el componente base. Añadir una etiqueta distinta en cada página suele crear inconsistencias; una convención clara evita que el mismo problema reaparezca en nuevos bloques.

Foco y teclado que no siguen la tarea

Si una acción funciona con ratón debe poder activarse con teclado. El foco necesita ser visible, seguir un orden lógico y permanecer dentro de un diálogo abierto solo mientras ese diálogo está activo. Al cerrarlo, debe volver a un lugar previsible.

Prueba menús, acordeones, tabs, carruseles, buscadores y modales. Estos componentes suelen concentrar errores de orden, escape, estado expandido y gestión del foco.

• No usar tabindex positivo para forzar el orden.
• Mantener un foco visible sobre fondos claros y oscuros.
• Permitir cerrar un modal con Escape cuando corresponda.
• Comunicar si un menú o acordeón está expandido.
• No abrir contenido inesperado al recibir foco.

Formularios que no explican qué hacer

Los campos necesitan una etiqueta asociada que permanezca disponible. Las instrucciones importantes deben aparecer antes de enviar el formulario y los errores han de identificar el campo, explicar el problema y ofrecer una vía clara para corregirlo.

Evita depender solo de un borde rojo, de un placeholder o de una posición visual. Una persona con baja visión, lector de pantalla o zoom debe recibir la misma información esencial.

Contraste y estados que desaparecen

El contraste no afecta solo al texto de un párrafo. Revisa enlaces, botones, iconos, bordes de campos, foco, mensajes de error, gráficos y estados deshabilitados. Los diseños estáticos no muestran todos los estados que una persona encontrará al interactuar.

Define combinaciones aprobadas en el sistema de diseño y comprueba los componentes con contenido real. Esto convierte una corrección puntual en una regla reutilizable para el equipo.