Recomendaciones para una interfaz accesible

Foto de Sigmund en Unsplash

La accesibilidad digital es la disciplina que estudia las características que debe tener un producto o un servicio digital para poder ser utilizado por todas las personas.

Es importante tener en cuenta que, según los datos de la organización mundial de la salud, el 15% de la población mundial tiene algún tipo de discapacidad. Pero, además, todas las personas en algún momento de nuestras vidas nos encontramos frente a algún impedimento que no nos permite acceder a los productos digitales de la misma forma que si este impedimento no existiera (cuando nos encontramos en entornos con demasiada luz o en donde no se puede escuchar un audio, cuando nos rompemos un brazo, etc.).

Y si bien hoy existen avances en relación a esta temática, aún nos encontramos con numerosos productos que presentan barreras en el acceso.

Es por eso que en este artículo, desarrollaremos algunas recomendaciones para la implementación de productos digitales accesibles.

Principios de accesibilidad

De acuerdo con la WCAG (Web Content Accesibility Guidance), para que un producto digital sea accesible, debe cumplir con los siguientes principios:

• Perceptible: La información, así como los componentes o cualquier elemento que esté en mi interfaz de usuario, es decir, en mi producto digital tiene que poder ser percibido por todas las personas. Para ello, se debe tener en cuenta que existen distintas formas de percibir: visuales, auditivas, táctiles.
• Operable: Todas las funciones que se puedan realizar con un producto digital tienen que poder ser alcanzadas y manipuladas por todos.
• Comprensible: Debe comprenderse tanto la información que brinda un producto digital como su funcionamiento.
• Robusto: El producto tiene que ser ejecutado de una manera confiable, por una amplia variedad de dispositivos, incluidas las tecnologías asistivas o de apoyo.

Cada uno de estos principios tienen pautas y dentro de ellas, criterios de éxito que son los que permiten comprobar de manera concreta si se está cumpliendo o no con la accesibilidad.

Recomendaciones para implementar los principios de accesibilidad

1 — Perceptible:

1.1 — Texto alternativo: En el desarrollo, es esencial asegurarse de que todas las imágenes tengan el atributo “alt”, con un texto que describa la información o funcionalidad a las que representen. Proporcionar un texto alternativo permitirá que las tecnologías asistivas transmitan la información visual a personas con deficiencias visuales.

```
<p>

<img src=”phone.png” alt=”Telephone:”> 0123 456 7890

</p>

<p>

<img src=”fax.png” alt=”Fax:”> 0123 456 7891

</p>

```

Hay que tener en cuenta que existen distintos tipos de imágenes y el texto alternativo debe ser dado con base en su propósito:

• Informativas: Representan gráficamente conceptos e información, el texto alternativo debería ser al menos una descripción corta pero detallada.
• Decorativas: Su único propósito es agregar una decoración visual. Para este tipo de imágenes deberíamos darles un texto alternativo nulo, ya que no nos sirven para transmitir información.
• Funcionales: Están ligadas a una funcionalidad como un link o un botón, en estos casos el texto alternativo debería describir la funcionalidad del enlace o botón en lugar de la imagen.
• De texto: Si la imagen no es un logotipo, deberíamos evitar el texto. Sin embargo, si se utilizan imágenes de texto, el texto alternativo debería contener las mismas palabras de la imagen.
• Complejas: Tales como gráficos y diagramas que usamos para transmitir información detallada, deberíamos darles un texto alternativo equivalente a la información que brindamos en la imagen.
• Grupo de imágenes: Si varias imágenes transmiten una sola pieza de información, el texto alternativo para una imagen debe transmitir la información para todo el grupo. Por ej: En el rating de un artículo de una tienda, en este caso, la primera imagen llevaría un texto alternativo como “3 estrellas de 5”.
• Mapas de imágenes: En HTML tenemos una etiqueta “<map>” que nos permite definir áreas clickeables dentro de una imagen según las coordenadas. Para este tipo de imágenes, como texto alternativo, deberíamos proporcionar un contexto general para el conjunto de enlaces. Además cada área en la que se puede hacer clic también debe tener un texto alternativo que describa el propósito o el destino del enlace.

1.2 — Contenido multimedia: Para garantizar la accesibilidad de contenido multimedia como videos y audio, puedes brindar estas alternativas:

• Agregar subtítulos a los videos: Puedes incluir un archivo de subtítulos que suelen ser en formato .vtt o .srt.
• Proporciona transcripciones: Además de los subtítulos, también puedes ofrecer transcripciones completas de los vídeos o audios, con el texto de todo el contenido hablado, los efectos de sonido e información visual de lo que ocurre de manera secuencial.

1.3 — Adaptable: Desarrollar contenido adaptable implica crear una estructura flexible que se pueda acoplar a diferentes dispositivos sin perder su estructura. Para esto utiliza prácticas de diseño responsive y usa etiquetas semánticas de HTML. El utilizar las etiquetas semánticas de la manera correcta, hará tu código más legible para otros desarrolladores. Además los navegadores, plugins y tecnologías de asistencia pueden hacer uso de estas para brindar una navegación apropiada.

1.4 — Distinguible: El propósito principal es facilitar a los usuarios la posibilidad de separar la información en primer plano del fondo, tanto en elementos visuales como auditivos.

• Elementos visuales: Procura generar contrastes adecuados entre el texto y el fondo con un ratio mínimo de 4.5:1. Existen distintas herramientas y plugins que pueden ayudarte a ver el ratio de contraste que hacen los colores.
• Elementos auditivos: Asegúrate que los sonidos en primer plano sean más fuertes que los de fondo.

2 — Operable:

