¿Si es accesible, entonces no será bello…? ¿Es así?

¿Cuántas veces habremos escuchado esta frase, o nos la habrán preguntado? En alguna reunión con clientes, asesorando a personas que se animan a comenzar este camino, o con mis colegas que se introducen en el mundo de la accesibilidad.

Frente a la sugerencia de escribir este primer artículo, me surgió poder compartir algunas reflexiones que espero ustedes acompañen. 

Para comenzar voy a citar algunas premisas (quizás repetitivas para algunos):

Realizar un producto accesible no es solo poder hacer que lo puedan disfrutar sin problemas aquellos que tienen una disminución de su visión. También es para quien necesita navegar en un producto digital y pueda tener una discapacidad auditiva, no pueda realizar algunos movimientos o acciones, presente una discapacidad cognitiva, etc. Además, beneficia a aquellos adultos mayores de entre 64 y 74 años que utilizan internet y hoy representan casi al 20% de la población. 

Los recursos que nos da la accesibilidad permite que todos los usuarios podamos acceder al contenido digital, sitios web, aplicaciones móviles o cualquier otro tipo de producto digital; permitiendo de esta manera que todos tengamos derecho a acceder a la información.

La accesibilidad digital desempeña un papel fundamental en la creación de una sociedad más inclusiva y equitativa, donde todas las personas (independientemente de sus capacidades), tienen igualdad de acceso a la información y a las oportunidades en línea. No solo eliminando barreras, sino también fortaleciendo a las organizaciones, instituciones y empresas a fomentar la diversidad, contribuyendo a un mundo más igualitario y accesible para todos.

Porque sin accesibilidad no hay inclusión.

Así es, cuando un producto es accesible todos nos beneficiamos. No solo es “mejor” para el usuario que tenga alguna discapacidad crónica. También hay que considerar que muchos usuarios pueden sufrir de un impedimento (como una fractura de un brazo, en un accidente), o una discapacidad situacional (un ambiente ruidoso o demasiado soleado, una conectividad pobre).

Es por ello que un producto accesible es más utilizable y fácil de navegar para todas las personas (porque tiene textos claros, información organizada de forma jerárquica, comentarios específicos, etc.). Esto proporciona una experiencia de usuario más satisfactoria, y por lo tanto la empresa y su imagen también se benefician.

Garantizar que un producto sea accesible es una cuestión de empatía y respeto hacia sus usuarios.

¿Pero puede un producto accesible ser agradable a la vista?

¡Claro que sí! Y no debería ser un obstáculo a la hora de cumplir con las normativas y con la creatividad en el diseño.

Repasemos algunos aspectos en los que hay que centrarse para que un sitio sea accesible y bello:

• Tipografía
• Color
• Imágenes 
• Multimedia
• Texto

A continuación, vamos a entrar un poco más en detalle en algunos de ellos. En ningún caso el tema es exhaustivo, pero espero que puedan ser un punto de partida útil. 

La tipografía: clave en el diseño accesible para comunicar

Cuando hablamos de crear un producto  accesible y bello, la tipografía es uno de los aspectos más críticos a considerar. La tipografía juega un papel fundamental en la accesibilidad de cualquier diseño, ya sea físico o digital.

Su función básica es comunicar la información de manera efectiva. Para lograr esto, es necesario determinar cuidadosamente las relaciones entre los elementos que configuran el mensaje. Estas relaciones se establecen considerando criterios funcionales (legibilidad y claridad), utilitarios (facilidad de uso y comprensión) y estéticos (atractivo visual y armonía en el diseño).

Una tipografía bien elegida y utilizada puede facilitar la lectura y comprensión de la información, mientras que una tipografía inadecuada puede crear barreras para las personas con dificultades visuales o de lectura.

Para garantizar que nuestra tipografía sea accesible, debemos tener en cuenta las siguientes buenas prácticas:

• Establecer idealmente a 16px, y nunca menos de 12px. Esto asegura que el texto sea legible para la mayoría de los usuarios.
• Elegir un espacio mínimo de 1,5 veces el tamaño del texto. Un espaciado adecuado mejora la legibilidad y reduce la fatiga visual.
• Evitar columnas estrechas y líneas de texto demasiado largas. Lo ideal es una línea de aproximadamente 70-80 caracteres, lo que facilita el seguimiento del texto. 
• Evitar el texto justificado, ya que puede crear espacios irregulares entre palabras que dificultan la lectura. 
• Escribir párrafos cortos para mejorar la comprensión y facilitar la lectura en pantalla. 
• Evitar textos en cursiva, subrayado o todo en mayúsculas, ya que pueden ser difíciles de leer para algunas personas.
• Permitir al usuario hacer un zoom de la página (hasta el 400%) para poder leer mejor el texto, lo que es especialmente útil para personas con baja visión.

