Webinar Introducción a la Accesibilidad en Avantica

1. Introducción a la
Accesibilidad
www.abstracta.us
Lisandra Armas
Accessibility Specialist
QE Lead
@lisyarmas

2. Mobile UX, Usabilidad & Accesibilidad
QE Leader

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

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

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

6. @lisyarmas | @AbstractaUS
1.094.215.000
Población Aproximada Continente Americano

7. @lisyarmas | @AbstractaUS
Visual Auditiva Motora Cognitiva
Source: Microsoft’s inclusive design toolkit
Permanente Temporal Situacional

8. @lisyarmas | @AbstractaUS Source:https://www.microsoft.com/design/inclusive/
“Curb cut” effect

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

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

11. @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
https://www.ted.com/speakers/elise_roy

12. @lisyarmas | @AbstractaUS
Donde se pensó que había un beneficio para
algunos, hoy en día el beneficio es para todos
estemos o no en situación de discapacidad.

13. @lisyarmas | @AbstractaUS

14. @lisyarmas | @AbstractaUS
AGENDA
Productos de
Apoyo
Intro a la WCAG
y sus Principios
Chequeando la
accesibilidad

15. @lisyarmas | @AbstractaUS
AGENDA
Productos de
Apoyo
Intro a la WCAG
y sus Principios
Chequeando la
accesibilidad

16. @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

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

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

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

20. @lisyarmas | @AbstractaUS
AGENDA
Productos de
Apoyo
Intro a la WCAG
y sus Principios
Chequeando la
accesibilidad

21. @lisyarmas | @AbstractaUS
AGENDA
Productos de
Apoyo
Intro a la WCAG
y sus Principios
Chequeando la
accesibilidad

22. @lisyarmas | @AbstractaUS https://www.w3.org/TR/WCAG21/

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

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

25. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
“Se enfoca en la información
y los componentes de la
interfaz de usuario.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

26. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
¿Hay algo en nuestra
aplicación que una persona
con baja visión, o algún tipo
de discapacidad visual no
pueda percibir?
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

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

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

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

30. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
“Se enfoca en las acciones
sobre los componentes de la
interfaz de usuario y la
navegación.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

31. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
¿Pueden los usuarios
controlar los elementos
interactivos de nuestro
aplicación?
¿Nuestra aplicación funciona
bien con el solo uso del
teclado?
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

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

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

34. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
“Se enfoca en que la
información sea entendible
y en la interacción con la
interfaz de la aplicación.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

35. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
¿Está todo el contenido
claramente escrito?
¿Todas las interacciones son
fáciles de entender?
¿Tiene sentido el orden de la
página?
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

36. @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

37. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
“Se enfoca en que el
contenido de nuestras
aplicaciones sea interpretado
de forma fiable por los
productos de apoyo.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

38. @lisyarmas | @AbstractaUS
Principios de Accesibilidad
WCAG 2.1
¿Nuestra aplicación solo es
compatible con los
navegadores o sistemas
operativos más recientes?
¿Funciona correctamente
con el lector de pantalla?
WCAG
2.1
Perceptible Operable
ComprensibleRobusto

39. @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

40. @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

41. @lisyarmas | @AbstractaUS
AGENDA
Productos de
Apoyo
Intro a la WCAG
y sus Principios
Chequeando la
accesibilidad

42. @lisyarmas | @AbstractaUS
AGENDA
Productos de
Apoyo
Intro a la WCAG
y sus Principios
Chequeando la
accesibilidad

43. @lisyarmas | @AbstractaUS
https://www.w3.org/WAI/ER/tools/Más validadores:
Accessibility Scanner
Ejemplo de herramientas de evaluación automática

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

45. @lisyarmas | @AbstractaUS
El testing automatizado no puede
sustituir a las pruebas manuales y el
feedback real de los usuarios.

46. @lisyarmas | @AbstractaUS
AGENDA
Productos de
Apoyo
Intro a la WCAG
y sus Principios
Chequeando la
accesibilidad

47. @lisyarmas | @AbstractaUS
¿Cómo seguir?
https://www.youtube.com/c/AbstractaUS

48. @lisyarmas | @AbstractaUS
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
Link YouTube: https://cutt.ly/jyDlzZk

49. @lisyarmas | @AbstractaUS@lisyarmas | @AbstractaUS

50. @lisyarmas | @AbstractaUS
“The accessibility problems of today are the
mainstream breakthroughs of tomorrow.”
Eve Andersson, Director, Accessibility Engineering, Google

51. @lisyarmas | @AbstractaUS
Muchas gracias!

52. @lisyarmas | @AbstractaUS