UX Writing y accesibilidad: cada palabra cuenta

Imagina estar en un país donde no entiendes el idioma ni la grafía, y necesitas encontrar el hotel. ¡Cualquier pequeña ayuda es bienvenida!.

Ahora, imagina a Ana, una viajera entusiasta, que llega a una vibrante ciudad extranjera. Sin saber una palabra del idioma local, se siente perdida mientras observa las señales confusas y los mapas complicados.

Justo cuando comenzaba a perder la esperanza, un amable local se acerca a ella. Con una sonrisa, empieza a gesticular y señalar un mapa en su teléfono. Aunque Ana no entiende sus palabras, las ilustraciones en el mapa y el entusiasmo del hombre fueron alentadores. Con gestos sencillos y palabras básicas, el hombre le mostró el camino hacia la estación de metro más cercana.

Al llegar a la estación, Ana se encontró con un grupo de jóvenes, que al ver su apuro, se acercaron y ofrecieron su apoyo. Con una mezcla de señas, traducciones rápidas a través de aplicaciones y sonrisas, lograron que Ana entendiera cómo tomar el tren y en qué parada bajar.

Mientras viajaban juntos, los jóvenes compartieron datos sobre la ciudad: “Mira ese edificio, ¡es famoso!”, “Prueba la comida local aquí”, y cada pequeña información era como una brújula que guiaba a Ana en su nueva aventura. Finalmente, después de varios giros y vueltas, llegaron a la parada de su hotel.

Ana se sintió abrumada por la amabilidad de los extraños que se convirtieron en sus guías temporales. Y, gracias a sus pequeñas pero significativas intervenciones, no solo encontró su camino, sino que también descubrió la magia de la solidaridad en un mundo diverso.

Diversidad, accesibilidad y UX writing

Al igual que los extraños que ayudaron a Ana, los diseñadores tenemos la misión de construir interacciones que ayuden a todas las personas. Nuestras aplicaciones y plataformas deben guiar a los usuarios a través de un diseño claro y amigable, apoyándose en las palabras para garantizar que cada paso del recorrido sea fluido y comprensible.

¿Cómo podemos garantizar que nuestra experiencia sea comprensible para todos?.

Una de las claves es utilizar las palabras de manera efectiva, siempre teniendo en cuenta que serán leídas por personas con diversas condiciones físicas y mentales. Y es aquí donde entra en juego el UX writing accesible, UX writing del bueno.

Puntos clave a tener en cuenta para crear un UX writing accesible

Estructura lógica de contenido

Es importante organizar el contenido con encabezados jerárquicos para la navegación, especialmente para usuarios con discapacidades visuales. Los encabezados crean un mapa mental claro de la información. Un lector de pantalla puede escanear la página y ofrecer una lista de los encabezados a los usuarios para que elijan qué sección les interesa más, permitiendo una navegación más rápida.

Buenas prácticas para usar encabezados jerárquicos

• H1 para el título principal: el título de la página o el tema central.
• H2 para secciones principales: subtemas o divisiones clave dentro de la página.
• H3 para subsecciones: desglose de los temas tratados en cada H2.
• Mantener el orden: no saltar de un H2 a un H4, ya que rompe la jerarquía y puede desorientar a los usuarios que dependen de la estructura lógica.

Consistencia en los mensajes

La consistencia en los mensajes en el UX Writing ayuda a los usuarios a comprender y navegar por una interfaz sin confusión. Así, se asegura que el tono y los términos usados sean consistentes y claros en toda la interfaz.

Buenas prácticas para ganar consistencia

• Usar los mismos términos: si una acción se llama "Registrar", asegúrate de no llamarla "Suscribir" o "Crear cuenta" en otras partes de la interfaz.
• Mantener un tono constante: si tu tono es amigable, intenta que lo sea en todas las interacciones. Si es formal, que sea formal en todas partes.
• Respetar el lenguaje inclusivo y neutral: intenta utilizar términos respetuosos e inclusivos y mantente fiel a ellos a lo largo de toda la interfaz.