¿Qué tipografía utilizar?

Según Bringhurst (2008) cita que se debe “elegir y utilizar los tipos con sensibilidad e inteligencia” y por más sencilla que parezcan estas palabras se deben traducir a encabezados, textos, párrafos, sin olvidarnos qué estamos comunicando un mensaje.

Al elegir una tipografía accesible, es importante considerar tanto su legibilidad como su distinción. Una buena tipografía debe ser fácil de leer y sus caracteres deben ser claramente diferenciables entre sí. 

Para conseguir estos dos aspectos claves, debes de prestar atención a algunos aspectos:

• La tipografía debe ser fácil de leer en diferentes tamaños y formatos.
• Verifica que las letras y números no se confundan fácilmente entre sí. Presta especial atención a los siguientes pares de caracteres:
  • q y p
  • d y b
  • 0 (cero) y O (letra O mayúscula)
  • 1 (uno) y I (letra I mayúscula)
  • r y n juntas (que podrían parecer una m)
• Elige una tipografía que mantenga su claridad y distinción en diferentes pesos (normal, negrita) y estilos (regular, itálica).

Tipografías recomendadas para la accesibilidad

Algunas fuentes con serifas recomendadas por su alta legibilidad para imprimir son: Tinos, Garamond, Baskerville, Merriweather.

Si hablamos de tipografías sin serifa para pantallas, podemos recomendar las siguientes: Roboto, Lato, Open Sans, Montserrat

Podemos destacar algunas tipografías que son diseñadas con finalidades específicas, estos dos ejemplos que mencionamos a continuación muestran cómo sus caracteres fueron diseñados para dar una solución puntual a la necesidad del usuario.

En el caso de  OpenDyslexic(abre enlace en nueva pestaña) esta tipografía esta especialmente diseñada para ser más legible y ayudar a reducir la confusión visual que experimentan las personas con dislexia. Esto se consigue gracias a que tiene una base más ancha y pesada, lo que hace que cada letra sea más distintiva y fácil de distinguir.

La tipografía Atkinson Hyperlegible(abre enlace en nueva pestaña) fue diseñada especialmente para personas con discapacidad visual. Tiene un diseño de letra con contrastes claros y una forma simple, lo que hace que su lectura sea más ágil en comparación con otras tipografías con un diseño más complejo. Además, tiene un espacio entre las letras más grande para ayudar a que los caracteres sean fáciles de identificar. Esta fuente es la recomendada por el Instituto Braille(abre enlace en nueva pestaña) para personas con discapacidad visual.

También existen las fuentes tipográficas de código abierto que ofrecen ventajas significativas sobre las de código cerrado, ya que ofrecen personalización y adaptación a las necesidades del diseño.

Otro ejemplo, para citar, es Inclusive Sans(abre enlace en nueva pestaña), diseñada por Olivia King(abre enlace en nueva pestaña). Una fuente accesible, inspirada en la personalidad de los neogrotescos contemporáneos, al tiempo que incorpora características que la hace legible para todos los usos.

Herramientas para elegir tipografías

La selección de tipografías accesibles puede parecer una tarea desafiante, pero afortunadamente existen herramientas específicas que pueden facilitar este proceso.

Estas herramientas nos ayudan a evaluar y seleccionar fuentes que cumplan con los criterios de accesibilidad, asegurando que nuestro contenido sea legible para la mayor cantidad de usuarios posible. A continuación, te presento tres herramientas útiles para esta tarea:

WebAIM Contrast Checker(abre enlace en nueva pestaña) permite comprobar el contraste entre el texto y el fondo de tu diseño.

FontTester(abre enlace en nueva pestaña) permite probar diferentes tipografías en tu navegador web y ver cómo se ven en diferentes dispositivos.

Google Fonts(abre enlace en nueva pestaña) ofrece una amplia selección de tipografías gratuitas y de código abierto, muchas de las cuales están diseñadas para ser accesibles.

En definitiva, lo importante aquí es que la tipografía sea las más accesibles, considerando la legibilidad y lecturabilidad.

Color, ese elemento tan difícil de manejar

El color es una pieza clave dentro de nuestro proyecto y es quien le dará vida a este. Lo primero que nos viene a la mente cuando pensamos en el aspecto estético de un producto y la accesibilidad es una paleta accesible, o sea que garantice un contraste suficiente entre texto (u otros elementos gráficos) y el fondo, pero que también sea adecuado para las necesidades de las personas con daltonismo. 

