Infografía: Las 9 reglas de Accessibilidad Visual
UX y Accesibilidad Visual: 9 reglas de oro para dominar la accesibilidad visual (infografía)
Nota: esta es la traducción al español de nuestro artículo publicado originalmente en inglés en UX & Visual Accessibility: 9 golden principles to master (Infographic)
Hace un tiempo que queríamos hacer un artículo sobre UX y accesibilidad visual. Para quienes desarrollamos nuestras tareas en el mundo de la experiencia de usuario (UX), y más concretamente en relación con la Investigación de Usuarios, es un asunto de importancia fundamental.
Y esta importancia viene dada por el hecho de que, a pesar de ser obligatorio en muchos países, a nadie parece importarle. Además, no son pocos los sitios gubernamentales de diferentes países que tienen insignias de accesibilidad y NO SON ACCESIBLES. Lo cual, según las leyes de esos países, es ilegal.
Y, sin embargo, la accesibilidad es muy secundaria para ellos, con o sin distintivo de accesibilidad.
Nota: si ve el acrónimo a11y, es una forma corta de escribir accesibilidad. Está formado por A + 11 (las letras entre el primer y el último carácter) + Y. O sea: A-ccessibilit-y
Dado que el uso del acrónimo a11y es muy común y generalizado, vale la pena señalarlo. Además, lo verás en este artículo.
Accesibilidad visual en el diseño UX
En primer lugar, debemos dejar claro que la accesibilidad no se refiere sólo a aspectos visuales. La accesibilidad puede ser para personas con discapacidad visual total o parcial (incluyendo daltonismo y presbicia). Pero también hay accesibilidad para discapacitados motores (especialmente miembros superiores), para personas sordas, para personas autistas, para personas con dislexia, accesibilidad para personas con problemas neurológicos, etc.
Pero en este caso particular, vamos a hablar sólo de accesibilidad visual, cómo hacer pruebas de accesibilidad y cómo diseñar interfaces inclusivas.
Para que el artículo sea más educativo y entretenido, hemos creado una infografía con ejemplos y referencias para dominar los 9 principios de oro de la accesibilidad visual de una manera fácil y sencilla.
Utiliza siempre texto sin formato
Afortunadamente, esta es una de las reglas más seguidas. Sin embargo, es la número uno ya que es la que causa más problemas.
Esta regla de oro de la accesibilidad visual podría expresarse así:
Utiliza texto plano sin formato y código HTML, minimiza o evita incluir información en imágenes o archivos descargables.
¿Por qué es necesario utilizar texto sin formato?
Una de las principales herramientas que utilizan las personas con discapacidad (no sólo las visuales, sino otras como las motoras) son los lectores de pantalla. Todos los sistemas operativos modernos incluyen lectores de pantalla, aunque existe un software especializado.
El problema es que si no usas texto sin formato y el texto es parte de una imagen, o un archivo para descargar, o incluso texto sin formato colocado artificialmente en una posición diferente usando CSS, los lectores de pantalla no pueden leer la información.
¿Quieres un buen ejemplo? En esta misma página, la Infografía de Principios de Accesibilidad Visual lanza una alerta, porque el contenido está en un PDF descargable. Por supuesto, estamos replicando y expandiendo el contenido de la infografía en este artículo.
Sin embargo, si no hubiéramos incluido el contenido en formato de texto plano (es decir, este artículo), tendríamos un grave error de accesibilidad.
Utiliza un diseño de página lógico y ordenado
Esta regla puede parecer un poco subjetiva (después de todo, ¿qué es “lógico”?). La regla es la siguiente:
El diseño debe ser lógico y fácil de seguir. NO desparrames el contenido por toda la página!
Lo que significa esta regla es que siempre que sea posible tratemos de seguir un sentido lógico, sin grandes saltos en el contenido.
Esto incluye respetar las jerarquías de contenido, que es una de las reglas básicas de UX y diseño. Pero también tener una estructura lógica.
Por ejemplo: si tenemos una imagen que ilustra los beneficios de una dieta equilibrada, y el texto aparece muy alejado de dicha imagen, o incluso cerca, pero con un encabezado que corta el texto, se hace muy difícil entender que ambos elementos están relacionados. Esto provoca una sobrecarga cognitiva que obliga a releer el contenido más de una vez.
Finalmente, hay una estructuración lógica de los encabezados. Si ponemos un encabezado H1, luego un H4, luego un párrafo, luego un encabezado H2, luego otro H1, y así sucesivamente, crearemos un sitio sin estructura. Esta falta de estructura puede ser visual (aunque manipulable con CSS para que no parezca tal).
¿Cómo sabemos si la estructura es lógica?
Como todo en UX, necesitamos hacer pruebas de usuario. En este caso, pruebas de accesibilidad. Existen muchas herramientas automatizadas, pero recomendamos contratar a un experto en accesibilidad, o al menos intenta realizar pruebas de accesibilidad con un lector de pantalla. Recuerda que los lectores de pantalla son sólo una de las muchas tecnologías de asistencia que existen, por lo que si deseas asegurarte de que estás en el camino seguro, contrata una empresa de UX con conocimientos.
¿Qué sucede si no mantenemos una estructura de contenido lógica?
La respuesta a esta pregunta es bastante obvia: nuestros usuarios estarán muy confundidos y eventualmente abandonarán nuestro sitio.
Pero la consideración fundamental es que afecta a los lectores de pantalla y dificulta que los usuarios sigan el texto lineal.
Proporciona navegación por teclado
Otra regla de oro de la accesibilidad visual (y podríamos decir la de la IU en general):
Crea tu página para que los usuarios puedan navegar por ella con sus teclados. ¡NO confíes sólo en el mouse!
Muchos usuarios tienen problemas para manejar un mouse. O simplemente, ¡su mouse se rompió y no tienen otro para reemplazarlo!
Los sistemas informáticos fueron creados para ser operados por un teclado. Las interfaces gráficas requieren el uso de dispositivos como el mouse, trackpads y otros. Pero siempre debemos verificar que nuestro sitio se pueda utilizar sin necesidad de un dispositivo adicional que no sea el teclado. Además: en el caso de los lectores de pantalla, la página debe leerse incluso sin teclado, solo mediante comandos verbales.
Diseña interfaces de usuario para lectores de pantalla
Igual que los puntos anteriores. A estas alturas, habrás notado que los lectores de pantalla son fundamentales para la accesibilidad visual (y nuevamente, para todo el mundo). Hay otras tecnologías de asistencia que puedes considerar, pero este es el mínimo a considerar. Si fallas en esto, fallarás en todas las demás tecnologías.
Esta regla completa se puede enunciar de la siguiente manera:
Prepara tu página para lectores de pantalla. Utiliza etiquetas "alt" para las imágenes, títulos para enlaces y HTML5 adecuado para cada elemento
Si bien los lectores de pantalla son increíbles, son un poco “tontos”. Esto significa que ellos no ven la página de la misma forma que tú. Necesita decirle al lector de pantalla “oye, este es un elemento, y este es otro, y esto debe comportarse de esta manera, y esto debe comportarse de esa manera”. Puede parecer mucho trabajo, pero es increíblemente fácil.
En primer lugar, la accesibilidad requiere un poco de trabajo (no mucho) y bastante conocimiento sobre el tema. Para empezar, es importante que conozcamos perfectamente las reglas de HTML5. Pero también los de WCAG y ARIA (Accessible Rich Internet Applications)
ARIA es algo que vamos a ver muchas veces, tanto en accesibilidad visual como en accesibilidad para personas con discapacidad motora. La definición de ARIA es la siguiente:
(…) Es un conjunto de atributos que definen formas de hacer que el contenido web y las aplicaciones web (especialmente aquellas desarrolladas con JavaScript) sean más accesibles para las personas con discapacidad.
Complementa el HTML para que las interacciones y los widgets que se usan comúnmente en las aplicaciones se puedan transferir a las tecnologías de asistencia cuando no existe un mecanismo. Por ejemplo, ARIA permite puntos de referencia de navegación accesibles en HTML4, widgets de JavaScript, sugerencias de formulario y mensajes de error, actualizaciones de contenido en vivo y más.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
La forma más sencilla de crear un sitio web o una interfaz de usuario accesibles es tomar el código HTML5 y hacerlo lineal, respetando las jerarquías del texto del encabezado y del contenido.
Luego agrega etiquetas “alt” a las imágenes. Estas etiquetas deben ser descriptivas de la imagen. Aunque técnicamente el uso de etiquetas alt es obligatorio en HTML5, pueden estar vacías y el código seguirá siendo válido. Pero si la imagen es importante, debemos especificar claramente el contenido de la imagen.
Finalmente, debemos considerar elementos como los menús. Los menús son muy particulares y tienen varias condiciones que cumplir para ser accesibles. Y aquí ARIA es fundamental, ya que define ciertos roles para los elementos. Estos roles también deben agregarse en cualquier tipo de elemento que no sea texto. Por ejemplo botones, acordeones, pestañas, elementos interactivos e incluso algunos enlaces que tienen comportamientos especiales.
Los menús son un excelente ejemplo para comprender y conceptualizar en profundidad la implementación de la accesibilidad. Es el principio precedente justo por encima de éste, vimos que debemos diseñar sitios web para ser utilizados sólo con el teclado. En este enlace a las pautas de accesibilidad de W3 veremos cómo crear menús que usen ARIA, y también qué comandos de teclado deben usar.
¿Qué pasaría si no respetamos esta regla?
Básicamente, el sitio sería incomprensible para un lector de pantalla. Por lo tanto, para el usuario. En algunos casos, el lector de pantalla puede parecer que tiene un brote psicótico.
Para aquellos que quieran saber cómo se siente, intenten usar un lector de pantalla en una página sin accesibilidad. Puedes crear deliberadamente una página muy mala para probar. Es un experimento muy interesante y nos ayuda a empatizar con los usuarios.
Verifica que el contraste y tamaño de fuente sean accesibles
Probablemente el más ignorado de todos estos principios de accesibilidad. Un principio muy fácil de seguir, pero completamente ignorado por la mayoría de diseñadores web y de UI.
Podemos enunciar esta regla así:
Utiliza texto que tenga buen contraste y tamaños de fuente legibles. Para el cumplimiento de AA se necesita una relación de contraste de 4.5: 1 y 7: 1 para AAA.
Por alguna extraña razón, estas “proporciones” asustan a la mayoría de los diseñadores web, que piensan que es imposible o alguna fórmula matemática arcana. En el caso de muchos diseñadores de IU, el caso es aún peor: saben que es fácil, saben que es simple, pero eligen conscientemente ignorarlo. (Cualquier diseñador de UI sabe que la accesibilidad es imprescindible en UXD y UID).
Lo importante a tener en cuenta es que el texto tenga un buen contraste con el fondo. Esto se logra con el color y, a veces, con el tamaño. Esto significa que el color no es una condición suficiente, sino que el tamaño importa.
La buena noticia es que realizar pruebas de usabilidad para este principio de accesibilidad es realmente muy simple. Simplemente visita uno de los muchos sitios de accesibilidad de colores y tamaños (intenta una búsqueda en Google de “Contrast Checker” o simplemente visita este sitio).
¿Por qué los diseñadores web y de IU no aplican este principio?
Por supuesto que no podemos hablar por todos. En el caso de los diseñadores web, es posible que simplemente desconozcan su existencia.
En el caso de los diseñadores de UI, suele deberse a cuestiones estéticas más ligadas a visiones artísticas que a experiencias de usuario.
Utiliza siempre el tipo de letra adecuado en tus diseños web
Este principio se respeta en general, aunque no siempre. Este principio se puede resumir de la siguiente manera:
Utilice el tipo de letra adecuado. NO subrayes, pongas en mayúscula ni utilices mayúsculas cursiva.
Aunque pueda parecer una tontería, no respetar este principio dificulta la lectura para las personas con algún tipo de discapacidad visual, pero mucho más para las personas con discapacidades neurológicas (incluida la dislexia).
Además, ¡definitivamente se ve mal!
No confíes solo en el color
A11y en su máxima expresión. Nunca debemos confiar en que un color transmitirá un mensaje. Hay muchas razones por las que hacerlo terminará en fracaso.
Un ejemplo perfecto es usar el color rojo para transmitir “error”, que es una convención que la mayoría conoce… en Occidente. ¡Para las civilizaciones orientales, el rojo es el color de la suerte! Entonces, si una persona que tiene estos valores culturales ve el color rojo, pensará que es algo bueno.
Pero no estamos hablando de accesibilidad cultural o antropología de la experiencia del usuario (nota para mí mismo: gran tema para un artículo futuro). Estamos hablando de accesibilidad para personas con discapacidad visual.
¿Y sabes qué? Ese hermoso mensaje en rojo no será visto por quienes padecen algunas formas de daltonismo parcial como la protanopía, la protanomalía o la deuteranomalía. O daltonismo completo, como la acromatopsia cerebral (también conocida como agnosia del color) o la monocromacia.
Y lo mismo ocurre con los colores verdes. Y el azul. Y cualquier otro color, ya que estamos en eso.
Atención: esto no significa que no podamos utilizar el color para transmitir mensajes. Un botón o un mensaje en rojo captará inmediatamente nuestra atención, que podremos utilizar de diferentes formas.
Pero esto en sí mismo implica que nunca debemos confiar sólo en el color. Porque llamar la atención no significa que sea negativo. También se puede utilizar simplemente para crear una CTA (llamada a la acción).
Lo importante de este principio es: usa color y TAMBIÉN texto descriptivo. O al menos un icono inequívoco que no cree confusión en la experiencia del usuario sobre la capacidad del elemento.
Utiliza elementos procesables descriptivos
Esto no se corresponde tanto con la accesibilidad visual como con la experiencia del usuario en torno a la afordancia y las expectativas del usuario sobre eventos futuros.
Básicamente, este principio dice:
Los enlaces y botones deben ser descriptivos. Evita el uso de descripciones vagas como "Haga clic aquí".
Lo que esto significa es que al generar descripciones vagas, el usuario pierde el control de la experiencia (esto se llama “locus de control”, consulte las 8 reglas de oro del diseño de interfaz de usuario de Shneidermann).
Esto es lo que sucede en la mente de un usuario: ¿Qué pasará si hago clic en el elemento? ¿Por qué debería hacerlo? ¿Estoy haciendo clic en el enlace o botón correcto?
Estas preguntas generan lo que se conoce como disonancia cognitiva, o más comúnmente lo que en marketing y experiencia de usuario se conoce como “fricción”.
Como podemos ver, este principio no es muy específico de la accesibilidad visual, pero está más relacionado con la usabilidad o la accesibilidad psicológica o neurológica. Sin embargo, dado que la percepción del elemento es visual, a menudo se incluye como parte de estos principios visuales.
Beneficios adicionales de describir eventos futuros
Este principio es muy utilizado en marketing y branding existen innumerables estudios sobre el uso de botones o enlaces descriptivos, por lo que no voy a extenderme sobre el tema.
Sin embargo, una de las mayores ventajas que obtendremos al utilizar este principio es la posibilidad de transmitir un mensaje o llamado a la acción al usuario. Por ejemplo, “¡Obtenga su libro gratis ahora!” es mucho más eficaz que “Haga clic aquí” o “Enviar”. O en otras palabras: un esfuerzo muy pequeño generará un ROI (retorno de la inversión) mucho mayor.
Y por supuesto, el mencionado “locus de control” que nos permitirá experiencias de usuario mucho más precisas y seguras. Un botón o enlace que describa exactamente lo que sucederá cuando se active evitará muchos errores.
Nota: lamentablemente, este principio es el más utilizado para engañar a las personas, lo que en UX se conoce como “patrones oscuros”. En este caso particular, botones o enlaces que describen eventos futuros falsos o engañosos.
Permite a los usuarios hacer zoom
Este principio es la solución a un problema que ocurre principalmente en dispositivos móviles. No es común encontrarlo en el escritorio, aunque no es completamente imposible.
Este principio dice:
Permite que los usuarios amplíen el contenido. Cuando se amplía una página, debe mantenerse su estructura lineal.
Si tienes problemas de visión (incluso leves, como la presbicia precoz), seguro que en algún momento tuviste que hacer zoom sobre un elemento para agrandarlo y poder verlo correctamente.
En primera instancia, debemos partir de que si debemos hacer esto es porque el elemento (ergo, la web o aplicación móvil) no es accesible. Eso sería suficiente para el “Salón de la Vergüenza”.
Pero es aún peor si el sitio web o la aplicación móvil bloquea el zoom de forma intencionada, ya que representa una intención de impedir que el usuario acceda al contenido. Literalmente un ejemplo de “negación de accesibilidad”.
Nuevamente, esto es mucho más común en las aplicaciones móviles que en los sitios web de escritorio. Una de las razones dadas por quienes hacen esto (de hecho, la más común) es que necesitan negar el zoom para mantener la integridad visual de la aplicación. Quizás por eso, dentro de las aplicaciones móviles, es mucho más común en los juegos. Dentro de la industria de la tecnología, la industria de los juegos es famosa por su falta de apego a la accesibilidad y la usabilidad. (Por cierto, la industria de los juegos móviles también es conocida por su amor por los patrones oscuros y la ética dudosa).
Sin embargo, en las versiones de escritorio no hay razón para negar el zoom. En la mayoría de los casos, esto sucede simplemente debido a la falta de experiencia como desarrollador. Sería muy extraño encontrar un sitio donde la accesibilidad visual proporcionada por el zoom se niega por alguna razón real y lógica.
Conclusión: la accesibilidad visual es imprescindible
La accesibilidad visual no es una carga, ni representa un mayor tiempo de desarrollo, ni implica un crecimiento de la deuda de UX.
Tampoco es una limosna o concesión al usuario.
Todo lo contrario: es una poderosa herramienta que nos permite empatizar con los usuarios y generar experiencias más ricas y humanas. Una herramienta que nos permite generar más beneficio e interacción. Es una herramienta de participación del usuario, ideal para marketing y experiencia del cliente (CX).
Pero también es una herramienta que evitará que perdamos nuestro negocio, o al menos grandes sumas de dinero. Las demandas por incumplimiento de las leyes de accesibilidad aumentan cada año en todo el mundo.
- En EE. UU. crecieron a más de 11.000 ensayos en 2019 (un 8,8% más que el año anterior).
- En Canadá, las multas ascienden a $15,000 (más el costo de rehacer el sitio).
- En Europa se pagan multas de varios valores y el sitio está bloqueado hasta que no cumpla al menos con las directivas WCAG Nivel AA.
En resumen:
La accesibilidad es una herramienta valiosa. Pero también es una obligación moral y ética.
Recursos y Herramientas de Accesibilidad Visual
Web Content Accessibility Guidelines
W3C Web Accessibility Initiative (WAI)
Contrast Ratio Easy Calculator
UBKAccessibilityKit by UBank for iOS
Axe accessibility testing engine
Accessibility in Official UK Sites
Administrador UXpañol.com
Diseñador Gráfico y UX Evangelist
Experto en Experiencia de Usuario, habiendo trabajado para distintas empresas Fortune 500, gobiernos, personalidades, etc
