1.
Pruebas de Accesibilidad:
Técnicas de Filtrado,
Herramientas automáticas y
Pruebas con Usuarios
Ing. Lisandra Armas
@lisyarmas

2.
Agenda
1. Técnicas de Filtrado/Pruebas Manuales
2. Herramientas de Evaluación Automática
3. Pruebas con Usuarios

3.
Agenda
1. Técnicas de Filtrado/Pruebas Manuales
2. Herramientas de Evaluación Automática
3. Pruebas con Usuarios

4.
https://www.w3.org/TR/WCAG21/
WCAG 2.1

5.
El 70% de los criterios de
evaluación de las WCAG se
comprueban de forma manual

6.
Principales Técnicas de Filtrado/Pruebas Manuales

7.
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 gris.
- Uso de colores relacionados a la marca o logo del negocio que
no son compatibles.
- Uso de colores para transmitir información relevante.
1/6

8.
Revisión del contraste de
colores en la aplicación
Colour Contrast Analyser Contrast Finder
1/6
Principales Técnicas de Filtrado/Pruebas Manuales

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

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

11.
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.
- Los elementos decorativos reciben el enfoque del teclado.
- Navegación larga.
Más info: https://webaim.org/techniques/keyboard/
3/6

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

13.
Principales Técnicas de Filtrado/Pruebas Manuales
Orden de tabulación
Objetivo: Validar que el orden de navegación sea consistente y presente 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
https://devtoolstips.org/tips/en/visualize-tabbing-order/

14.
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 inconsistente.
- Incorrecta definición del lenguaje de la aplicación.
6/6

15.
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/

16.
Agenda
1. Técnicas de Filtrado/Pruebas Manuales
2. Herramientas de Evaluación Automática
3. Pruebas con Usuarios

17.
Principales herramientas de evaluación automática

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

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

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

21.
Herramienta de evaluación automática: WAVE
URL: https://wave.webaim.org/

22.
Herramienta de evaluación automática: WAVE

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

24.
Herramienta de evaluación automática para Android:
Test de Accesibilidad

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

26.
Agenda
1. Técnicas de Filtrado/Pruebas Manuales
2. Herramientas de Evaluación Automática
3. Pruebas con Usuarios

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

28.
Pruebas con Usuarios
P
O
U
R
erceivable (Perceptible)
perable (Operable)
nderstandable (Comprensible)
obust (Robusto)
Motriz
Control delicado, movimientos lentos, no mouse
Cognitiva
Impedimento para el aprendizaje, distracción, toma
de decisiones
Visual
Ceguera, baja visión, daltonismo
Auditiva
Sordera, problemas de audición

29.
Pruebas con Usuarios
Revisión Inicial
Rango de evaluación
de usuarios
.
Analizar
problemas de
accesibilidad
Sacar
conclusiones e
informar
Combinar
Evaluación de
usuarios con
estándares (WCAG)
05
01
02 03
04
Involucrar a los usuarios en las primeras etapas de los proyectos nos ayuda a
comprender los problemas de accesibilidad del mundo real
https://www.w3.org/WAI/test-evaluate/involving-users/

30.
Agenda
1. Técnicas de Filtrado/Pruebas Manuales
2. Herramientas de Evaluación Automática
3. Pruebas con Usuarios

31.
¿Cómo seguir?

32.
¿Cómo seguir?
CURSO:
Introducción a las Pruebas de Usabilidad, UX y
Accesibilidad
CÓDIGO: NOVUSTESTINGDAY
LINK:
https://www.udemy.com/course/introduccion-a-las-pruebas-de-us
abilidad-ux-y-accesibilidad/?couponCode=NOVUSTESTINGDAY

33.
Muchas
Gracias!
Let's keep in touch!
Blog: lisandra-armas.com
Twitter: @lisyarmas
LinkedIn: /lisandra-armas-aguila/