Sabemos que debemos cumplir con los criterios de WCAG 2.2 donde se menciona que ha de cumplir con un contraste mínimo (AA) con fondo de pantalla: más de 4.5:1 para un texto bajo a 24px, 3:1 para un texto mayor a 24px, texto en negrita por encima de los 19px, iconos y otros elementos de la interfaz de usuario. Existen varias herramientas que ayudan en la elección de combinaciones con suficiente contraste y nos ayudan a entender si el contraste es respetado entre los elementos de nuestro producto.

Mencionaremos algunas herramientas que se utilizan para realizar el chequeo. 

Contrast Checker A11y - Color Contrast Checker(abre enlace en nueva pestaña)

Contrast for Figma(abre enlace en nueva pestaña)

Es un plugin de Figma que te permite ver en tu hoja de prototipado si los colores utilizados que estas utilizando pasan o no el ratio de contraste mínimo.

Al final, el color puede ser un dolor de cabeza, pero con un poco de atención y las herramientas adecuadas, podemos crear diseños que no solo sean bellos, sino también accesibles para todos. 

Imágenes

Hablemos de las imágenes, esas piezas fundamentales de nuestro producto. Casi siempre requerirán un texto alternativo, ¿el motivo? para que los lectores de pantalla puedan describirlas.

Pero cuidado, no se trata de poner cualquier cosa como texto alternativo. La clave está en hacerlo correctamente. 

Algunas sugerencias breves:

• Si la imagen es solo decorativa y no contiene información importante, no debes agregar texto alternativo.
• Ser breve en la descripción, se recomienda un máximo de 100 caracteres.
• Describe de manera precisa la imagen sin ahondar en detalles innecesarios.
• Ser conciso, utiliza palabras de uso cotidiano y fácil comprensión.
• Menciona a las personas que aparecen en la foto, especialmente si son personas públicas o personas relevantes para el contexto de la imagen.

Multimedia

Un producto accesible puede incluir vídeos, audios y objetos animados. Los contenidos audiovisuales deben cumplir con las directrices WCAG 2.2, algunas de ellas son:

• El usuario siempre pueda pausar y reproducir el video. 
• Deben estar subtitulados (con colores adecuados y con suficiente contraste)
• Con agregado de audiodescripción (informa de cambios de escena, de acciones clave, de la escenografía y apariencia de los personajes, y está especialmente pensada para personas ciegas).

Contenido textual del producto

El contenido de tu producto es fundamental, por ello debemos procurar que los textos sean comprensibles para el mayor número de personas posible, con un lenguaje adecuado para el lector, sin tecnicismos, abreviaturas o palabras extranjeras.

El texto debe transmitir un mensaje claro y limitar el número de ideas. La información debe ser interesante y relevante para el usuario que la recibe.

El contenido debe estar organizado, seguir un relato lógico (ir de lo grande a lo pequeño) y cronológico.

Es importante para el lector percibir que el texto tiene un orden y una estructura interna, ya que el procesamiento de los contenidos será más sencillo.

De esta manera, favorecemos a todo aquel que esté leyendo y pueda tener prisa o cansancio, pero sobre todo beneficiará a personas con discapacidad cognitiva, con un bajo nivel educativo y a aquellas que no sean hablantes nativos.

Conclusión

No existen productos digitales 100% accesibles, sino, más bien productos más accesibles o menos accesibles que otros. Esto va variando en el tiempo, dentro del mismo producto aún cuando se hayan implementado buenos procesos. Los productos son dinámicos, están en constante evolución.

Es por ello que nunca habrá un producto 100% accesible, y debemos realizar evaluaciones constantemente.

¡Pero como digo siempre, lo principal es dar el primer paso! Y no hay mejor amiga de la accesibilidad que la acción, como comentan mis mentoras Susana Pallero y Pipi Márquez. 

Agradecimiento especial por su revisión a Silvia Andrea Cristian Ladaga(abre enlace en nueva pestaña)

Fuentes

• Guía de accesibilidad web WCAG 2.1(abre enlace en nueva pestaña)
• Wikipedia. (19 de octubre de 2020). Fuente tipográfica(abre enlace en nueva pestaña).
• Wikipedia. (11 de noviembre, 2023). Estatus legal de las fuentes digitales(abre enlace en nueva pestaña).
• Ladaga, S.A.C. y  Rangel, L. (Ed.) (2022).  Accesibilidad: comunicación y educación para todas las personas(abre enlace en nueva pestaña). Capítulo 3 y 5. Colección Transmedia XXI. Barcelona: LMI. Universitat de Barcelona.
• Extracto del libro Libro: Metele más diversidad: reflexiones sobre diseño inclusivo / Sergio Braguinsky.[et al.]; compilación de Mariana Pittaluga; prólogo de María del Valle Ledesma. - 1a ed. - Florida: Wolkowicz Editores, 2023.