Lenguaje claro y directo

Se debe usar un lenguaje claro y comprensible, evitando jergas o términos técnicos. Esto se traduce en un uso efectivo del Plain Language o "lenguaje sencillo", que busca comunicar de manera clara y accesible.

Buenas prácticas para un lenguaje sencillo

• Usar frases cortas: en la medida de lo posible, opta por oraciones breves y directas para facilitar la comprensión, especialmente para personas con discapacidades cognitivas.
• Evitar jergas y términos técnicos: utiliza un lenguaje claro y accesible, eliminando tecnicismos que puedan dificultar la comprensión para un público diverso.
• Ser específico y conciso: emplea palabras precisas y evita redundancias, esto ayuda a los usuarios, incluidos aquellos que utilizan tecnologías de asistencia, a procesar la información más fácilmente.
• Utilizar la voz activa: la voz activa proporciona claridad y facilita la comprensión rápida. Ejemplo: "Guarda tu progreso." (Esto sería voz activa), "El progreso será guardado." (voz pasiva).
• Usar listas y viñetas: presenta la información de manera escaneable con listas, lo que beneficia a todos los usuarios y facilita la navegación (sobretodo para lectores de pantalla).

Un ejemplo:

• Mala práctica: "Con el fin de optimizar su experiencia, le recomendamos que consulte la sección de ayuda disponible en nuestro sitio web". Encontramos dos problemas: la frase es larga, incluye jerga como "optimizar" y es innecesariamente formal.
• Buena práctica: "Para obtener ayuda, visita nuestra sección de soporte". Este ejemplo es mejor porque: la frase es corta, directa y utiliza un lenguaje sencillo que cualquier.

Otro ejemplo:

• Mala práctica: "Su solicitud ha sido recibida y está actualmente en proceso de evaluación por parte de nuestro equipo".
• Buena práctica: "Recibimos tu solicitud y la estamos revisando".

Evitar el sesgo

Esto es super importante. Los textos deben estar libres de lenguaje excluyente y ser inclusivos para todos los grupos. Esto implica eliminar cualquier lenguaje que pueda discriminar, ofender o excluir a grupos específicos. Además, esto incluye no solo aspectos relacionados con género, raza o etnicidad, sino también con orientación sexual, discapacidad y otras características personales como la religión, etc.

Buenas prácticas para evitar el sesgo

• Usa un lenguaje inclusivo: elige palabras que sean neutrales y que no asuman una identidad específica. Por ejemplo:
  • Mala práctica: "El usuario debe asegurarse de que su esposa esté informada sobre el proceso".
  • Buena práctica: "El usuario debe asegurarse de que su cónyuge esté informado sobre el proceso".
• Evita estereotipos: no asumas características o comportamientos basados en el género, la raza u otras características. Por ejemplo:
  • Mala práctica: "Invita a tu novio a cenar con estas increíbles recetas fáciles. ¡Sorpréndele con tus habilidades culinarias!".
  • Buena práctica: "Sorprende a esa persona especial con estas increíbles recetas fáciles. ¡Disfruta preparándolo juntos!".
• Usa términos precisos: evita términos vagos que pueden ser malinterpretados o que refuercen estereotipos. Por ejemplo:
  • Mala práctica: "Todo el mundo sabe cómo usar la tecnología hoy en día”.
  • Buena práctica: "La familiaridad con la tecnología varía entre los usuarios".
• Considera la diversidad de capacidades: Usa un lenguaje que sea accesible para personas con discapacidades físicas o cognitivas. Por ejemplo:
  • Mala práctica: "El proceso es muy simple y cualquiera puede hacerlo".
  • Buena práctica: "El proceso está diseñado para ser fácil de seguir para todos los usuarios".

Usar etiquetas descriptivas

