Accesibilidad en la base del producto

A presentation at T3chFest in March 2023 in Madrid, Spain by Alena Nikolaeva

Slide 1

Slide 1

ACCESIBILIDAD EN LA BASE DEL PRODUCTO Edición para las startups @alenanik11

Slide 2

Slide 2

DISCLAIMER! Esta presentación contiene gráficos, animaciones e imagines sin la descripción. ¡Intentaré explicarlos! Para apreder sobre presentaciones accesibles consulta enlace: Guía para presentaciones accesibles.

Slide 3

Slide 3

En 1997, el W3C creó la Iniciativa de Accesibilidad Web (WAI). En 1999 WAI lanzó la primera versión de las WCAG (WCAG 1.0) WCAG 2.0 en 2008 WCAG 2.1 salió en 2019 WCAG 3.0… un día

Slide 4

Slide 4

En 1997, el W3C creó la Iniciativa de Accesibilidad Web (WAI). En 1999 WAI lanzó la primera versión de las WCAG (WCAG 1.0) WCAG 2.0 en 2008 WCAG 2.1 salió en 2019 WCAG 3.0… un día

Slide 5

Slide 5

2022 Report 50,829,406 errores de accesibilidad distintos se detectaron en un million de páginas home en 2022. Una media de 50,8 errores por página.

Slide 6

Slide 6

Errores WCAG en 2022 83.9% Contraste de texto 55.4% Descripción de imagenes 50.1% Enlaces vacíos <a></a> 48,2% No tienen idioma especificado

Slide 7

Slide 7

Promedio de errores por categoría 72,9% 50,2% 66,9% Noticias/Tiempo/Infor Finanzas personales Compras mación

Slide 8

Slide 8

39% 86,5% de los 4,4 millones de formularios identificados no estaban correctamente etiquetados. de 1,298,423 tablas tenían un marcado de tabla de datos inválido.

Slide 9

Slide 9

Datos de WHO 1.300 milliones de personas sufren hoy una discapacidad importante.

Slide 10

Slide 10

“La accesibilidad no es un problema: la ausencia de ella sí lo es. “

Slide 11

Slide 11

“La accesibilidad no es un problema: la ausencia de ella sí lo es. ” En 2023 la web accesible es una excepción. Y lo sabemos muy bien.

Slide 12

Slide 12

“Algunos días tenía mareos, náuseas, dolor de cabeza y me dolía el estómago debido a la ansiedad. Tengo prefers-reducedmotion en mi navegador y ordenador activado por defecto. No confío en que no se aparezca una animación loca. “

Slide 13

Slide 13

Slide 14

Slide 14

“NO ES MI PÚBLICO OBJETIVO”

Slide 15

Slide 15

LA MAYORÍA DE LOS USUARIOS… 100 80 80 60 40 20 20 10 0 Algunas personas Lo que yo pienso que son mis usuarios Algunas otras personas

Slide 16

Slide 16

Mis 80% de usuarios Diseñador Programadora Estudiante Empresario 35 años 28 años 25 años 38 años

Slide 17

Slide 17

MI PRODUCTO EN 2023

Slide 18

Slide 18

Mis 80% de usuarios Diseñador Programadora Estudiante Empresario 35 años 28 años 25 años 38 años No consigue Se marea con las Astigmatismo en los “Esto es rojo o seguir la animaciones dos ojos verde?” documentación y (motion sickness) (visual impairment) (color blindness) se frustra (ADHD)

Slide 19

Slide 19

Mis usuarios Diseñador Programadora Estudiante Empresario 35 años 28 años 25 años 38 años No consigue Se marea con las Astigmatismo en los “Esto es rojo o seguir la animaciones dos ojos verde?” documentación y se frustra

Slide 20

Slide 20

MI PRODUCTO EN 2023

Slide 21

Slide 21

Pero porque se van? Diseñador Programadora Estudiante Empresario 35 años 28 años 25 años 38 años No consigue Se marea con las Astigmatismo en los “Esto es rojo o seguir la animaciones dos ojos verde?” documentación y se frustra

Slide 22

Slide 22

“NO ES MI PÚBLICO OBJETIVO” HE DECIDIDO NO HACER QUE ME WEB FUNCIONE PARA TI

Slide 23

Slide 23

PERO ESTO ES UN EJEMPLO TONTO, ALENA…

Slide 24

Slide 24

“También aprendí que soy muy impaciente (TDAH), me encantaban los sitios web en los que podía darle a Enter para enviar algo o podía cerrar el modal con escape. Pequeñas cosas como esas me hicieron amar Linear y odiar LinkedIn.”

Slide 25

Slide 25

SEGUIMOS

Slide 26

Slide 26

Mis usuarios Discapacidad permanente, temporal o situacional?

Slide 27

Slide 27

