Webinar Introducción a la accesibilidad con a11y Perú

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

2. Mobile UX, Usabilidad & Accesibilidad
QE Leader

3. @NexosUruguay

4. @lisyarmas | @AbstractaUS@lisyarmas | @AbstractaUS

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

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

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

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

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

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

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

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

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

14. @lisyarmas | @AbstractaUS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

44. @lisyarmas | @AbstractaUS
https://www.w3.org/WAI/ER/tools/Más validadores:
Accessibility Scanner
Herramientas para chequear la accesibilidad

45. @lisyarmas | @AbstractaUS
Revisión con Checklist
Resource: WCAG Criteria Evaluation 2.1 [Template]

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

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

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

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

50. @lisyarmas | @AbstractaUS@lisyarmas | @AbstractaUS

51. @lisyarmas | @AbstractaUS
https://fundacionbl.org/https://www.humanain.com/ https://nexosuruguay.com.uy/

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

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

54. @lisyarmas | @AbstractaUS@lisyarmas | @AbstractaUS

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

56. @lisyarmas | @AbstractaUS
Muchas gracias!

57. @lisyarmas | @AbstractaUS