Accesibilidad web: como asegurarnos que nuestros textos sean accesibles

Accesibilidad web: como asegurarnos que nuestros textos sean accesibles

Cuando hablamos de accesibilidad web es fácil pensar en colores, contraste, que los elementos de la pantalla sean navegables, pero ¿y los textos? ¿cómo nos aseguramos que sean accesibles? Hoy te cuento cómo podemos asegurarnos de que nuestro contenido sea accesible.

¿De dónde viene todo esto?

Actualmente la World Wide Web Consortium (W3C) es la encargada de definir los estándares de internet y quien publica la Web Accessibility Initiative (WAI). Al momento de diseñar y desarrollar se supone que deberíamos usar dichas guías para asegurarnos la accesibilidad y navegabilidad de nuestro trabajo por parte de la mayor cantidad posible de personas usuarias. Ahora, ¿cómo se traslada esto a los textos?

Color y contraste

Para asegurar la accesibilidad y su correcta interpretación, la W3C establece 2 niveles: AA, que es el recomendado, y AAA, que es el ideal.

La relación de contraste entre texto y fondo debe pasar la relación mínima (hasta ahora la proporción era 4.5:1, pero actualmente su fórmula está en revisión y un nuevo estándar podría publicarse pronto). La realidad es que nadie se pone a hacer cuentas en el día a día, pero hay plugins en Figma (mi favorito es,por lejos, Stark) o las herramientas para developers de Google que nos permiten controlar si nuestros colores cumplen con esta norma. Además, dicha proporción cambia según el tamaño de texto, a texto más grande, nos podemos permitir usar colores con menor contraste y que sean igualmente accesibles. Esto también aplica para elementos como íconos.

El de la izquierda aprueba, pero con lo mínimo mientras que el de la derecha aprueba con 10.

Tamaño

En lo que respecta a tamaño debemos preocuparnos por 2 cosas:

1. Que el texto tenga el tamaño mínimo para ser legible. El mismo suele recomendarse en 12pt o 16px. Usando textos no menores a 16px, nos aseguramos que sea legible y evitamos problemas. Si necesitamos usar textos incluso más chicos, no deberíamos usar menos de 12px.
2. Que el texto pueda agrandarse a un 200%. Suele ocurrir que la gente configure sus dispositivos para que, por default, se les agrande la letra o que las pantallas tengan un zoom y por esto es ideal que esté todo contemplado para que los textos puedan agrandarse hasta 2 veces su ancho y su alto.

Acá por ejemplo vemos que la letra está en 18px por lo que no será un problema su tamaño.

Contexto

Suele suceder que ponemos la información mínima necesaria, pensamos en la funcionalidad y nos olvidamos de nuestras personas usuarias y en qué circunstancias usarán nuestros productos. Por eso es importante ordenar la información en pantalla e intentar asegurarnos de usar elementos como títulos o bajadas para explicarle a la persona dónde está y qué está por hacer. Los textos idealmente deben ser claros, cortos e informativos.

Mayúsculas

Acá, como todo el problema no son las mayúsculas per se, sino su uso indiscriminado. De hecho, un problema usual es que en diseño suele quedar “lindo” poner los textos todos en mayúsculas, lo cual puede ser problemático.

La legibilidad se reduce al usar todo mayúsculas, ya que todas las letras se ven más uniformes y tienen el mismo tamaño. Sin ir más lejos, a las personas disléxicas les es más fácil distinguir entre mayúsculas y minúsculas que leer todo en el mismo tamaño. Yendo a casos más extremos, los lectores de pantalla tienden a interpretar cuando algo está todo en mayúsculas como letras independientes y deletrean la palabra en cuestión, dificultando su comprensión a quienes los utilizan.

Si el diseño final lleva inevitablemente mayúsculas, lo que se puede hacer es una pequeña trampa. En el código original usar el texto en minúsculas cosa que sea accesible y luego en el CSS aplicar la clase text-transform: uppercase; para que visualmente se muestren las mayúsculas.

Acrónimos

Los acrónimos pueden ser geniales cuando todo el mundo sabe qué son (casi nadie hace cara rara cuando hablamos de OVNIS), pero también pueden ser un problema cuando asumimos que todo el mundo los entiende. Así que lo ideal en estos casos es usarlos una primera vez aclarando entre paréntesis su acrónimo y luego ya podemos reemplazarlo en futuras ocasiones.
Ejemplo, en esté artículo empecé explicando que es la Web Accessibility Initiative (WAI), pero en los siguientes usos ya puedo simplemente mencionar la WAI y debería saberse de lo que estoy hablando. ¿Es una regla infalible? No, pero de esta manera al menos aclaramos de qué estamos hablando y podemos asegurarnos que si la persona busca la respuesta, la encuentra en nuestro contenido.

Emojis

Los emojis ya son una parte casi inevitable de cómo nos expresamos hoy en día. Para muchas personas les resulta muy difícil escribir sin usarlos como complemento o refuerzo de lo que se quiere decir. Por eso es importante usarlos de manera que potencien el contenido y no que compliquen su interpretación. Esto no quiere decir que los usemos así todo el tiempo en todas las oportunidades, pero sí que lo cuidemos al momento de preparar contenido que no sabemos quién va a leer a futuro.

Algunas reglas generales para su uso son:

• No reemplazar palabras. Es mejor “Vamos a hablar de emojis 😀😭🥳” que “Vamos a hablar de 😀😭🥳” (en este segundo ejemplo podría leerse como “vamos a hablar de cara sonriente, cara llorando fuerte, cara de fiesta”).
• Evitar usar muchas veces seguidas el mismo emoji. “Como te explico abajo 👇”. es mucho mejor que “Como te explico abajo 👇👇👇”.
• Si queremos usarlo en una frase, lo ideal es usarlos al final de esta: “Dejame un aplauso si te gustó el artículo 👏”.
• Usar los emojis y no los emoticones. Un emoji tiene una interfaz gráfica con su texto alternativo que se lo puede interpretar correctamente. Sin embargo, los emoticones se leen como lo que son: caracteres. No es lo mismo usar 😀 que se lee como “cara sonriendo” que :D que se va a leer como “dos puntos, D mayúscula”.
• Si inevitablemente igual vas a reemplazar palabras, deberían seguir las reglas de puntuación cual si fueran palabras (y asegurarte que el emoji dice literalmente lo que queres decir): “Hoy vamos a comer 🍕, 🥗 y 🍨”.
• No poner palabras entre emojis. Si ponemos “hoy vamos a hablar de ✨accesibilidad✨” el lector de pantalla lo va a leer como “hoy vamos a hablar de chispa accesibilidad chispa”. Leído así ya no tiene sentido ni queda tan bien…
• No usar los emojis para reemplazar viñetas de listados, visualmente pueden ser más atractivos, pero el listado no se leería como tal y seguiría siendo texto sin formato, solo con emojis al principio que no ordenarían la lectura realmente.

Si querés aprender más sobre su uso, te invito a leer mi artículo Emojis y accesibilidad: comunicando de manera más inclusiva.

La accesibilidad web depende de muchos factores, que el texto sea accesible es fundamental para que nuestras personas usuarias tengan la mejor experiencia posible. Espero haberte dado tips útiles para tu próximo proyecto. ¿De qué más te gustaría leer?