Usar este tipo de etiquetas, ayuda a las tecnologías asistivas como lectores de pantalla, a que puedan navegar y comprender la interfaz. Las etiquetas descriptivas dan contexto y claridad sobre la acción que se realizará al interactuar con un elemento, como un botón o un enlace.

Es por este motivo, que hay que evitar utilizar no utilizar etiquetas como "Hacer clic aquí" y evitar la redundacia de la palabra “aquí”. Mejor usa textos descriptivos como "Enviar formulario" o "Ver más detalles sobre accesibilidad".

El uso del aria-label

Cuando los elementos de la interfaz no tienen texto visible o cuya función no es clara solo con el texto, usamos los atributos aria-label o aria-labelledby. Estos proporcionan descripciones adicionales para los lectores de pantalla sin afectar la apariencia visual.

Ejemplo: un ícono de lupa para buscar podría tener aria-label="Buscar en la web", lo que explica la función a los usuarios de tecnologías de asistencia.

Otro ejemplo: nos encontramos con un icono de descarga con el texto visible “Descargar”. En este caso, el aria-label podría ser "Descargar el informe de accesibilidad 2024".

Texto alternativo para imágenes

El texto alternativo (o "alt text") es una descripción que se añade a las imágenes en una página web. Su principal objetivo es proporcionar información sobre el contenido visual de la imagen, especialmente para usuarios que utilizan tecnologías asistivas, como lectores de pantalla, y para mejorar la accesibilidad en general.

Un buen texto alternativo no solo ayuda a los usuarios con discapacidades visuales, sino que también mejora el SEO (optimización para motores de búsqueda) de la página. A continuación, veremos cómo usar el texto alternativo según el tipo de imagen.

Imágenes informativas o funcionales

Estas imágenes transmiten información importante o son esenciales para la comprensión del contenido, como gráficos, diagramas o mapas.

• Ejemplo: "Imagen de un gráfico." sería incorrecto. Deberíamos sustituirlo por "Gráfico que muestra el aumento del uso de energía renovable en un 30% entre 2020 y 2024".

Imágenes decorativas

Imágenes que no aportan contenido significativo y que se utilizan solo con fines estéticos, como patrones de fondo o decoraciones. En estos casos, nuestra recomendación es dejar el texto alternativo vacío (alt="") para que los lectores de pantalla lo ignoren, evitando así distracciones innecesarias.

• Ejemplos: Un fondo floral utilizado en un sitio web, un icono que tiene un texto que lo identifica.

Imágenes de productos

Son esas imágenes que representan un producto, generalmente nos lo encontramos en una tienda online.

• Ejemplo: Imaginemos que en la imagen se muestra un zapato y su text alt es "Zapato." Esto no sería correcto, necesita más información acerca del producto como "Zapato deportivo azul con suela blanca, ideal para correr.".

Imágenes de personas

Son aquellas imágenes en las que se incluyen personas, ya sea en un contexto profesional o social.

• Ejemplo: En una imagen en la que aparece una mujer, nos encontramos con un texto alternativo que dice: "Foto de una mujer.", esto es "Mujer sonriente con gafas, sosteniendo un libro en una biblioteca."

Imágenes de contexto

Imágenes que ayudan a proporcionar contexto o ambiente a un texto.

• Ejemplo: "Playa." por "Playa llena de gente disfrutando del sol en un día de verano, con sombrillas de colores."

Buenas prácticas para redactar un texto alternativo efectivo

