Errores comunes de accesibilidad digital en sitios web y cómo corregirlos
Por: Dr. José Manolo Álvarez
www.manolo.net
La accesibilidad digital no es un detalle opcional. Es parte esencial de una buena experiencia web para personas ciegas, con discapacidades y para cualquier persona que necesite navegar de una manera eficiente y sin barreras.
En mi trabajo de orientación, evaluación y asesoría en accesibilidad digital, encuentro una y otra vez errores que se repiten en páginas web, plataformas educativas, documentos y aplicaciones. La buena noticia es que muchos de estos problemas se pueden corregir, siempre que se conozcan y se atiendan a tiempo.
A continuación, presento una guía práctica con algunos de los errores más frecuentes de accesibilidad en la web, por qué representan una barrera, cómo pueden mejorarse y en qué parte de las WCAG 2.2 se relacionan.
1. Imágenes sin texto alternativo
Uno de los errores más comunes es publicar imágenes sin texto alternativo. Cuando esto ocurre, una persona que usa lector de pantalla o línea Braille puede perder información importante, especialmente si la imagen comunica contenido relevante y no es meramente decorativa.
Por ejemplo, si una página anuncia un taller y coloca una imagen con participantes usando tecnología accesible, no basta con insertar la foto. Esa imagen debe incluir un texto alternativo que comunique su propósito dentro del contexto de la página.
Un ejemplo adecuado podría ser:
"Participantes en un taller de accesibilidad digital utilizando computadoras portátiles y una línea Braille."
No se trata de describir todos los detalles visuales, sino de comunicar lo importante de manera breve, clara y útil.
Cómo corregirlo:
- Añadir texto alternativo a toda imagen informativa.
- Dejar el alt vacío solo cuando la imagen sea estrictamente decorativa.
- Redactar el texto alternativo según la función de la imagen dentro de la página.
Referencia en WCAG 2.2:
1.1.1 Non-text Content
Documento explicativo oficial
2. Falta de idioma principal de la página
Otra barrera frecuente es no identificar correctamente el idioma principal del documento. Cuando esto falta, los lectores de pantalla pueden pronunciar el contenido de forma incorrecta, afectando la comprensión de la información.
Si una página está en español, el documento debe indicarlo en el código. De lo contrario, una voz sintetizada podría intentar leer el texto con reglas de pronunciación de otro idioma.
Por ejemplo, en una página en español, debe declararse el idioma principal así:
<html lang="es">
Cómo corregirlo:
- Declarar el idioma principal en la etiqueta html.
- Verificar que el idioma configurado coincida con el contenido real de la página.
- Revisar plantillas, gestores de contenido y generadores automáticos que a veces dejan un idioma incorrecto por defecto.
Referencia en WCAG 2.2:
3.1.1 Language of Page
Documento explicativo oficial
3. Enlaces vacíos o sin texto identificable
Un enlace debe comunicar claramente su destino o propósito. Sin embargo, muchas páginas incluyen enlaces vacíos o íconos enlazados sin nombre accesible. Esto ocurre, por ejemplo, cuando se coloca un ícono de redes sociales, pero el enlace no tiene texto visible ni una etiqueta accesible.
Cuando un lector de pantalla encuentra ese tipo de enlace, la persona puede escuchar algo ambiguo o incluso nada útil, lo que dificulta entender hacia dónde lleva.
En lugar de un enlace vacío, es mejor usar un texto claro o un nombre accesible, por ejemplo:
"Visitar el canal de YouTube de Manolo.Net"
Cómo corregirlo:
- Asegurar que todo enlace tenga texto visible o nombre accesible.
- Si el enlace solo contiene un ícono, añadir una etiqueta accesible apropiada.
- Evitar enlaces que solo se entiendan visualmente.
Referencias en WCAG 2.2:
2.4.4 Link Purpose (In Context)
Documento explicativo oficial
4.1.2 Name, Role, Value
4. Texto de enlace poco claro
Aunque un enlace tenga texto, todavía puede ser problemático si ese texto no describe claramente su función. Expresiones como "haz clic aquí", "más información" o "leer más" suelen ser ambiguas, especialmente para quienes navegan mediante listas de enlaces con lector de pantalla.
Un enlace debe poder entenderse por sí mismo o al menos con su contexto inmediato.
Por ejemplo, en lugar de:
"Leer más"
es preferible escribir:
"Leer más sobre evaluación en asistencia tecnológica"
o
"Conocer mis servicios de accesibilidad digital"
Cómo corregirlo:
- Redactar enlaces que describan claramente su destino o acción.
- Evitar frases genéricas repetidas en distintas partes del sitio.
- Pensar cómo sonará el enlace cuando una persona navegue por una lista de enlaces fuera del contexto visual.
Referencia en WCAG 2.2:
2.4.4 Link Purpose (In Context)
Documento explicativo oficial
5. Botones vacíos o sin nombre accesible
Los botones también deben comunicar su propósito. Un botón sin texto, sin etiqueta o sin nombre accesible se convierte en un obstáculo para quienes utilizan lector de pantalla, comandos de voz o navegación por teclado.
Esto ocurre con frecuencia en botones visuales de búsqueda, cerrar, reproducir, enviar o abrir menú, cuando solo muestran un ícono y no tienen un nombre accesible definido.
Por ejemplo, un botón con un ícono de lupa debe identificarse claramente como:
"Buscar"
y un botón con una equis debe identificarse como:
"Cerrar ventana"
Cómo corregirlo:
- Añadir texto visible al botón cuando sea posible.
- Si el botón usa solo un ícono, asignarle un nombre accesible adecuado.
- Verificar con lector de pantalla qué anuncia realmente ese botón.
Referencia en WCAG 2.2:
4.1.2 Name, Role, Value
Documento explicativo oficial
6. Campos de formulario sin etiqueta
Los formularios son especialmente problemáticos cuando sus campos no tienen etiquetas bien asociadas. Si una persona llega a un cuadro de edición y el lector de pantalla solo anuncia "editar en blanco", no sabrá si ahí debe escribir su nombre, su correo electrónico, su teléfono o algún otro dato.
Este error afecta formularios de contacto, registros, inicios de sesión, compras en línea y encuestas.
Un buen ejemplo sería presentar cada campo con una etiqueta visible y correctamente asociada, como:
"Nombre completo"
"Correo electrónico"
"Mensaje"
Cómo corregirlo:
- Asociar cada campo con una etiqueta visible mediante la etiqueta label.
- No depender solo del placeholder para identificar el campo.
- Ofrecer instrucciones claras cuando el formato del dato sea importante.
Referencias en WCAG 2.2:
1.3.1 Info and Relationships
Documento explicativo oficial
3.3.2 Labels or Instructions
Documento explicativo oficial
4.1.2 Name, Role, Value
7. Bajo contraste entre texto y fondo
El bajo contraste es uno de los errores visuales más frecuentes. Se da cuando el color del texto y el color de fondo son demasiado parecidos, dificultando o impidiendo la lectura.
Esto puede afectar a personas con baja visión, personas mayores, usuarios con fatiga visual, personas que navegan desde el celular bajo mucha luz y, en general, a cualquier visitante del sitio.
Por ejemplo, un texto gris claro sobre fondo blanco puede verse elegante para algunos diseñadores, pero resultar muy difícil de leer en la práctica.
Cómo corregirlo:
- Usar combinaciones de color con contraste suficiente.
- Verificar el contraste con herramientas especializadas antes de publicar.
- Asegurar que el texto normal alcance al menos una relación de contraste de 4.5:1.
Referencia en WCAG 2.2:
1.4.3 Contrast (Minimum)
Documento explicativo oficial
Conclusión
La accesibilidad digital no consiste únicamente en cumplir con una lista técnica. Se trata de garantizar que las personas puedan percibir, entender y utilizar la información de forma digna, efectiva e independiente.
Corregir estos errores frecuentes representa un excelente punto de partida para mejorar la calidad de cualquier sitio web. Además, ayuda a acercarse al cumplimiento de las WCAG 2.2 y, sobre todo, a construir experiencias digitales más inclusivas.
Si necesitas apoyo para evaluar la accesibilidad de una página web, documento, aplicación o recurso educativo digital, puedes comunicarte conmigo para orientación, evaluación y recomendaciones de mejora.
Regresar a la sección de accesibilidad digital.
Redes sociales
Lista de la Comunidad Manolonet en Grupos de Google
Puede subscribirse a nuestra lista de E-mail para recibir los anuncios relacionados a la Comunidad Manolo.Net.
Para suscribirse a la lista de la Comunidad Manolonet, pueden enviar un E-mail en blanco a la siguiente dirección:
comunidadmanolonet+subscribe@googlegroups.com