Este documento trata sobre cómo hacer las aplicaciones más accesibles para más de mil millones de usuarios con discapacidad. Explica que la accesibilidad beneficia a todos los usuarios y que diseñando primero para discapacidad se pueden encontrar mejores soluciones. También presenta conceptos clave como los principios de la WCAG y formas de verificar la accesibilidad de una aplicación.

1. ¿Cómo hacer mi
aplicación accesible
para más de mil
millones de usuarios?
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 https://blog.fluidui.com/designers-lets-talk-about-accessibility/

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

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

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

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

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

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

15. @lisyarmas | @AbstractaUS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

51. @lisyarmas | @AbstractaUS@lisyarmas | @AbstractaUS

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

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

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

55. @lisyarmas | @AbstractaUS
¿Cómo seguir?
100% Remoto 👩‍💻👨‍💻
Comienza el 18 de junio.
Aún hay cupos! 🚀
Formulario de
inscripción:
http://bit.ly/3bqChCM

56. @lisyarmas | @AbstractaUS@lisyarmas | @AbstractaUS

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

58. @lisyarmas | @AbstractaUS
Muchas gracias!

59. @lisyarmas | @AbstractaUS