• Es recomendable utilizar entre 5 y 15 palabras para describir la imagen de manera clara y directa.
• No repitas información que ya está en el texto circundante. Esto es un fallo bastante común, si por ejemplo nos encontramos ante una imagen de una mujer con gafas, no necesitamos decir “Imagen de una mujer con gafas”, ya que tecnologías de asistencia como un lector de pantallas nos anunciará antes que se trata de una imagen.
• Incluye palabras clave cuando sea relevante. Si es apropiado para SEO, incluye términos relevantes que describan la imagen, pero ten en cuenta que también tiene que ser apropiado para su correcta lectura y comprensión en todas las tecnologías de apoyo.
• Piensa siempre en el propósito. Considera por qué la imagen está ahí y qué información debe transmitir a los usuarios. Si te preguntas ¿por qué está esto aquí? Conseguirás una buena descripción para tu alt text.

Evitar depender solo de elementos visuales

No todos los usuarios pueden percibir la información de la misma manera, por lo que es muy importante no depender de elementos visuales que proporcionen información.

Algunas personas pueden tener discapacidades visuales, como daltonismo o baja visión, lo que significa que el contenido debe ser comprensible incluso sin apoyo visual. Esto implica que el texto debe ser claro y no debe basarse únicamente en colores, formas o imágenes para transmitir información.

Buenas prácticas en elementos que solemos encontrar

• Placeholders: Los placeholders son textos temporales que aparecen en los campos de entrada, proporcionando una pista sobre qué tipo de información se espera. Podemos utilizarlos, pero estos deben complementar, no reemplazar, las etiquetas de los campos.
• Texto de ayuda: Son textos de apoyo que se muestran junto a un campo de entrada o un botón, proporcionando información adicional que puede ayudar a los usuarios a completar una tarea. Deben ser claros y directos, ofreciendo explicaciones sobre el formato, requisitos o contexto de la entrada.
• Mensajes de error: Cuando los usuarios cometen un error al completar un formulario o realizar una acción, es crucial que los mensajes de error sean claros y accesibles. Tenemos que asegurar que haya indicadores textuales que expliquen el problema.

Ejemplo: En un formulario donde se comunica el error mediante el cambio de color del campo, señalándose en rojo. Aquí hay que proporcionar un mensaje claro que describa el error, como "Por favor, ingresa un correo electrónico válido" o "Este campo es obligatorio".

• Gráficos, diagramas o infografía: Estos son elementos que deben contener alt text con descripciones que ofrezcan la interpretación necesaria. Los lectores de pantalla no pueden interpretar gráficos visuales, por lo que es necesario ofrecer una explicación del contenido o los datos que se muestran.

Por ejemplo: Tenemos un gráfico de barras. En lugar de decir solo "Gráfico de barras", deberíamos tener un alt text con: "Gráfico de barras que muestra el aumento del 25% en ventas de 2023 a 2024".

• Animaciones (informativas): Las animaciones que contienen una información valiosa para las personas, necesitan tener texto alternativo con una descripción que proporcione información sobre su contenido.

Por ejemplo: Imaginamos una animación de un gráfico que muestra el aumento de las temperaturas globales a lo largo de las últimas tres décadas, con líneas que se elevan y se colorean de rojo a medida que las temperaturas aumentan. Aquí, el texto alternativo podría ser: "Animación que muestra un gráfico de líneas representando el aumento de las temperaturas globales desde 1990 hasta 2020. La línea asciende continuamente, cambiando de color de azul a rojo, indicando un aumento significativo de la temperatura a lo largo de las tres décadas."

Conclusión

Las palabras tienen el poder de abrir puertas y crear conexiones, y si queremos que todos nos entiendan, debemos ser conscientes en cómo las usamos y a quién nos dirigimos. Al igual que Ana, quien se sintió perdida en una ciudad desconocida hasta que la ayuda de extraños la guió hacia su hotel, cada usuario merece un camino claro y accesible que le guíe en su viaje digital.

Cada término, cada frase, puede ser la clave que permita a alguien cumplir un objetivo como hacer la compra, pedir el padrón municipal, decirle a un amigo que llegará más tarde… Cosas cotidianas que si son más fáciles, harán que se sienta incluido y comprendido en que en un mundo donde la conexión es más valiosa que nunca.

Cada palabra cuenta.