Presentación en Evento Mendoza Testing Day 2021

1. Pruebas de
Accesibilidad
Técnicas de Filtrado y evaluación
con Herramientas Automáticas
Ing. Lisandra Armas
@lisyarmas

2. ¿Cómo se imaginan el futuro del Testing?

4. Misión:
Usuarios Felices
con acceso a
aplicaciones
accesibles,
inclusivas,
usables, rápidas
y seguras.

5. Software Engineer
ISTQB Foundation
Docente del Diplomado Testing de Software en la
Universidad Católica de Bolivia
uxanda11ytesting.com
+9 años de experiencia en Testing
Senior Quality Engineer
Accessibility Specialist
Speaker Internacional (Mega Testing Week, Argentesting, Mendoza
Testing Day, Bolivia-Chile Testing Day, TestingUY, VLCTesting20)
Viajar y conocer el mundo
Aficionada a la fotografía @lisyarmas

6. Agenda
1. ¿Cómo prepararnos para las pruebas?
2. Técnicas de Filtrado/Pruebas Manuales
3. Herramientas de Evaluación Automática

7. Agenda
1. ¿Cómo prepararnos para las pruebas?
2. Técnicas de Filtrado/Pruebas Manuales
3. Herramientas de Evaluación Automática

8. ¿Cómo prepararnos?
Pruebas de
Accesibilidad
Aplicación en
desarrollo o en
Producción
Aplicación que
se desarrolla
desde cero

9. ¿Cómo prepararnos?
Aplicación desde cero
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
https://www.slideshare.net/LisandraArmasguila/shift-l
eft-a11y-haz-tu-aplicacin-accesible-para-ms-de-mil-
millones-de-usuarios
https://youtu.be/N3TNrhgbj_Q

10. ¿Cómo prepararnos?
Aplicación en desarrollo o en Producción
https://www.w3.org/TR/WCAG-EM/
Website Accessibility Conformance
Evaluation Methodology (WCAG-EM)
Principales actividades que se realizan:
● Identificar tamaño de la aplicación (total
de pantallas que presenta, pantallas del
flujo principal y más accedido por los
usuarios)
● Tecnologías y recursos que se utilizan (audio,
video, documentos PDF, HTML, WAI-ARIA,
etc.)
● Validar con el equipo del proyecto que
nivel se aspira llegar (por lo general es el
AA)
● Elaborar listado de los navegadores web, los
productos de apoyo u otros agentes de
usuario que serán considerados en la
prueba.
● Elaborar informe con los resultados
obtenidos, evidencia de criterios evaluados,
recomendaciones, etc.

11. Agenda
1. ¿Cómo prepararnos para las pruebas?
2. Técnicas de Filtrado/Pruebas Manuales
3. Herramientas de Evaluación Automática

12. El 70% de los criterios de
evaluación de la WCAG se
comprueban de forma manual
https://blog.usablenet.com/quick-guide-to-manual-accessibility-testing-and-why-its-important

13. https://www.w3.org/TR/WCAG21/
Recordando...

14. Principales Técnicas de Filtrado/Pruebas Manuales

15. Principales Técnicas de Filtrado/Pruebas Manuales
Contraste de colores
Más info: https://webaim.org/articles/contrast/
Objetivo: Validar el contraste de colores entre texto, links, imágenes del primer plano
contra el color de fondo.
Tipos de errores más comunes:
- Textos y Links pocos legibles.
- Uso de gris sobre fondo blanco o tonalidad gris.
- Uso de colores relacionados a la marca o logo del negocio que
no son compatibles.
1/6

16. Revisión del contraste de
colores en la aplicación
Colour Contrast Analyser
Contrast Finder
1/6
Principales Técnicas de Filtrado/Pruebas Manuales
https://uxanda11ytesting.com/pruebas-de-accesibilidad-con-contrast-finder/
https://uxanda11ytesting.com/como-usar-la-herramienta-colour-contrast-analyser/
https://webaim.org/resources/contrastchecker/

