Accessibility

¿Qué es A11y?

Accesibilidad, comúnmente llamada A11y (puesto que Accessibility en inglés tiene 11 letras) engloba todas las características de una App o Web para permitir que personas con alguna discapacidad puedan hacer uso de ella.

¿Por qué es importante?

Crear productos accesibles para todos es importante por razones morales, legales y económicas.

Un asunto de moral

Las razones morales son obvias. Los seres humanos tenemos el deber de crear un mundo más inclusivo, en el que todas las personas podamos acceder, circular, comunicarnos y utilizar de forma autónoma, cómoda y segura aquello que consideramos necesario o elegimos.

Cuando construimos productos digitales accesibles para todos, apoyamos la diversidad humana, mejoramos la calidad de vida de todas las personas y otorgamos a personas con capacidades diversas las mismas herramientas que utilizan personas típicas.

Pero más allá de eso, a partir de los 42 años, por ejemplo, todos los seres humanos comenzamos a perder capacidades visuales. En este sentido, puedes pensar que realmente no estás creando productos digitales para un tercero, estás creando productos digitales para ti mismo en el futuro.

Legislatura

En cuanto a lo legal, por ejemplo, hoy por hoy, el Acta Europea de Accesibilidad afecta a las instituciones públicas, quienes están obligadas a cumplir con unos estándares de accesibilidad.

Paralelamente, Estados Unidos también obliga a las empresas grandes a entregar productos digitales con ciertos grados de accesibilidad. De hecho, la agencia federal está obligada, según la Section 508 Law a que todos los productos electrónicos y digitales sean accesibles.

Negocio

Si lo miramos en cifras, el 19% de los hombres en USA tienen algún tipo de discromatopsia y en el mundo más de 270 millones de personas tienen alguna discapacidad visual.

Esto se traduce en un quinto de usuarios potenciales para cualquier plataforma.

Adicionalmente, mejorar la accesibilidad de una aplicación es mejorar su usabilidad. En la medida en la que somos capaces de simplificar el uso para personas con capacidades diversas, también mejoramos el uso para personas típicas.

Y sí, normalmente las empresas son renuentes a poner muchos recursos en este ámbito puesto que hacer aplicaciones accesibles suele ser caro. Sin embargo, ten en cuenta que construirlas desde el principio tomando en cuenta la accesibilidad reduce considerablemente los costes.

Tipos de Discapacidad

Las discapacidades que pueden afectar el uso de un producto digital se pueden agrupar en cuatro grandes categorías:

• Discapacidades visuales
• Discapacidades auditivas
• Discapacidades cognitivas
• Discapacidades motoras o de movilidad

A tener en cuenta

1. Las discapacidades visuales causan el 80% de los problemas de accesibilidad en la Web
2. Lo más simple que puedes hacer es siempre colocar etiquetas de texto alternativo a las imágenes de una aplicación
3. Los menú de hamburguesa suelen ser poco accesibles, hay que ponerle etiquetas y definirlos bien. Y son muy importantes porque son la 'puerta de entrada' de todas las acciones que puede hacer un usuario
4. Asegúrate de que el contenido que no se vé también sea 'encontrable' por los screen-readers
5. Siempre hay que probar con usuarios reales. Las pruebas con usuarios generalmente nos muestran cosas que no hemos tomado en cuenta
6. Inabilitar el zoom en los soportes (como tablets y teléfonos) suele hacer tu aplicación inaccesible
7. Se puede aprender a diseñar y codificar productos digitales accesibles
8. Accesibilidad no quiere decir feo… aunque realmente genera limitaciones a la hora de diseñar
9. Debes probar en diferentes soportes, no sólo para que el diseño sea 'responsive', sino que los elementos funcionen de forma accesible en todos los casos
10. Embrace the attitude! Incorpora la idea de crear soluciones que le sirvan a la mayor cantidad de personas posibles a todo lo que hagas

Web Standards

Internet tiene sus propios estándares de accesibilidad. Toda la guía se puede conseguir en la Web Accessibility Initiative

Pero quizás, lo más interesante es que te quedes con la idea de los Niveles de Conformidad.

En las guías de accesibilidad, hay tres escalas de conformidad en la que medimos cada una de las iniciativas que podemos hacer o las decisiones de diseño que podemos tomar.

