Este documento presenta el concepto de "Shift Left a11y", que significa mover la accesibilidad más a la izquierda en el proceso de desarrollo de software. Propone incluir requisitos de accesibilidad desde el principio, revisar prototipos tempranamente, realizar pruebas automatizadas en la integración continua y revisiones manuales y automatizadas del código. También recomienda realizar pruebas con usuarios y revisiones en producción para identificar errores, con el fin de mejorar la accesibilidad desde las primeras etapas

1. Shift Left a11y:
Moviendo la accesibilidad a
la izquierda
Lisandra Armas
Senior Quality Engineer
Accessibility Advocate
@lisyarmas

2. @lisyarmas

3. COVID vs Accesibilidad
@lisyarmas

4. "When we design for disability
first, you often stumble upon
solutions that are better than
those when we design for the
norm."
Elise Roy’s TED talk
Lawyer, artist, human rights advocate
https://www.ted.com/speakers/elise_roy @lisyarmas

5. Donde se pensó que había un beneficio para
algun@s, hoy en día el beneficio es para tod@s
estemos o no en situación de discapacidad.
@lisyarmas

6. Resource:https://www.microsoft.com/design/inclusive/
“Curb cut” effect
Diseñar y desarrollar
teniendo en cuenta las
distintas situaciones de
discapacidad es
simplemente diseñar y
desarrollar bien.

7. Software Engineer
ISTQB Foundation Level
Docente del Diplomado Testing de Software en la
Universidad Católica de Bolivia
https://lisandra-armas.blogspot.com/
+9 años de experiencia en Testing
Senior Quality Engineer
UX, Usability and Accessibility Advocate
Speaker Internacional
Viajar y conocer el mundo
Aficionada a la fotografía @lisyarmas

8. Agenda
● Shift Left a11y
● Solución: modelo y hábitos
● ¿Cómo podemos lograrlo?
1
2
3
@lisyarmas

9. Agenda
● Shift Left a11y
● Solución: modelo y hábitos
● ¿Cómo podemos lograrlo?
1
2
3
@lisyarmas

10. ¿Qué es
Shift Left
a11y?
@lisyarmas

11. Resource: https://abstracta.us/blog/agile-testing/not-convinced-yet-shift-left-testing/ @lisyarmas

12. Next Release Sprint
1. Incluir requerimientos de
accesibilidad
2. Temprana revisión de los
prototipos
3. Revisión automatizada
en la IC.
4. Revisión manual y
automatizada del código.
5. Pruebas con usuarios
Deploy
6. Revisión en producción,
identificar errores.
Shift Left a11y
@lisyarmas

13. Agenda
● Shift Left a11y
● Solución: modelo y hábitos
● ¿Cómo podemos lograrlo?
1
2
3
@lisyarmas

14. Solución: modelos y hábitos
@lisyarmas

15. @lisyarmas

16. Next Release Sprint
1. Incluir requerimientos
de accesibilidad.
2. Temprana revisión de los
prototipos.
3. Revisión automatizada
en la IC.
4. Revisión manual y
automatizada del código.
5. Pruebas con usuarios.
Deploy
6. Revisión en producción
Shift Left a11y
@lisyarmas

17. Incluir requerimientos de accesibilidad
BACKLOG TO DO DOING DONE
a11y
a11y
a11y
@lisyarmas

18. Ejemplos de Historias de usuario
Como usuario con vista que no usa el mouse, necesito un mejor enfoque del
teclado para poder ver dónde estoy en una página a medida que avanzo.
Como usuario con vista y poca concentración, necesito etiquetas visibles en
todos los campos del formulario para poder entender qué información se
solicita.
Como usuario vidente con situación de discapacidad cognitiva, necesito que
todas las instrucciones aparezcan en la pantalla y se especifiquen los
requisitos exactos para poder entender toda la información necesaria.
Resource: https://www.slideshare.net/Intopia/a11y-user-stories-csun-2018
1/3
@lisyarmas

19. Ejemplos de Historias de usuario
Como usuario que hace uso de un lector de pantalla, necesito texto
alternativo en imágenes informativas para poder entender toda la
información importante en una página.
Como usuario que hace uso de un lector de pantalla, necesito que todo el
texto del enlace sea significativo para poder navegar con facilidad.
Como usuario con baja visión o deficiencia al color necesito indicadores de
enlace más obvios para poder ver dónde hacer clic en una página.
Resource: https://www.slideshare.net/Intopia/a11y-user-stories-csun-2018
2/3
@lisyarmas

20. Ejemplos de Historias de usuario
Como persona con discapacidad auditiva, necesito subtítulos en los videos
para comprender completamente los módulos de aprendizaje electrónico.
Como usuario con baja visión, necesito aumentar el tamaño de fuente para
leer las pantallas.
Como usuario de primera línea bajo presión para cumplir con los KPIs
necesito un texto de enlace claro para saber intuitivamente a dónde ir
después.
Resource: https://www.slideshare.net/Intopia/a11y-user-stories-csun-2018
3/3
@lisyarmas

