UX Writing y Accesibilidad
En este post encontrarás toda la información para escribir contenido más usable y accesible siguiendo los criterios de la WCAG que corresponden al nivel A de conformidad.
La accesibilidad es un trabajo de equipo y todos, diseñadores, programadores, creadores de contenido tenemos que lograr un mundo digital más accesible. En esta oportunidad quiero contarte de qué debería ocuparse un UX writing con relación a las pautas y criterios de accesibilidad. En el caso de que no tengas un UX writer entonces será trabajo del UX.
El UX Writing nos ayuda a lograr que nuestras interfaces sean más simples, útiles, concisas y entendibles, por eso es de suma importancia tener en cuenta cuando hablamos de accesibilidad digital. Escribir mejores textos beneficia a todas las personas, no sólo a los que tienen discapacidad.
Si llegaste de casualidad y no sabes que es la WCAG te recomiendo leer los básicos de accesibilidad:
Que criterios seguiremos
En esta lista se encuentran algunos de los criterios recomendados por la WCAG en criterios para escribir y otros que me parecen pertinentes a los UX writers:
- Escribir alternativas de texto que sean significativas (1.1.1 Contenido no textual)
- No asumir las capacidades de los usuarios(1.3.3 Características sensoriales)
- Proporcionar título de página únicos e informativos (2.4.2 Titulado de páginas)
- Hacer que el texto en el enlace sea significativo (2.4.4 Propósito de los enlaces en contexto)
- Use encabezados para transmitir significado y estructura ( 2.4.6 Encabezados y etiquetas, 2.4.10 Títulos de sección y por último 1.3.1 Información y Relaciones) Este no se los desarrollo en este articulo por que no son de nivel A pero los pueden buscar en las WCAG.
- Proporcionar instrucciones claras (3.3.1 Identificación de errores) (3.3.2 Etiquetas o instrucciones)
- Mantenga el contenido claro y conciso (3.1.5 Nivel de lectura, 3.1.3 Palabras inusuales y por último 3.1.4 Abreviaturas) Este no se los desarrollo en este articulo por que no son de nivel A pero los pueden buscar en las WCAG.
Escribir alternativas de texto que sean significativas
1.1.1 Contenido no textual (Nivel A): Todo el contenido, que no es de texto, que se presenta al usuario tiene una alternativa de texto con un propósito equivalente.
Este texto es el que describe a los lectores de pantalla: imágenes, iconos y logos. Los mismos deben ser escritos en el mejor de los casos por un UX writer quien conoce a las personas y el propósito de los elementos que se colocan en el producto o interfaz. Para escribir buenos textos alternativos ya hicimos un post junto a Susana Pallero y pueden leerlo completo a continuación
No asumir las capacidades de los usuarios
1.3.3 Características sensoriales (Nivel A): las instrucciones proporcionadas para comprender y operar el contenido no se basan únicamente en las características sensoriales de componentes como la forma, el tamaño, la ubicación visual, la orientación o el sonido.
Para cumplir con este criterio lo clave es presentar el contenido de una forma que sea percibida por todas las personas.
Lo principal es hacerte algunas preguntas
- ¿Cómo lo percibe alguien que usa un lector de pantalla?
- ¿Cómo lo percibe alguien que está usando otro tipo de dispositivo?
- ¿Cómo lo usaría alguien que no usa el mouse o las manos para navegar?
Trata de no dar referencias visuales como por ejemplo, “botón redondo” o “botón a la derecha” porque no todas las personas van a poder percibir tu referencia.
Cuando escribas para una interfaz y quieras indicar la posición de un elemento asegurate que este no cambia según el dispositivo que esté usando el usuario. Algo que me pasa cuando escribo para medium es que cuando referencio una imagen no puedo decir “la imagen del costado”. Si estoy en la compu quizás visualmente el usuario pueda entender la referencia, pero si alguien lee mi nota en un celular la imagen toma el 100 % de la pantalla y deja de estar al costado, en ese caso mi referencia deja de tener sentido. Lo mismo pasa con un usuario con lector de pantalla ya que la imagen se leerá en el momento que el código lo haya colocado.
Proporcionar título de página únicos e informativos
2.4.2 Título de la página (Nivel A): las páginas web tienen títulos que describen el tema o el propósito
Cada página debe ayudar con su título a decirle al usuario donde se encuentra dentro del sitio y la app. Cada título tiene que tener un nombre descriptivo. Esto beneficia a todas las personas usuarias ya que les permite identificar rápidamente dónde están y qué se van a encontrar ahí.
Ayuda a las personas con discapacidades cognitivas, memoria a corto plazo y discapacidades de lectura por que lograran identificar en donde se encuentran por el contenido del título.
Algunas buenas prácticas para escribir títulos según google:
- Describir con precisión el contenido de la página
- Crear títulos únicos para cada página
- Utilizar títulos breves pero descriptivos
- Redactar textos fáciles de leer
- Organizar los temas claramente
- Optimizar el contenido para los usuarios, no para los buscadores
Hay muchas otras razones, pero les dejo el post de Marly Ortiz de Títulos de página para que lo lean. Marly es especialista en accesibilidad de colombia.
Una recomendación que dejaria al respecto es el orden en el que ponemos la información es primero la informacion especifica y luego la general, ya que si varias paginas empiezan con el mismo nombre le haremos perder tiempo a los usuarios de lector de pantalla y para un usuario visual sera dificil diferenciar lo que busca a primera vista
¿Entonces? Especifica+ General
Hacer que el texto en el enlace sea significativo
2.4.4 Propósito del enlace (en contexto)(Nivel A): El propósito de cada enlace se puede determinar a partir del texto del enlace o del texto del enlace junto con su contexto de enlace, determinado mediante programación, excepto cuando el propósito del enlace sea ambiguo para los usuarios en general.
El objetivo del título del enlace es ayudar a los usuarios a predecir lo que sucederá si siguen un enlace. Cada enlace debe estar descrito de manera tal que brinde ayuda al usuario para decidir si entrar o no. Es importante que siempre sea auto-explicativo, sin necesidad de dar contexto adicional.
Son buenas prácticas:
- Links que llevan al mismo lugar, tienen el mismo nombre
- Links que llevan a distintos lugares, tienen distintos nombres
- El link describe a dónde llevará
La idea de describir los enlaces es para evitar perderse en la navegación y que las personas no gasten esfuerzo para ver contenido que no es relevante.
Por ejemplo, que las personas con discapacidad motriz puedan omitir enlaces que no les interesan, evitando las pulsaciones de teclas necesarias para visitar el contenido de referencia, y luego volver al contenido actual; que las personas con discapacidades cognitivas, que pueden desorientarse por los múltiples medios de navegación y que las personas con discapacidades visuales puedan determinar el propósito antes de realmente seleccionarlo.
Hay una nota de Norman Groups respecto a esto: Las 4 “eses” para mejorar links (obvio que en español no son s)
- Específico: nada de “click aqui” el link debe describirse
- Sincero: que sea verdad
- Sustancial: que tenga sentido
- Sucinto : que sea corto
Les dejo una imagen donde pueden observar como todos los links se les va a leer al usuario de lector de pantalla. Mientras mas explicativos los links mejor para el usuario ya que sera más facil moverse dentro del sitio.
Proporcionar instrucciones claras
3.3.2 Etiquetas o instrucciones(Nivel A): Se proporcionan etiquetas o instrucciones cuando el contenido requiere la entrada del usuario.
Asegúrese de que las instrucciones sean claras, fáciles de entender y evite el lenguaje técnico innecesario. Siempre que sea posible identifique los requisitos de entrada, como los formatos de fecha o cómo completar un número telefónico.
3.3.1 Identificación del error(Nivel A): si se detecta automáticamente un error de input o ingreso de datos, se identifica el elemento que tiene el error y el error se describe al usuario en forma de texto.
Es importante que indiquemos a las personas usuarias cuando un error se ha producido en la interfaz, que puedan identificar el error y entender cómo resolverlo. Los mensajes de error deben ser lo más específicos posible.
Cuando de formularios se trata, es importante que volvamos a mostrar los campos en error y que el usuario pueda percibir que se ha producido el error.
Un mal ejemplo es cuando el campo solo se marca en rojo, sin ninguna otra información que el color para determinar que se ha producido un error, un buen ejemplo sería además del color agregar un texto que nos posibilite entender qué campos quedaron en error y cómo completarlo.
Las personas usuarias de lectores de pantalla, por ejemplo, no sabrán que hubo un error hasta que encuentren uno de los textos que indique textualmente el error y es posible que terminen pensando que el formulario no funciona, cuando en realidad lo que sucede es que el campo de error no está bien determinado y el mensaje de error no ha sido comunicado eficientemente. Como UX es nuestro deber comunicar los errores pero es importante que contemos con el apoyo del equipo de desarrollo para que todo sea más fácil para todas las personas.
Ejemplos de instrucciones para errores:
- El nombre de usuario ‘anime’ ya está en uso.
- La contraseña debe incluir al menos un número.
Conclusión
No es difícil aplicar los criterios de accesibilidad a ux writing ya que si analizamos la lista estamos hablando de buena usabilidad y está casi implícito en la forma de escribir de los UX writers. Gracias UX Writers por existir.
Por último y si llegaste hasta acá, quiero armar una segunda parte para UX writer de cómo escribir para lectores de pantalla ¿Qué te gustaría aprender?
