Accesibilidad no es lo que piensas

A presentation at Forward – Accessible accessibility in April 2019 in Madrid, Spain by Alberto Calvo

Slide 1

Slide 1

Accesibilidad no es lo que piensas Alberto Calvo – Senior Design Manager en Cabify

Slide 2

Slide 2

El portal de mi casa

Slide 3

Slide 3

¿Qué es ser un discapacitado?

Slide 4

Slide 4

Personas en silla de ruedas…

Slide 5

Slide 5

…o con un carrito de la compra…

Slide 6

Slide 6

… de bebé…

Slide 7

Slide 7

… o personas con movilidad reducida

Slide 8

Slide 8

Podrías ser tú

Slide 9

Slide 9

No es un binario, y puede ser temporal

Slide 10

Slide 10

Cada decisión tiene el potencial de perjudicar o excluir a personas

Slide 11

Slide 11

La indiferencia hacia las personas y la realidad en la que viven es en realidad el único pecado cardinal en el diseño. — Dieter Rams

Slide 12

Slide 12

No es indiferencia, es ignorancia del problema y, a veces, de las plataformas para las que diseñamos

Slide 13

Slide 13

— EJEMPLOS — Discapacidad visual

Slide 14

Slide 14

Ser invidente…

Slide 15

Slide 15

… o tener baja visión…

Slide 16

Slide 16

1 1 Diferentes contrastes tipográficos experimentados desde la perspectiva de alguien con baja visión.

Slide 17

Slide 17

… incapacidad para diferenciar colores…

Slide 18

Slide 18

… o estar bajo luz directa del sol

Slide 19

Slide 19

Visual – ¿Qué hacer? 1. Cuidar la jerarquía del contenido 2. Utilizar componentes nativos o marcado semántico 3. Utilizar tamaños, pesos y contraste tipográfico suficiente 4.Asegurarnos de que la información no esté representada sólo por el color 5. Proporcionar descripciones alternativas para todas las imágenes que transmiten significado

Slide 20

Slide 20

Sabías que… En 2008, 45 millones de personas sólo en Estados Unidos tenían una discapacidad visual

Slide 21

Slide 21

Visual – ¿Qué más hacer? 1. Dejar que el usuario cambie el tamaño del texto 2. No truncar el contenido cuando el tamaño del texto aumente

Slide 22

Slide 22

2 2 Dynamic Type en acción, aplicado en Mail.app.

Slide 23

Slide 23

3 3 Lo mismo, desde la perspectiva de alguien con baja visión.

Slide 24

Slide 24

Sabías que… El simple uso de tipografías custom tiene un impacto

Slide 25

Slide 25

— EJEMPLOS — Discapacidad cognitiva

Slide 26

Slide 26

Tener dislexia, autismo, o una discapacidad de aprendizaje…

Slide 27

Slide 27

Slide 28

Slide 28

…estar cansado, estresado o deprimido…

Slide 29

Slide 29

… estar distraído o con prisa…

Slide 30

Slide 30

… o leer algo que no está en tu idioma o es muy denso

Slide 31

Slide 31

Slide 32

Slide 32

Cognitiva – ¿Qué hacer? 1. Proporcionar interfaces y contenidos sencillos, sin complicaciones y sin errores 2. Cuidar la jerarquía de ese contenido 3. Traducir nuestros contenidos a diferentes idiomas

Slide 33

Slide 33

— EJEMPLOS — Discapacidad física y motora

Slide 34

Slide 34

Tener una afección, como parálisis cerebral o atritis…

Slide 35

Slide 35

…o un control motor disminuido y menos preciso…

Slide 36

Slide 36

Slide 37

Slide 37

… estar lesionado…

Slide 38

Slide 38

… o estar en un vehículo en movimiento

Slide 39

Slide 39

Física y motora – ¿Qué hacer? 1. Ofrecer áreas de interacción suficientemente grandes en nuestros elementos interactivos 2. Soportar navegación por teclado o dispositivos de ayuda 3. Mostrar correctamente el foco de los elementos interactivos 4.Ofrecer control por voz

Slide 40

Slide 40

— EJEMPLOS — Otros tipos de discapacidad

Slide 41

Slide 41

Tener una discapacidad auditiva…

Slide 42

Slide 42

… estar en una reunión…

Slide 43

Slide 43

… tener mala conexión o un dispositivo de baja calidad…

Slide 44

Slide 44

… o tener un desorden vestibular, como el vértigo

Slide 45

Slide 45

Sabías que… Las animaciones pueden provocar náuseas y vértigo

Slide 46

Slide 46

Otros – ¿Qué hacer? 1. Incluir subtítulos en nuestros contenidos 2. Proporcionar feedback visual y/o háptico 3. Mejorar tiempos de respuesta y latencia 4.Servir assets optimizados en peso 5. Proporcionar un modo offline 6.No requerir animaciones ni reproducir vídeo automáticamente 7. Proporcionar el control al usuario para desactivarlas

Slide 47

Slide 47

Accesibilidad y negocio

Slide 48

Slide 48

Slide 49

Slide 49

Slide 50

Slide 50

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

Slide 54

Slide 54

Slide 55

Slide 55

Beneficios para el negocio 1. Impulsa la innovación, resolviendo problemas no anticipados 2. Mejora la imagen de marca 3. Minimiza el riesgo legal 4.Amplía el alcance del mercado

Slide 56

Slide 56

La accesibilidad es el fin. El diseño inclusivo es el medio. — Heydon Pickering What the heck is inclusive design? – Heydon Pickering (24Ways)

Slide 57

Slide 57

No es diseñar para unos pocos, sino diseñar para todos Inclusive Design at Microsoft by Kris Woolery

Slide 58

Slide 58

¿Quién se beneficia de…? ✔ Mejor navegación y localización de contenidos ✔ Mejor estructura y semántica ✔ Mayor contraste y legibilidad ✔ Mejor uso del lenguaje y simplicidad ✔ Mayor predictibilidad y consistencia ✔ Mejor prevención de errores y estados ✔ Mayor rapidez de carga y respuesta ✔ Mejor adaptación a las personas y a su situación

Slide 59

Slide 59

El coste de la accesibilidad

Slide 60

Slide 60

5 5 https://twitter.com/marcpalmerdev/status/1098227091542282241

Slide 61

Slide 61

Puede parecer radical pero hay algo importante que podemos extraer de esto:

Slide 62

Slide 62

Reinventar la rueda tiene un coste

Slide 63

Slide 63

No conocer la plataforma no es aceptable

Slide 64

Slide 64

No es un coste extra si no rompemos lo que hay gratis

Slide 65

Slide 65

Asumamos nuestra responsabilidad

Slide 66

Slide 66

Gracias! Alberto Calvo – @pumpkin · #forwardevent