Diseñar un sitio web accesible no es solo una cuestión de cumplir con normativas: es una forma de garantizar que todas las personas, independientemente de sus capacidades, puedan navegar, entender e interactuar con tu contenido. Sin embargo, incluso los sitios bien intencionados suelen cometer errores de accesibilidad sin darse cuenta. Estos fallos pueden afectar seriamente la experiencia de personas con discapacidades visuales, auditivas, cognitivas o motrices.
En este artículo, repasamos algunos de los errores más comunes que vemos en sitios web y cómo corregirlos de forma sencilla, guiándonos por las Pautas de Accesibilidad para el Contenido Web (WCAG).
1. Falta de texto alternativo en imágenes.
Qué ocurre: Muchas imágenes no tienen atributo alt, o este no describe adecuadamente su contenido o función.
Por qué es un problema: Las personas que usan lectores de pantalla no pueden interpretar imágenes sin alt. Esto también afecta el SEO y la carga semántica del contenido.
Solución:
- Agrega siempre texto alternativo descriptivo en imágenes informativas.
- Usa
alt=""en imágenes decorativas para que los lectores de pantalla las ignoren. - Sé claro y conciso. Por ejemplo:
alt="Gráfico de barras que muestra el crecimiento de ventas trimestrales"
2. Formularios sin etiquetas correctamente asociadas.
Qué ocurre: Los campos de los formularios no tienen una etiqueta visible o vinculada, o dependen exclusivamente de placeholder.
Por qué es un problema: Los usuarios con tecnologías asistivas no pueden saber qué se espera que ingresen en cada campo.
Solución:
- Usa siempre la etiqueta
<label>y asóciala al campo con el atributofor. - Evitá usar solo
placeholdercomo indicación de campos, ya que desaparece al escribir.
3. Uso excesivo de animaciones o gráficos en movimiento.
Qué ocurre: Se incluyen sliders, videos en loop o animaciones automáticas sin control del usuario.
Por qué es un problema: Pueden distraer, causar desorientación o incluso provocar convulsiones en personas con epilepsia fotosensible.
Solución:
- Cumplí con el criterio 2.3.1 de las WCAG: no uses más de tres destellos por segundo.
- Ofrecé controles para pausar, detener o esconder animaciones.
- Evitá animaciones innecesarias, especialmente si no aportan valor informativo.
4. Falta de contraste suficiente entre texto y fondo.
Qué ocurre: El color del texto no se diferencia lo suficiente del fondo, especialmente en botones o encabezados.
Por qué es un problema: Afecta la legibilidad, sobre todo a personas con baja visión o daltonismo.
Solución:
- Asegurate de cumplir con los requisitos mínimos de contraste de las WCAG (criterio 1.4.3):
- 4.5:1 para texto normal
- 3:1 para texto grande
- Usá herramientas como Contrast Checker de WebAIM.
5. Navegación inconsistente o poco clara.
Qué ocurre: Cambian menús, ubicaciones de botones o estructuras entre páginas, sin lógica clara.
Por qué es un problema: Las personas con discapacidades cognitivas o que dependen de teclados o lectores de pantalla se confunden o pierden el rumbo.
Solución:
- Mantené una estructura de navegación coherente en todo el sitio.
- Usá encabezados claros y jerarquizados (h1, h2, h3…).
- Proporcioná una función de búsqueda y mapas del sitio cuando sea posible.
6. Elementos que no son accesibles por teclado.
Qué ocurre: Algunos botones, menús desplegables o sliders solo pueden activarse con el mouse.
Por qué es un problema: Los usuarios que navegan con teclado no pueden acceder a todo el contenido o funcionalidades.
Solución:
- Verificá que todos los elementos interactivos sean accesibles mediante la tecla
Taby activables conEnteroEspacio. - Usá elementos HTML semánticos (
<button>,<a>,<input>) en lugar dedivospan.
7. No proporcionar subtítulos ni transcripciones en contenido multimedia.
Qué ocurre: Videos y audios sin subtítulos, ni versiones escritas del contenido.
Por qué es un problema: Las personas sordas o con dificultades auditivas no pueden acceder al contenido audiovisual.
Solución:
Usá herramientas automáticas, pero revisá los resultados manualmente.
Añadí subtítulos sincronizados en todos los videos.
Proporcioná transcripciones completas para audios o podcasts.
La accesibilidad web no es una tarea opcional ni secundaria: es una parte esencial del diseño centrado en el usuario. Estos errores comunes pueden parecer menores, pero sumados, excluyen a millones de personas del acceso a la información, el comercio, la educación y la participación digital.
Revisar tu sitio y aplicar estas mejoras no solo es una buena práctica inclusiva: también mejora la experiencia de usuario general, el posicionamiento en buscadores (SEO) y la percepción de marca.
¿Querés saber si tu sitio es accesible? Existen herramientas automáticas como WAVE o axe DevTools que pueden ayudarte a empezar.