2.1 — Teclado accesible: Algunas personas pueden tener dificultad para utilizar el mouse o simplemente prefieren la navegación mediante el teclado. Por lo que es importante asegurarse de que todas las funcionalidades y navegación puedan hacerse mediante el teclado. Verifica que todos los elementos interactivos como botones y enlaces puedan ser enfocados y activados pulsando la tecla “Tab”.

2.2 — Tiempo suficiente: Muchos usuarios con discapacidad necesitan más tiempo para completar las tareas, pueden tener baja visión, pueden tardar más en responder físicamente o pueden estar accediendo al contenido con una tecnología de asistencia. Por esto, es importante proporcionar a los usuarios tiempo suficiente para leer y utilizar el contenido. Evitar interrupciones o cambios automáticos permitirá que todos los usuarios accedan a la información sin presión.

2.3 — Ataques epilépticos: Se debe tener especial cuidado en evitar el diseño de contenido que pueda causar ataques epilépticos. Evita patrones parpadeantes o de destellos intensos. Ten en cuenta que las advertencias muchas veces no son efectivas, pues son ignoradas, sobre todo en niños que no pueden leer.

2.4 — Navegación: Facilitar la navegación y ubicación del usuario es clave para una buena experiencia de usuario. Proporciona una estructura semántica coherente, usa encabezados y enlaces bien organizados, esto ayudará a los usuarios a navegar por el contenido fácilmente.

2.5 — Modalidades de entrada: Se deben tener en cuenta diversas modalidades de entrada además del teclado, como comandos de voz o gestos táctiles. El asegurarse de que las funcionalidades sean operables a través de diferentes métodos de entrada aumenta la accesibilidad y usabilidad para todos los usuarios.

3 — Comprensible:

3.1 — Legible: Garantizar la legibilidad y comprensibilidad del texto es esencial. Asegúrate de utilizar tipografías claras y de fácil lectura, así como estructurar el contenido con encabezados, párrafos y listas, ayudará a que todos los usuarios comprendan la información.

3.2 — Previsible: Crear una apariencia y un comportamiento predecible de una página a otra y haciendo que el comportamiento de los componentes interactivos también sea predecible, es importante para que los usuarios puedan entender cómo interactuar con el contenido. Para algunos usuarios es difícil tener una perspectiva general de la página web: personas con limitaciones cognitivas se pueden confundir si los componentes aparecen en diferentes lugares en las distintas páginas.

Ubicar en el mismo orden los componentes que se repiten en distintas páginas, permite a los usuarios concentrarse en un determinado sector y ayudará a que se sientan cómodos y seguros al navegar por el producto digital.

3.3 — Asistencia a la entrada de datos: Todos cometemos errores, sin embargo, algunas personas tienen más dificultades para ingresar datos sin cometer errores. Es por esto que en el desarrollo, se deben implementar mecanismos para evitar y corregir errores al ingresar datos. Proporcionar mensajes de error claros, sugerencias para corregir errores y usar labels descriptivos en inputs o formularios mejorará la experiencia del usuario y facilitará la interacción con el producto.

4 — Robusto:

4.1 — Compatible: El contenido debería ser lo suficientemente robusto para que este pueda ser interpretado por varios navegadores y tecnologías de asistencia.

Es sabido que a veces puede resultar difícil hacer interfaces de usuario complejas. Pero si usamos un HTML semánticamente incorrecto, haciendo únicamente uso de etiquetas sencillas como “<div>”, “<span>”, “<a>”, las cuales manipulamos de manera dinámica con JavaScript, esto hace que se pierda compatibilidad con las tecnologías de asistencia. Para solventar esto usamos WAI-ARIA (Web Accessibility Initiative — Accesible Rich Internet Applications), la cual es una tecnología que nos ayuda con esos problemas al brindarnos un set de atributos adicionales para HTML: Roles, propiedades y estados, que los navegadores y tecnologías asistivas pueden reconocer y usar para que los usuarios sepan lo que está sucediendo.

Un ejemplo sencillo con algunos de estos atributos se ve así:

```
<span

role=”checkbox”

aria-required=”true”

aria-checked=”true”

aria-labelledby=”tac”></span>

<span id=”tac”>I agree to the Terms and Conditions.</span>
```

Para usuarios que naveguen con tecnologías de asistencia, sin la ayuda de los atributos ARIA, sería difícil de comprender que es un checkbox. Entonces, ¿cómo funcionan estas propiedades?

• Role: Define que es el elemento o que hace, muchos elementos semánticos de HTML ya tienen un rol por defecto, y claro, solo deberíamos cambiarlo si es realmente necesario, como es este caso.
• Aria-required: Con esta propiedad especificamos si el input de un formulario debe ser llenado para ser válido.
• Aria-checked: Le indicamos en que estado se encuentra, si está chequeado o no. Este debería ser manipulado dinámicamente con JavaScript
• Aria-labelledby: El propósito principal es proporcionar una etiqueta accesible para elementos que no tienen una etiqueta visible, o cuya etiqueta visible no es suficientemente descriptiva. Toma como valor el ID o IDs de uno o más elementos de texto existentes. Y como se puede ver en este caso funciona de manera similar a como lo haría la etiqueta “<label>” con el atributo for.

Conclusiones:

• La accesibilidad web no solo beneficia a las personas con discapacidades, sino que también mejora la experiencia para todos los usuarios, incluidos aquellos con limitaciones temporales o situacionales.
• Para tener buena accesibilidad se debe trabajar tanto en diseño como en desarrollo.
• Podemos incrementar la audiencia de nuestro producto digital al hacerlo más accesible para todo tipo de usuarios.
• Para aumentar la compatibilidad con tecnologías de asistencia es fundamental hacer uso correcto de etiquetas semánticas de HTML o, en su defecto, hacer uso de los atributos ARIA.