+
# Accessibility


## Learning Goals
En esta clase aprenderás:

- Qué es A11Y
- Cuál es la importancia de tener en cuenta la accesibilidad en el diseño
- Qué tipo de discapacidades existen
- Cómo mejoramos la accesibilidad de nuestros productos

## ¿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.

En informática, la accesibilidad incluye ayudas como las tipografías de alto contraste o gran tamaño, magnificadores de pantalla, lectores y revisores de pantalla, programas de reconocimiento de voz, teclados adaptados, y otros dispositivos apuntadores y de entrada de información.

## ¿Por qué es importante?

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


### :family: 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.

El acceso universal es parte de todo lo que hacemos en el mundo digital. La inclusión de personas diversas forma parte de la tendencia en el diseño web porque, además, es una buena oportunidad para ejercer la responsabilidad social corporativa.

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**.

### :female-judge: Legislatura

En cuanto a lo legal, por ejemplo, hoy por hoy, el [Acta Europea de Accesibilidad](https://www.europarl.europa.eu/RegData/etudes/ATAG/2019/635536/EPRS_ATA(2019)635536_ES.pdf) 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](https://www.section508.gov/manage/laws-and-policies) a que todos los productos electrónicos y digitales sean accesibles.

Cerca del 20% de la población en Estados Unidos tiene algún grado de discapacidad. Esto es 1 de cada 5 personas. En la Unión Europea, 1 de cada 7 personas tiene alguna discapacidad.

Quizás por ello, cada vez más nos acercamos a que el tema de accesibilidad sea un **derecho humano fundamental a nivel internacional**. Tanto así, que en la actualidad en los Estados Unidos está requerido como una ley federal.

De 2015 a 2017, más de 250 negocios diferentes recibieron demandas en los Estados Unidos. Y hay algunos casos famosos: AOL fue demandado hace algunos años, Target y hasta Netflix ha recibido demandas.

Todo esto ha hecho que las compañías se motiven a mejorar la accesibilidad de sus productos digitales. Y a pesar de que realmente la motivación no sea la empatía, el marco legal ofrece suficiente motivación para que exista una profunda necesidad en las compañías que diseñan aplicaciones a mejorar la accesibilidad.

Por otra parte, las personas con discapacidad suelen enfrentar mucha discriminación en cuanto al empleo. Toda esta problemática hace fundamental que enfoquemos los temas de accesibilidad como algo prioritario dentro de nuestro proceso de diseño.

### :moneybag: 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


:::success
### :information_source: 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](https://es.wikipedia.org/wiki/Lector_de_pantalla)
5) Siempre hay que probar con usuarios reales. Las pruebas con usuarios generalmente nos muestran cosas que no hemos tomado en cuenta
6) Inhabilitar 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
:::

El 80% de los problemas de accesibilidad que encontramos en un producto digital están asociados directamente a algún tipo de discapacidad visual.

Pero la discapacidad visual va mucho más de la ceguera. En realidad es un espectro. Hay 22 tipos de ceguera, sin embargo, tendemos a agruparlas.

Se puede ser legalmente ciego y sin embargo tener algo de visión. Por otro lado, un usuario que tenga baja visión puede requerir solo un aumento del tamaño de la pantalla para acceder a una aplicación. Sin embargo, magnificar la pantalla ayuda poco.

En Europa, la visión se puede ver comprometida en un porcentaje: sesenta, setenta, noventa... la mayoría de estos usuarios tienen acceso a un lector de pantalla (Screen reader). Estas herramientas leen en voz alta el contenido que se presenta en una UI.

Los usuarios con discapacidad visual tienden a usar estas herramientas, así como también, el teclado de sus dispositivos. Y enfocarnos en ellos también nos ayuda, por ejemplo, a resolver problemas para personas con discapacidades motoras, quienes también suelen utilizar teclados, por ejemplo.

En el caso de los problemas de audición, la incidencia para nuestra industria es menor. Sin embargo, la solución que se ha planteado en los últimos años suele ser suficiente: subtitular los elementos que presenten algún tipo de audio.

En el caso de las discapacidades cognitivas, es un poco más complejo. En este caso, dependemos fuertemente de los tests de usuario. La razón de la complejidad es que entre uno y otro caso hay mucha diferencia. Las discapacidades cognitivas engloban dislexia, déficit de atención, trastornos en el espectro del autismo (como Asperger).

## Textos Alternativos en Imágenes

Cuando tratamos de textos alternativos, o de los "alt text", lo que quieres es describir, no la imagen, sino la información que se encuentra dentro de la imagen.

¿Que está haciendo la persona de la imagen?

Suele depender del uso que se le dé a la imagen. A veces puede no ser necesario, por ejemplo, el color de una pared en una imagen, pero sí que un personaje mira la pared. "Hombre mirando una pared" también podría ser poco descriptiva. Cada caso es diferente.


Si el usuario necesita la imagen para entender el contenido de la página, entonces deberías hacerlo un poco más descriptiva: “Hombre mirando una pared con gráficos e infografías”


En este caso, "Hombre mirando la pared es poco descriptivo"

Por otro lado, evitaremos usar la palabra **imagen**, pues es innecesaria. También podemos evitar las palabras ilustración, dibujo, fotografía, etc. Importa más el sujeto y la acción que realiza o, en su defecto, el objeto.

El Alt text Es un problema clásico de accesibilidad ya que mucha gente lo olvida o lo pasa por alto. Y eso que este texto es importantísimo para SEO por lo que es muy relevante que sea considerado.

## Web Standards

Internet tiene sus propios estándares de accesibilidad. Toda la guía se puede conseguir en la [Web Accessibility Initiative](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0)

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.

:::danger
**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 a 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](https://es.wikipedia.org/wiki/Lector_de_pantalla) 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](https://es.wikipedia.org/wiki/Lector_de_pantalla) 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.


:::success
:bulb: 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](https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker)
- [Able](https://www.figma.com/community/plugin/734693888346260052/Able-%E2%80%93-Friction-free-accessibility)


### 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](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)


:::warning
:+1: [Webflow](https://webflow.com/), cada vez que publicas tu página, avisa qué errores de accesibilidad tiene tu vista!
:::