21. https://www.w3.org/TR/WCAG21/ @lisyarmas

22. Next Release Sprint
1. Incluir requerimientos de
accesibilidad
2. Temprana revisión de
los prototipos
3. Revisión automatizada
en la IC.
4. Revisión manual y
automatizada del código.
5. Pruebas con usuarios
Deploy
6. Revisión en producción
Shift Left a11y
@lisyarmas

23. Resource: https://www.deque.com/blog/design-code-thinking-accessibility-ground/ @lisyarmas

24. Temprana revisión de los prototipos
Diseñar estados de enfoque para ayudar a los
usuarios a navegar y comprender donde se
encuentran.
1/2
Suficiente contraste entre el color del primer plano
(texto, íconos) y el color del fondo.
En el diseño no indicar información relevante
haciendo solo uso de colores.
@lisyarmas

25. Temprana revisión de los prototipos
Los prototipos deben ser consistentes y claros.
2/2
Incluir en los prototipos los mensajes de errores que serán
informados al usuario.
Indicar la descripción de los textos alternativos en las
imágenes relevantes para el usuario en el prototipo.
Para toda experiencia que consideremos que no pueda
ser accesible, debemos buscar y crear una nueva forma
para que esta barrera sea eliminada.
@lisyarmas

26. Next Release Sprint
1. Incluir requerimientos de
accesibilidad.
2. Temprana revisión de los
prototipos.
3. Revisión automatizada
en la IC.
4. Revisión manual y
automatizada del código.
5. Pruebas con usuarios.
Deploy
6. Revisión en producción
Shift Left a11y
@lisyarmas

27. Proactivo vs Reactivo
Resource: https://www.paciellogroup.com/products/arc-api/
“Permanecer en un estado
constante de reacción ante
nuevos problemas significa
que siempre estarás un
paso atrás.”
@lisyarmas

28. Herramientas
axe Devtools
(WorldSpace Attest)
¿Cómo la IC nos
ayuda en la a11y?
Probar más plataformas
Evitar regresiones
Fomentar la cobertura de
prueba
Mover más a la izquierda a11y
(Shift Left a11y)
@lisyarmas

29. Next Release Sprint
1. Incluir requerimientos de
accesibilidad
2. Temprana revisión de los
prototipos
3. Revisión automatizada
en la IC.
4. Revisión manual y
automatizada del
código.
5. Pruebas con usuarios
Deploy
6. Revisión en producción
Shift Left a11y
@lisyarmas

30. Revisión manual
Orden de tabulación
Técnicas de Filtrado
Revisión del contraste de
colores en la aplicación
Zoom
Navegar con el solo
uso del teclado
Prueba con lectores de
pantalla
Comprobación del foco
@lisyarmas

31. Revisión automatizada del código
Resources:
https://www.w3.org/WAI/ER/tools/
Top 25 Awesome Accessibility Testing Tools for Websites
@lisyarmas

32. Next Release Sprint
1. Incluir requerimientos de
accesibilidad
2. Temprana revisión de los
prototipos
3. Revisión automatizada
en la IC.
4. Revisión manual y
automatizada del código.
5. Pruebas con usuarios
Deploy
6. Revisión en producción
Shift Left a11y
@lisyarmas

33. El testing automatizado NO puede
sustituir a las pruebas manuales y el
feedback real de los usuarios.
@lisyarmas

34. Next Release Sprint
1. Incluir requerimientos de
accesibilidad
2. Temprana revisión de los
prototipos
3. Revisión automatizada
en la IC.
4. Revisión manual y
automatizada del código.
5. Pruebas con usuarios
Deploy
6. Revisión en producción
Shift Left a11y
@lisyarmas

35. Pruebas de accesibilidad
en Producción
@lisyarmas

36. Next Release Sprint
1. Incluir requerimientos de
accesibilidad
2. Temprana revisión de los
prototipos
3. Revisión automatizada
en la IC.
4. Revisión manual y
automatizada del código.
5. Pruebas con usuarios
Deploy
6. Revisión en producción,
identificar errores.
Shift Left a11y
@lisyarmas

37. Tod@s somos responsables
por la accesibilidad en el
equipo.
@lisyarmas

38. Resource: https://webaim.org/blog/motivating-accessibility-change/
“Más inspiración menos culpabilidad”
@lisyarmas

39. Resource: https://www.deque.com/empathy-lab-online/ @lisyarmas

40. «Nunca dudes que un pequeño grupo de personas
comprometidas pueda cambiar el mundo. De hecho, es
lo único que lo ha logrado»
Margaret Mead
Fortalecer el trabajo en equipo.
@lisyarmas

41. Agenda
● Shift Left a11y
● Solución: modelo y hábitos
● ¿Cómo podemos lograrlo?
1
2
3
@lisyarmas

42. @lisyarmas

43. Muchas gracias!!!
¿Preguntas?
Comentarios!
@lisyarmas

44. Shift Left a11y:
Moviendo la accesibilidad a
la izquierda
Lisandra Armas
Senior Quality Engineer
Accessibility Advocate
@lisyarmas