Las directrices se componen de criterios de cumplimiento (success criteria). Cada criterio de cumplimiento tiene un nivel de adecuación o conformidad (A, AA o AAA) que indica su impacto en la accesibilidad.

Según WCAG 2.0, para que una página web sea conforme, deben satisfacerse todos los requisitos de conformidad

Nivel de conformidad

Nivel A:

Para lograr conformidad con el Nivel A (el mínimo), la página web satisface todos los Criterios de Conformidad del Nivel A, o proporciona una versión alternativa conforme.

Nivel AA:

Para lograr conformidad con el Nivel AA, la página web satisface todos los Criterios de Conformidad de los Niveles A y AA, o proporciona una versión alternativa conforme al Nivel AA.

Nivel AAA:

Para lograr conformidad con el Nivel AAA, la página web satisface todos los Criterios de Conformidad de los Niveles A, AA y AAA, o proporciona una versión alternativa conforme al Nivel AAA.

Todas las indicaciones en la guía presentan qué nivel de conformidad satisfacen.

¿Qué hacer?

1) Crea contraste

El ratio de contraste entre el texto y el fondo debe ser al menos de 4.5 a 1 para cumplir la AA. Aunque en textos más grandes, puede ser un poco menor.

Aviso: Si la fuente es 14px o menor, el mínimo ratio de contraste baja a 3:1

2) No utilices sólo colores para categorizar información importante

Además del color, utiliza otra forma de discriminar un elemento de otro. Piensa que una persona que no distingue los colores también necesita otro tipo de recurso para entender la información que le presentas.

Sobre todo, ten esto en cuenta cuando estés mostrando gráficos complejos.

3) Utiliza estados en los componentes

Tener un estado hover, por ejemplo, facilita a las personas que tienen menos visibilidad entender dónde están situados en una vista. Esta característica es muy útil para personas con discapacidades cognitivas o motoras, e incluso, para personas que tienen cierto grado de invidencia pero aún son capaces de ver un poco.

4) Inserta etiquetas e instrucciones en formularios

Las etiquetas en formularios, los placeholders y cualquier instrucción que ayude a un usuario a llenar información reduce la fricción cuando necesitas que el usuario te dé información.

Intenta en todo momento utilizar etiquetas y placeholders claros, por ejemplo, para el input de un correo electrónico, siempre utiliza un placeholder con el formato [e-mail].

5) Siempre utiliza textos alternativos para las imágenes

Procura que los textos alternativos estén presentes y sean lo suficientemente explícitos.

En el elemento de HTML de imagen, siempre puedes agregar la propiedad alt donde especificas el texto alternativo.

No necesitas utilizar la palabra 'imagen', por ejemplo, pero sí especificar qué contenido presentan. En el gif superior, un buen texto alternativo sería un caballo comiendo cereales.

6) Utiliza marcado correcto

Cuando estás programando en HTML, o creando una página en no-code, es interesante que utilices los elementos semánticamente correctos. Es decir, no uses un header o un footer para una sección que no pertenece a esto.

Piensa que los screen-readers utilizan esta información para decirle a tu usuario 'dónde están'.

7) Permite la navegación a través del teclado

Las personas con discapacidades motoras o que dependen de un screen-reader para acceder a tu aplicación muchas veces navegan a través del teclado.

Una buena idea es que intentes tú mismo navegar con el teclado para hacer pruebas. Utiliza el tabulador para desplazarte a través de los elementos de la vista. El orden debería seguir el mismo flujo visual.

Discapacidades Cognitivas

Esta infografía presenta consejos básicos para diseñar productos digitales accesibles para personas neuroatípicas.

Recuerda que seguir estas guías también mejora la usabilidad para personas con capacidades típicas

Manos a la obra

Diseño:

Figma tiene dos plugins interesantes que te pueden ayudar a controlar que tus diseños sean accesibles para la mayor cantidad de personas posible. Ambos te ayudan a encontrar el contraste correcto en tus combinaciones de colores.

• a11y
• Able

Desarrollo

Por otro lado, para testear el código de una página web existente, Google Chrome tiene una pestaña de Accesibilidad en su consola. También está disponible un plugin que automáticamente te dice los errores desde el punto de vista de accesibilidad.

• axe

Webflow, cada vez que publicas tu página, avisa qué errores de accesibilidad tiene tu vista!