¿Y CÓMO LLEGAMOS A EXCLUIR A LA GENTE? 01 02 Programando para la gente como nosotros Damos por hecho que se entiende lo que hemos pensado Diseñando para la gente como nosotros Si para nosotros el contraste es suficiente y “se lee bien”, no será así para todos.

Slide 28

Slide 28

Cómo veo mi producto yo

Slide 29

Slide 29

Cómo veo mi producto yo Cómo lo ven los demás

Slide 30

Slide 30

La discapacidad depende del contexto.

Slide 31

Slide 31

Datos de WHO 1.300 milliones de personas sufren hoy una discapacidad importante.

Slide 32

Slide 32

1.300 milliones • un impedimento visual • dificultades motoras • deterioro cognitivo o problemas de aprendizaje • sordera o problemas de audición

Slide 33

Slide 33

¿ENTONCES TODOS NECESITAN ACCESIBILIDAD?

Slide 34

Slide 34

Slide 35

Slide 35

Usabilidad usable for some Accessibilidad usable by everyone regardless of ability

Slide 36

Slide 36

Experiencia Usabilidad apta para todos los usuarios Accessibilidad

Slide 37

Slide 37

Lectores de pantalla y HTML, CSS, JS AT accesible Semántica y Tecnologías que facilitan acceso al Experiencia Usabilidad apta para todos los Diseño estándares accesible contenido Accessibilidad WCAG Testing con usuarios con discapacidad usuarios IAAP ADA, Section 504, Section 508, EN APA 301 549, ACA, CVAA, etc.

Slide 38

Slide 38

“NO ES MI PÚBLICO OBJETIVO” ¿CÓMO PUEDO HACERLO MEJOR?

Slide 39

Slide 39

Hola! Es hora de conocernos! Alena Nikolaeva @alenanik11 Diseñadora de producto en GitHub. IAAP member. Antes: desarrolladora front-end Typeform, trivago, Hanzo Studio Cuando me llamo accessibility-first, quiere decir que aprendo y ayudo con desarrollo y con diseño web que prioriza a las personas.

Slide 40

Slide 40

WCAG Web Content Accessibility Guidelines Principios, Pautas, Técnicas y Errores, Criterios de conformidad. Enlace para estudiar.

Slide 41

Slide 41

WAI Web Accessibility Initiative Strategies, standards, resources to make the Web accessible to people with disabilities. Enlace para estudiar.

Slide 42

Slide 42

Gracias a la las técnicas de mejorar la accesibilidad y diseño universal se intenta proporcionar el acceso a las personas con diversidad funcional a la web, siendo un derecho fundamental.

Slide 43

Slide 43

¿CUANTA GENTE SE DEDICA A ESTO? ¿Solo me sirve para un producto si lo aprendo? 27 de enero de 2022, ZipRecruiter tenía casi 45.000 puestos que hacían referencia a la accesibilidad web.

Slide 44

Slide 44

¿Qué puedo hacer yo? - Puede leer las especificaciones WCAG - Utilizar HTML semántico - Unidades relativas y cambiamos nuestro tamaño de fuente por defecto en el navegador y ampliamos y reducimos 200%, todo escala y nada se rompe - Orden DOM que determina el orden de lectura y el orden de tabulación/enfoque está correcto - Crear checklists - Ajustar contraste sin decir nada a diseño - Configurar pruebas de cypress (cypress-axe) o pruebas unitarias - Utilizar el plugin de accesibilidad - Ser un wizard de las interacciones con el teclado y utilizar media queries para reducir el movimiento y evitar que la gente se maree. …..

Slide 45

Slide 45

¿Qué puedo hacer yo? - Puede leer las especificaciones WCAG - Utilizar HTML semántico - Unidades relativas y cambiamos nuestro tamaño de fuente por defecto en el navegador y ampliamos y reducimos 200%, todo escala y nada se rompe - Orden DOM que determina el orden de lectura y el orden de tabulación/enfoque está correcto - Creat checklists - Ajustar contraste sin decir nada a diseño - Configurar pruebas de cypress (cypress-axe) o pruebas unitarias - Utilizar el plugin de accesibilidad - Convertirteen un mago de las interacciones con el teclado y utilizar media queries para reducir el movimiento y evitar que la gente se maree. …..

Slide 46

Slide 46

“Mi diseñadora no quiere cambiar nada”

Slide 47

Slide 47

“Yo lo he intentado y no me ha salido bien” “Al plantear el tema de la accesibilidad, a menudo encontré cierta resistencia porque era demasiado difícil de llevar a cabo, había prioridades o porque nadie lo pedía.”

Slide 48

Slide 48

“La primera vez que me di cuenta de que estaba trabajando, tuve que cambiar algo de código porque no era accesible. Después de eso, revisé mucho más código. Ese día les conté lo sucedido a mi equipo, pero nada cambió.”

