Los mil millones de usuarios que debes considerar en tus pruebas por Lisandra Armas.

1. Los mil millones
de usuarios que
debes considerar
en tus pruebas
Ing. Lisandra Armas
@lisyarmas

2. Mobile UX, Usabilidad & Accesibilidad
QE Leader

3. @lisyarmas | @AbstractaUS@lisyarmas | @AbstractaUS

4. @lisyarmas | @AbstractaUS
¿Son accesibles las aplicaciones?
@lisyarmas | @AbstractaUS

5. @lisyarmas | @AbstractaUS
+15%
+1000 millones
http://www.who.int/disabilities/world_report/2011/es/@lisyarmas | @AbstractaUS

6. @lisyarmas | @AbstractaUS
10,5%
4.999.441 personas
http://www.who.int/disabilities/world_report/2011/es/@lisyarmas | @AbstractaUS
https://datosmacro.expansion.com/demografia/poblacion/costa-ricahttps://www.elmundo.cr/costa-rica/costa-rica-personas-discapacitadas-
conforman-105-la-poblacion/

7. @lisyarmas | @AbstractaUS
Productos de apoyo1
PautasdeAccesibilidad2
Herramientasdecomprobación3
Agenda

8. @lisyarmas | @AbstractaUS
Productos de apoyo1
PautasdeAccesibilidad2
Herramientasdecomprobación3
Agenda

9. @lisyarmas | @AbstractaUS
TalkBack/VoiceOver
Zoom
Dictado
Productos de apoyo de Accesibilidad para Usuarios
Visual Lectores de Pantalla
Magnificadores de Pantalla
Navegadores Alternativos
Traductores de braille

10. @lisyarmas | @AbstractaUS
Subtítulos
Alertas visibles y
vibratorias
Auditiva
Subtítulos
Alertas visibles
Productos de apoyo de Accesibilidad para Usuarios

11. @lisyarmas | @AbstractaUS
Switch Access/Control
AssistiveTouch
Motriz Teclados Virtuales
Mouse especiales
Productos de apoyo de Accesibilidad para Usuarios

12. @lisyarmas | @AbstractaUS
Navegadores AccesiblesCognitivaAcceso Guiado
Apoyo Lector
Productos de apoyo de Accesibilidad para Usuarios

13. @lisyarmas | @AbstractaUS

14. @lisyarmas | @AbstractaUS
La falta de accesibilidad nos impacta a
TODOS

15. @lisyarmas | @AbstractaUS
Las mejoras de accesibilidad nos favorece a
TODOS

16. @lisyarmas | @AbstractaUS
"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
@lisyarmas | @AbstractaUS https://www.ted.com/speakers/elise_ro

17. @lisyarmas | @AbstractaUS
Productos de apoyo1
PautasdeAccesibilidad2
Herramientasdecomprobación3
Agenda

18. @lisyarmas | @AbstractaUS
Productos de apoyo1
PautasdeAccesibilidad2
Herramientasdecomprobación3
Agenda

19. @lisyarmas | @AbstractaUS
WCAG 2.1
Historia de la WCAG
5 de Mayo
1999
11 de Diciembre
2008
Octubre
2012
5 de Junio
2018
WCAG 1.0
publicada por la
W3C (foco en
HTML)
WCAG 2.0
adoptada como
estándar digital
de accesibilidad
WCAG 2.0
es establecida
por la ISO como
estándar digital
de accesibilidad
WCAG 2.1
la W3C publica
nueva
recomendación
Next
SILVER
WCAG
Ag
https://www.deque.com/blog/wcag-2-1-what-is-next-for-
accessibility-guidelines/

20. @lisyarmas | @AbstractaUS
4 Principios
13 Pautas
78 Criterios
WCAG 2.1
Guía de Accesibilidad
Niveles
de
Conformidad
A/AA/AAA

21. @lisyarmas | @AbstractaUS
78 criterios!!!

22. @lisyarmas | @AbstractaUS
WCAG
2.1
Perceptible Operable
ComprensibleRobusto
Principios de Accesibilidad

23. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
“La información y los
componentes de la interfaz
de usuario deben ser
presentados a los usuarios
de modo que ellos puedan
percibirlos.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

24. @lisyarmas | @AbstractaUS
ACEPTAR BOTÓN
Perceptible – Textos Alternativos
BUTTON1 BOTÓN
Aceptar Cancelar
alt= button1
Aceptar Cancelar
alt= Aceptar

25. @lisyarmas | @AbstractaUS
AceptarCancelar
Perceptible – Zoom
Aceptar
Cancelar

26. @lisyarmas | @AbstractaUS
Perceptible – Contraste de colores
Aceptar Cancelar
Nombre
Apellidos
Aceptar Cancelar
Nombre
Apellidos

27. @lisyarmas | @AbstractaUS
Perceptible – Contraste de colores
Colour Contrast Analyser
https://developer.paciellogroup.com/resources/contrastanalyser/

28. @lisyarmas | @AbstractaUS

29. @lisyarmas | @AbstractaUS

30. @lisyarmas | @AbstractaUS
Probando
con
Colour Contrast
Analyser
(CCA)
@lisyarmas | @AbstractaUS

31. @lisyarmas | @AbstractaUS
Ventana Principal

32. @lisyarmas | @AbstractaUS
Barra de menú
Colour Contrast
Analyser (CCA)
About CCA Preferences

33. @lisyarmas | @AbstractaUS
Barra de menú
Edit
Copy results

34. @lisyarmas | @AbstractaUS
Barra de menú
View
Colour blindness
simulation
(Window, macOS)

35. @lisyarmas | @AbstractaUS

