La accesibilidad se trata a menudo como algo "opcional" o "secundario".
Pero la realidad es que existen muchísimas cosas relativamente sencillas que puedes hacer para que tus sitios web sean más accesibles. Y no solo los harán más accesibles para las personas con discapacidad, sino que también mejorarán significativamente la experiencia de usuario para todo el mundo.
Pero primero, aclaremos los términos:
¿Qué es la accesibilidad?
Aquí tienes la definición de accesibilidad del experto Jennison Asuncion:
La accesibilidad se refiere al diseño y desarrollo de interfaces de usuario que cualquier persona, incluidas aquellas con discapacidad, pueda consumir e interactuar de forma independiente.
Fíjate que el énfasis aquí no recae específicamente en las "personas con discapacidad", sino en todo el mundo. Eso convierte a la accesibilidad en una preocupación natural para todos los que nos dedicamos al diseño de experiencia de usuario, independientemente de nuestra especialidad.
¡Ahora, vamos con los consejos!
1. Usa nombres únicos y significativos para botones y enlaces
He perdido la cuenta de cuántas veces he recibido un prototipo o diseño en mi bandeja de entrada (o por Slack) con 16 enlaces de "más información", "leer esto" o "ver más" repartidos por todas partes, y me he llevado las manos a la cabeza.
¿Por qué? Porque es horrible para los usuarios de lectores de pantalla, que normalmente permiten saltar de un enlace a otro en una página, ignorando el contenido intermedio. Es un modo de navegación muy eficiente que ayuda a estos usuarios a llegar rápidamente a donde quieren ir.
Pero, ¿qué tan fácil crees que es para un usuario ciego o con baja visión averiguar cuál de esos enlaces de "más información" lleva al "más" que realmente le interesa?
Y, en realidad, no es tan diferente para los usuarios que sí pueden ver. Piensa en todas las veces que has entrado en un sitio web sabiendo exactamente lo que buscas, pero sin estar muy seguro de dónde encontrarlo. ¿Te lees todo el contenido? ¿O simplemente buscas el enlace correcto?
Quizás escanees primero los títulos y subtítulos (al fin y al cabo, están en negrita y llaman la atención), pero aun así tienes que lidiar con el esfuerzo cognitivo de conectar esos títulos con los enlaces de abajo. Como los enlaces también suelen destacar visualmente, ¿no sería mucho más fácil si cada uno te dijera exactamente a dónde te llevará sin tener que leer todo el resto del texto?
Cómo redactar enlaces y botones accesibles
Qué hacer
- Integra los enlaces en un lenguaje claro y específico que indique a los usuarios adónde les llevará el enlace y por qué podría interesarles hacer clic
- Indica si un enlace abrirá contenido de gran peso, como un PDF o un vídeo, dentro del propio texto del enlace
No
- Uses enlaces o botones con textos genéricos como “más información”, “leer más” o “ver más”
- Incluyas enlaces en términos aún más genéricos como “esto”, “esta página” o “aquí”
- Enlacés a URLs “desnudas” (p. ej., www.thewebahead.net) a menos que haya un contexto que aclare por qué ese enlace está ahí
Para saber más, echa un vistazo al artículo de WebAIM sobre enlaces.
2. Añade etiquetas alt claras y útiles a las imágenes
Las etiquetas alt también desempeñan un papel fundamental para los usuarios de lectores de pantalla en la web. Sin estos fragmentos invisibles de texto, no hay forma alguna de que las personas con baja visión o ceguera comprendan el contenido de imágenes, visualizaciones de datos e infografías. Con las etiquetas alt, podemos garantizar que nadie se pierda la información que transmiten nuestros gráficos circulares, fotos de cabecera e infografías.
En los viejos y malos tiempos de la locura del SEO de sombrero negro, las etiquetas alt se abusaban como un método más para saturar una página con palabras clave. Lo cual era horrible para los usuarios de lectores de pantalla. Imagina estar leyendo un artículo de blog y escuchar:
“Diseños CSS déjanos CSS tablas HTML diseños basados en tablas tablas web diseño web código marcado flotadores en línea bloque en línea bloque W3C consorcio web…”
Todo en los tonos inquietantemente robóticos de un lector de pantalla.
Debido a ese abuso, los motores de búsqueda se movieron rápidamente para castigar a esos “saturadores de palabras clave”, liberando a las etiquetas alt para que hicieran lo que siempre debieron hacer: proporcionar información útil.
Al igual que con los enlaces, la clave aquí es hacer que tus etiquetas alt sean claras, descriptivas y que suenen naturales.
Con muchas fotos, es una cuestión sencilla de describir sucintamente el contenido de la imagen: “Primer plano de arándanos”.
Si tu imagen contiene texto —y en serio, no hagas eso— incluye el texto palabra por palabra en la etiqueta alt.
Si tu imagen contiene datos útiles, como un gráfico de barras que ilustra los patrones de uso móvil, asegúrate de que la etiqueta alt contenga los mismos datos: “El 95% de los usuarios de teléfonos inteligentes ven el mismo sitio web en varios dispositivos”.
Y no puedo dejar pasar esta oportunidad para despotricar brevemente contra las infografías: estas imágenes masivas llenas de texto son horribles para la accesibilidad, por no hablar del SEO.
Hacer que el contenido gráfico sea accesible
Qué hacer
- Escribe etiquetas alt de imagen que describan sucintamente el contenido de la imagen
- Usa palabras clave o frases que sean relevantes para tu contenido, pero solo si realmente ayudan a describir la imagen, y limítate a una palabra clave o frase
- Incluye la idea principal de cualquier visualización de datos (como gráficos de barras, gráficos circulares, etc.)
- Crea infografías con texto HTML real o una alternativa basada en texto (es decir, una publicación extensa que explique los datos)
No
- Sobrecargar tus etiquetas alt con palabras clave
- Publicar infografías sin una alternativa basada en texto
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
3. Escribe mensajes de error claros y prácticos
Hay mucho que tener en cuenta al crear formularios accesibles. (Como verás en este artículo sobre cómo crear formularios accesibles.) Pero un elemento clave para cualquier estratega de contenido, y para tus usuarios, son los mensajes de error.
Como señala WebAIM, los mensajes de error:
Deben describir claramente los errores presentes y, de forma óptima, incluir pistas o instrucciones para resolverlos. Por ejemplo, "El número de curso no tiene el formato correcto" no es tan útil como "El número de curso debe ser un número de 3 dígitos".
Al redactar mensajes de error, no te limites a describir el problema, céntrate en cómo solucionarlo. En la mayoría de los casos, ni siquiera hace falta insistir en que hubo un error: céntrate solo en la solución, y hazlo de forma clara y concisa.
Todos tus usuarios, tengan o no discapacidad visual, agradecerán una guía clara sobre qué hacer a continuación.
Cómo redactar mensajes de error accesibles
Qué hacer
- Indicar que hubo un problema (implícita o explícitamente, aunque lo implícito suele ser más eficiente; consulta más abajo para saber más sobre esto)
- Explicar cómo solucionarlo
No
- Indicar que hubo un error sin explicar cómo solucionarlo
- Referirse a una entrada como "válida" o "inválida": esto puede parecer perfectamente aceptable en abstracto, ya que simplemente estás indicando que una entrada no cumple con los requisitos que has definido para un campo. Pero en la práctica, estás llamando a alguien inválido por su nombre o género. Y eso es simplemente... bueno, ¿tengo que explicarlo?
Mensajes de error implícitos frente a explícitos
Como mencioné anteriormente, todos los mensajes de error deben hacer dos cosas:
- Indica que hubo un error
- Explicar cómo solucionarlo
Pero puedes lograr ambos objetivos fácilmente en un solo mensaje dando a entender que hubo un error. Por ejemplo, podríamos expresar un mensaje de error de las siguientes maneras:
- Explícitamente, sin instrucciones: El formato del número de curso es incorrecto.
- Explícitamente, con instrucciones: El formato del número de curso es incorrecto. Por favor, introduce un número de 3 dígitos.
- Implícitamente: Por favor, introduce un número de curso de 3 dígitos.
La opción 1 indica explícitamente que hay un error, pero no aclara cómo solucionarlo. La opción 2 también es explícita, pero añade una forma de arreglar el problema, así que es una mejora. La mejor de todas es la 3, que da a entender que hubo un problema explicando cómo solucionarlo.
4. Escribe encabezados claros y descriptivos
Del mismo modo que un lector de pantalla permite a las personas saltar de un enlace a otro, también pueden saltar entre encabezados, ignorando el texto que hay en medio.
Ahora, imagina esa experiencia con la mayoría de los sitios web que existen. ¿Crees que podrías deducir claramente el tema de cada sección de una página web determinada sin consultar el cuerpo del texto o los enlaces?
Personalmente, mi respuesta es “a veces”. Para repasar rápidamente la página de Square de arriba:
- “Empieza a vender hoy” — súper claro. Entiendo que aquí es donde empezaría si quisiera hacerlo.
- “Empieza, gestiona y crece con Square” — claro… más o menos. Aclarar el objeto —tu negocio— habría ayudado mucho aquí. Sin contexto, no es obvio qué estás empezando, gestionando o haciendo crecer.
- “Acepta todas las formas en que tus clientes quieren pagar” — Claro… al menos hasta que llego a “Stand”. ¿Qué demonios es eso?
Escribe titulares y subtítulos más claros
Como ejercicio, te sugiero que desactives todas tus capas de texto que no sean titulares (si usas una aplicación de escritorio como Sketch o Photoshop) o que cambies brevemente tus etiquetas <p> al color de fondo de tu página (si usas Webflow).
Ahora lee todas tus etiquetas H, preguntándote con cada una: ¿estoy siendo lo suficientemente claro solo con este titular?
Si tu respuesta es no, quizás sea hora de reescribirlo.
A veces, tienes que aceptar la extensión
Ten en cuenta que buscar claridad en los titulares a menudo significa usar más palabras. Me doy cuenta de que eso puede ir en contra de tu impulso de crear sitios web “limpios”, pero vale la pena preguntarse:
¿Qué es más importante: que este sitio se vea impecable o que ofrezca a los usuarios toda la información que necesitan?
5. Optimiza el contenido de tus formularios
Puede que los formularios no sean muy glamurosos, pero son el corazón del diseño de producto. El contenido adecuado puede hacerlos mucho más usables —y accesibles— para todo el mundo. Aquí tienes algunas formas de lograrlo:
Qué hacer
- Indica qué campos son opcionales en la etiqueta del formulario (así los lectores de pantalla transmitirán esa información directamente). Sé que estamos más acostumbrados a marcar los campos obligatorios, pero en realidad deberías usar solo los necesarios; así habrá menos campos opcionales que marcar y, por tanto, menos ruido visual.
- Haz que el texto de los botones sea específico para la acción que se realiza (no uses “enviar”, a menos que eso sea exactamente lo que hace el usuario, como suele ocurrir en revistas literarias o blogs que aceptan colaboraciones externas).
- Muestra información útil básica. Por ejemplo, si una contraseña debe tener 9 caracteres, incluir una mayúscula y un carácter especial, ¡avísalo! Y no lo escondas en un mensaje emergente.
- Agrupa la información relacionada. Ya conoces lo habitual: correo y contraseña, dirección postal, datos de tarjeta de crédito, etc. Si todo forma parte de un mismo concepto, agrúpalo.
No
- Usa etiquetas dentro del campo o marcadores de posición, a menos que se conviertan en una etiqueta persistente al hacer clic (en lugar de desaparecer), una técnica común en los sitios de Google.
Una web más accesible es una web mejor para todos
Hacer que tu sitio web sea más accesible para personas con discapacidad tiene una ventaja añadida: puede mejorar la experiencia de todos los usuarios.
Al fin y al cabo, un lector de pantalla que salta de encabezado en encabezado, o de enlace en enlace, se comporta de forma muy parecida a como navegamos todos: no consumimos todo el contenido, sino que escaneamos buscando la información específica que necesitamos.
Si quieres aprender más sobre accesibilidad, busca un grupo de encuentro sobre accesibilidad en tu zona, echa un vistazo a The Accessibility Project y sigue a Jennison en Twitter.