17. Principales Técnicas de Filtrado/Pruebas Manuales
Zoom
Objetivo: Validar que al 200% o más la aplicación mantenga una estructura del
contenido organizada y no se pierda información relevante.
Tipos de errores más comunes:
- Scroll horizontal.
- Solapamiento de imágenes y textos.
- Parte del contenido no se actualiza al zoom definido.
- Contenido desorganizado.
- Orden de navegación se afecta y no es consistente.
2/6
Más info: https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=144#resize-text

18. Zoom
2/6
Principales Técnicas de Filtrado/Pruebas Manuales

19. Principales Técnicas de Filtrado/Pruebas Manuales
Solo uso del teclado
Objetivo: Validar que la aplicación sea navegable con el solo uso del teclado.
Tipos de errores más comunes:
- No se muestra el indicador del foco.
- Orden de navegación inconsistente.
- Elementos que no deberían reciben el enfoque del teclado.
- Navegación larga.
Más info: https://webaim.org/techniques/keyboard/
3/6

20. Principales Técnicas de Filtrado/Pruebas Manuales
Comprobación del foco
Objetivo: Validar que el foco esté visible al navegar a través del teclado por la
aplicación.
Tipos de errores más comunes:
- Se desactiva el foco desde las opciones del CSS.
- Bajo contraste del foco.
- Foco intermitente (en ocasiones no se visualiza).
Más info: https://webaim.org/blog/progress-on-focus-indicators/
4/6

21. Principales Técnicas de Filtrado/Pruebas Manuales
Orden de tabulación
Objetivo: Validar que el orden de navegación sea consistente y tengo un orden lógico.
Tipos de errores más comunes:
- Navegación inconsistente.
- Omisión de acceso a opciones relevantes de la página.
5/6
Más info: https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

22. Principales Técnicas de Filtrado/Pruebas Manuales
Prueba con lectores de
pantalla
Más info: https://webaim.org/articles/screenreader_testing/
https://webaim.org/techniques/screenreader/
Objetivo: Validar que la aplicación sea compatible con el lector de pantalla y que se le
informe al usuario el contenido de una forma entendible.
Tipos de errores más comunes:
- Uso inadecuado de textos alternativos.
- Orden de navegación.
- Incorrecta definición del lenguaje de la aplicación.
6/6

23. Principales Técnicas de Filtrado/Pruebas Manuales
Orden de tabulación
Revisión del contraste de
colores en la aplicación Zoom Solo uso del teclado
Prueba con lectores de
pantalla
Comprobación del foco
Más info: https://www.w3.org/WAI/test-evaluate/preliminary/

24. Agenda
1. ¿Cómo prepararnos para las pruebas?
2. Técnicas de Filtrado/Pruebas Manuales
3. Herramientas de Evaluación Automática

25. Principales herramientas de evaluación automática

26. Herramienta de evaluación automática: aXe
1/4
https://www.deque.com/axe/

27. Herramienta de evaluación automática: aXe
1/4
https://www.deque.com/axe/

28. Herramienta de evaluación automática: WAVE
https://uxanda11ytesting.com/como-evaluar-la-accesibilidad-de-un-sitio-web-con-la-herramienta-wave/
URL: https://wave.webaim.org/
2/4

29. Herramienta de evaluación automática: WAVE
2/4

30. Herramienta de evaluación automática: ARCToolkit
https://www.tpgi.com/arc-platform/arc-toolkit/
3/4

31. Herramienta de evaluación automática: Test de Accesibilidad
https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor
4/4

32. Principales herramientas de evaluación automática
Más info:
https://www.w3.org/WAI/ER/tools/
Top 25 Awesome Accessibility Testing Tools for Websites

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

34. https://fundacionbl.org/
https://nexosuruguay.com.uy/
Pruebas con usuarios

35. Agenda
1. ¿Cómo prepararnos para las pruebas?
2. Técnicas de Filtrado/Pruebas Manuales
3. Herramientas de Evaluación Automática

36. ¿Cómo seguir?

37. Fórmula - Pruebas de Accesibilidad

38. Muchas gracias!
Let's keep in touch!
Twitter: @lisyarmas
LinkedIn: /lisandra-armas-aguila/