Slide 49

Slide 49

¿ENTONCES, PORQUÉ INTENTAR?

Slide 50

Slide 50

Si la gente no puede usar tu producto nada tiene sentido.

Slide 51

Slide 51

Muy pronto sería ilegal. European Accessibility Act https://ec.europa.eu/social/main.jsp?catId=1202

Slide 52

Slide 52

Los usuarios nunca olvidarán como les has hecho sentir.

Slide 53

Slide 53

Apoyar la accesibilidad es una acción, no se puede apoyar la accesibilidad con solo observar a los demás.

Slide 54

Slide 54

La señal que estabas esperando para empezar a hablar sobre la accesibilidad en tu empresa.

Slide 55

Slide 55

“Lo que nos ayudó concretamente fue el claro marco jurídico que se aplica a los organismos del sector público en toda Europa: la Directiva Europea de Accesibilidad a la Web. Nos ayudó a demostrar que en realidad no había elección. Explicamos que, si teníamos que hacerlo de todos modos, hacerlo antes y justo en el proyecto del sistema de diseño nos ahorraría a todos tiempo, dinero y energía.”

Slide 56

Slide 56

Evalua y escala los problemas Habla con diseño Busca tu equipo en toda la empresa Estima y pon la deadline

Slide 57

Slide 57

Accessibility Annotations Kit Ejemplo de secuencia de navegación por teclado https://www.figma.com/community/file/953682768192596304 WCAG Focus order Designing focus indicator https://www.sarasoueidan.com/blog/focus-indicators/

Slide 58

Slide 58

“Empecé a crear materiales a partir de la formación que recibí. Presentándolos a otros desarrolladores e intentando cambiar la cultura de mi departamento. Preguntando siempre sobre a11y. Y haciendo ruido.”

Slide 59

Slide 59

“¿Era realmente necesario para la primera versión? ¿Realmente necesitábamos dedicar todo ese tiempo? ¿Teníamos usuarios con discapacidad? La respuesta a las tres preguntas fue, por supuesto, sí. Armados con presentaciones de diapositivas, convencimos a los altos directivos.” ex W3C/WAI, Mozilla, NL gov DevRel @ Sanity.io

Slide 60

Slide 60

PRIORIZA EL TRABAJO Y CREA LOS TICKETS

Slide 61

Slide 61

PRIORIZA EL TRABAJO Y CREA LOS TICKETS Redúzcalos a la mitad

Slide 62

Slide 62

ACCESSIBILITY ON STEROIDS 01 Arregla las cosas con tu equipo, y no 02 rompas lo que ya estaba bien. Documenta. Deja el tabindex en paz. 03 Usa los lectores de pantalla. En plural. Re-evalua y testea ¿Siguen existiendo problemas graves? ¿Qué porcentaje de errores nos podemos “permitir”? https://www.magentaa11y.com/web/ CMS deben incluir funciones para añadir títulos 04 Diariamente. 05 Future-proof testing (axe, unit, CI / CD) apropiados, texto alternativo y etiquetas aria a controles como enlaces o botones. 06 Comparte updates internamente y externamente. Conversaciones, ejercicios basados en la empatía, enseñar al equipo a utilizar el lector de pantalla, hablar con usuarios. No solo preguntar por las features! Pide feedback a las personas reales.

Slide 63

Slide 63

Pregunta • ¿Los usuarios pueden completar las tareas esenciales cuando usan mi producto? • ¿La gente en mi empresa entiende lo que estamos haciendo? • ¿Yo sé lo que estoy haciendo o necesito apoyo?

Slide 64

Slide 64

“PARA EL MVP NO HACE FALTA”

Slide 65

Slide 65

“PARA EL MVP NO HACE FALTA” Si tu MVP no tiene en cuenta la accesibilidad, no es viable.

Slide 66

Slide 66

FORMACIÓN

Slide 67

Slide 67

Accessibilidad es el resultado del proceso, y el proceso es diseñar software con la inclusión. Tenemos que cambiar y educar a la empresa o al cliente, no a un solo equipo.

Slide 68

Slide 68

¿Te arrepientes de algo? Sabiendo las cosas que sabes ahora, ¿qué podrías haber hecho mejor? “Sí, siempre habrá algo que lamentar, pero tenemos que aprender a perdonarnos e intentar hacerlo mejor la próxima vez que lleguemos allí. Es estupendo ser mejor, pero no tenemos por qué serlo hoy”. “No me arrepiento de nada. Empezaría con más pistas para ganar aliados”. “Estoy bastante contento con el punto en el que estamos ahora mismo intentando mejorar cada día y concienciando a todas las disciplinas” “Hice lo que pude y lo sigo haciendo. Pero estoy contento de que el equipo haya escuchado y estemos cambiando cosas”.

Slide 69

Slide 69