36. @lisyarmas | @AbstractaUS
Contrast ratio
Contraste de colores: la relación de la luminiscencia relativa de los colores
de primer plano y de fondo.
Varía desde un mínimo de 1 (cuando los colores
de primer plano y de fondo son los mismos)
hasta un máximo de 21 (negro sobre blanco).

37. @lisyarmas | @AbstractaUS
Para prevenir estos errores y conocer si cumplimos o no con los requisitos de
contraste, la WCAG 2.1 nos plantea:
Nivel Radio de Contraste
Texto Normal Texto Grande
AA 4.5:1 3:1
AAA 7:1 4.5:1
*** El texto grande se define como 14 puntos (típicamente 18.66px) en
negrita o más grande, o 18 puntos (típicamente 24px) o mayor.

38. @lisyarmas | @AbstractaUS
Foreground &
Background colour
Se visualizan los colores seleccionados para el Primer plano y el Fondo.

39. @lisyarmas | @AbstractaUS
No estamos libres de Bug!

40. @lisyarmas | @AbstractaUS
Foreground &
Background colour
HEX: Compuesto por 3 bytes números hexadecimal (6 dígitos) que representan la
intensidad de rojo, verde y azul en el color.
RGB (del inglés Red, Green, Blue): Representa los colores Rojo, Verde y Azul que podrán
ajustarlos para crear una combinación de colores específicos.
HSL (del inglés Hue, Saturation, Lightness): Representa el Matiz, Saturación y Luminosidad
donde podrán ajustar el valor para modificar la tonalidad del color seleccionado.

41. @lisyarmas | @AbstractaUS
Ajustes manuales de RGB y HSL

42. @lisyarmas | @AbstractaUS
Cuenta Gotas

43. @lisyarmas | @AbstractaUS
Ayuda
Vista previa

44. @lisyarmas | @AbstractaUS
WCAG 2.1 Results

45. @lisyarmas | @AbstractaUS
No presentan un requisito mínimo de contraste:
• Textos grandes: Textos e imágenes grandes que tengan una
relación de contraste mínimo de 3:1.
• Textos o imágenes: que son parte de la decoración y no son
contenidos significativos con los cuales el usuario interactúa.
• Logotipos: que contengan texto o el nombre de una marca.

46. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
“Los componentes de la
interfaz de usuario y la
navegación deben ser
operables.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

47. @lisyarmas | @AbstractaUS
Operable - Ubicación
Solicitar Partida de Nacimiento
Continuar
Información
Nombre
Apellidos
Cancelar
Solicitar
Continuar
Nombre
Apellidos
Información
Cancelar
Datos

48. @lisyarmas | @AbstractaUS
Continuar
|
Información
Cancelar
Nombre
Apellidos
Operable - Foco
Continuar
Información
Nombre
Apellidos
Cancelar
|

49. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
“La información y el manejo
de la interfaz de usuario
deben ser comprensibles.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

50. @lisyarmas | @AbstractaUS
Comprensible – Texto Legible
Menú
Solicitar Partida de Nacimiento
Solicitar Partida de Matrimonio
Solicitar CI
FAQs
Volver
Menú
Solicitar Partida de Nacimiento
Solicitar Partida de Matrimonio
Solicitar Cédula de Identidad
Preguntas Frecuentes
Volver

51. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
“El contenido debe ser
suficientemente robusto
como para ser interpretado
de forma fiable por los
productos de apoyo.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

52. @lisyarmas | @AbstractaUS
Solicitar Partida de Nacimiento
Continuar
Matias
Perez Perez
Información
Nombre
Apellidos
Cancelar
Solicitar Partida de Nacimiento
Continuar
Matias
Perez Perez
Información
Nombre
Apellidos
Cancelar
Robusto – Productos de apoyo

53. @lisyarmas | @AbstractaUS
Solicitar Partida de Nacimiento
Continuar
Información
Nombre
Apellidos
Cancelar
Solicitar Partida de Nacimiento
Continuar
Información
Dirección
Teléfono
Cancelar
Robusto – Productos de apoyo

54. @lisyarmas | @AbstractaUS
Productos de apoyo1
PautasdeAccesibilidad2
Herramientasdecomprobación3
Agenda

55. @lisyarmas | @AbstractaUS
Comprobación de Accesibilidad
https://www.w3.org/WAI/ER/tools/Más validadores:

56. @lisyarmas | @AbstractaUS
Probando con
aXe
@lisyarmas | @AbstractaUS

57. @lisyarmas | @AbstractaUS
Comprobación de Accesibilidad - aXe
aXe Extension. Pestaña "aXe" en la "Herramientas de desarrolladores" de Chrome
https://dequeuniversity.com/rules/axe/3.
2

58. @lisyarmas | @AbstractaUS
Comprobación de Accesibilidad - aXe
Resultados de la comprobación automática de accesibilidad

59. @lisyarmas | @AbstractaUS
Comprobación de Accesibilidad - aXe
Resultados de la comprobación automática de accesibilidad
Paginación
Relevancia
Descripción
Normativa

60. @lisyarmas | @AbstractaUS
Mucho cuidado!
Con los Falsos Positivos
Es importante realizar una validación manual y
comprobar si efectivamente es un error.

61. @lisyarmas | @AbstractaUS
Pruebas
de
Accesibilidad
Revisión
Manual
Extensiones
de
Accesibilidad
Pruebas con
Tecnología
Asistiva
Herramientas
de Evaluación
Online
Pruebas de Accesibilidad
http://www.professionalqa.com/accessibility-testing

62. @lisyarmas | @AbstractaUS@lisyarmas | @AbstractaUS

63. @lisyarmas | @AbstractaUS@lisyarmas | @AbstractaUS

64. @lisyarmas | @AbstractaUS@lisyarmas | @AbstractaUS

65. Preguntas?
Muchas gracias!!!
Ing. Lisandra Armas
@lisyarmas