Este documento trata sobre cómo hacer aplicaciones accesibles para más de 1 billón de usuarios. Explica que actualmente hay aproximadamente 1.1 billón de personas con algún tipo de discapacidad según la Organización Mundial de la Salud. Luego resume los principales puntos de la guía WCAG 2.1 sobre accesibilidad web, incluyendo sus 4 principios, 13 pautas y 78 criterios. Finalmente, ofrece 7 consejos prácticos para comenzar a hacer aplicaciones más accesibles.

1. Lisandra Armas
@lisyarmas
#GX29
¿Cómo hacer mi aplicación
accesible para más de
1 billón de usuarios?

2. ¿1 billón?
7.700 millones

3. +1000 millones
http://www.who.int/disabilities/world_report/2011/es/

4. 1.094.215.000
@lisyarmas | @AbstractaUS | @GeneXus

5. Visual Auditiva Motora Cognitiva
Source: Microsoft’s inclusive design toolkit@lisyarmas | @AbstractaUS | @GeneXus

6. @lisyarmas | @AbstractaUS | @GeneXus

7. La accesibilidad es fundamental para un
15% de la población y para el 100% es
confortable.
@lisyarmas | @AbstractaUS | @GeneXus

8. @lisyarmas | @AbstractaUS | @GeneXus

9. AGENDA
@lisyarmas | @AbstractaUS | @GeneXus
Intro a la WCAG
y sus Principios
7 TIPS Chequeando la
accesibilidad
Ideas accesibles

10. AGENDA
@lisyarmas | @AbstractaUS | @GeneXus
Intro a la WCAG
y sus Principios
7 TIPS Chequeando la
accesibilidad
Ideas accesibles

11. 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/@lisyarmas | @AbstractaUS | @GeneXus

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

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

14. 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
@lisyarmas | @AbstractaUS | @GeneXus

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

16. 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
@lisyarmas | @AbstractaUS | @GeneXus

17. 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
@lisyarmas | @AbstractaUS | @GeneXus

18. 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
@lisyarmas | @AbstractaUS | @GeneXus

19. 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
@lisyarmas | @AbstractaUS | @GeneXus

20. 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
@lisyarmas | @AbstractaUS | @GeneXus

21. 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
@lisyarmas | @AbstractaUS | @GeneXus

22. Ejemplo de Producto de Apoyo

23. Ejemplo de Producto de Apoyo
https://youtu.be/YphxuTLIC0s

24. Intro a la WCAG
y sus Principios
7 TIPS Chequeando la
accesibilidad
Ideas accesibles
AGENDA
@lisyarmas | @AbstractaUS | @GeneXus

25. 7 TIPS para comenzar hacer tu aplicación más accesible
@lisyarmas | @AbstractaUS | @GeneXus

26. 1. Incluye textos alternativos
@lisyarmas | @AbstractaUS | @GeneXus

27. Perceptible – Textos Alternativos
GeneXus Community Wiki@lisyarmas | @AbstractaUS | @GeneXus
IMAGEN.JPG
BOTÓN
alt= IMAGEN.JPG
ACEPTAR
BOTÓN
alt= ACEPTAR

28. 2. Haz tu aplicación responsive
@lisyarmas | @AbstractaUS | @GeneXus

29. Perceptible – Estructura del contenido
GeneXus Community Wiki@lisyarmas | @AbstractaUS | @GeneXus

30. 3. Provee suficiente contraste de color.
@lisyarmas | @AbstractaUS | @GeneXus

31. Perceptible – Contraste de colores
GeneXus Community Wiki@lisyarmas | @AbstractaUS | @GeneXus

32. 4. Verifica el soporte de navegación del teclado.
@lisyarmas | @AbstractaUS | @GeneXus

33. CancelarAceptar
Operable – Accesible por teclado
CancelarAceptar
GeneXus Community Wiki@lisyarmas | @AbstractaUS | @GeneXus

34. 5. Ofrece estados de enfoque usables.
@lisyarmas | @AbstractaUS | @GeneXus

35. Operable – Foco
II
GeneXus Community Wiki@lisyarmas | @AbstractaUS | @GeneXus

36. 6. Ayuda a los usuarios a evitar y corregir errores.
@lisyarmas | @AbstractaUS | @GeneXus

37. Comprensible – Ayuda contextual
I7I7.421.578-1
GeneXus Community Wiki@lisyarmas | @AbstractaUS | @GeneXus

38. 7. Haz tu aplicación robusta.
@lisyarmas | @AbstractaUS | @GeneXus

39. Robusto – Compatibilidad con productos de apoyo
Matias
Perez Perez
Cancelar Continuar
Matias
Perez Perez
Cancelar Continuar
GeneXus Community Wiki@lisyarmas | @AbstractaUS | @GeneXus
Ejemplo usando un Lector de Pantalla como producto de apoyo

40. Cancelar Continuar
Matias
Perez Perez
Cancelar Continuar
Robusto – Compatibilidad con productos de apoyo
GeneXus Community Wiki@lisyarmas | @AbstractaUS | @GeneXus
Ejemplo usando un Lector de Pantalla como producto de apoyo

41. Intro a la WCAG
y sus Principios
7 TIPS Chequeando la
accesibilidad
Ideas accesibles
AGENDA
@lisyarmas | @AbstractaUS | @GeneXus

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

43. Intro a la WCAG
y sus Principios
7 TIPS Chequeando la
accesibilidad
Ideas accesibles
AGENDA
@lisyarmas | @AbstractaUS | @GeneXus

44. Haz que la accesibilidad sea parte de la
elaboración de tu diseño y desarrollo
@lisyarmas | @AbstractaUS | @GeneXus

45. @lisyarmas | @AbstractaUS | @GeneXus
www.fundacionbl.orgwww.humanain.com

46. #inclusión
@lisyarmas | @AbstractaUS | @GeneXus

47. Lisandra Armas
@lisyarmas
#GX29
¿Cómo hacer mi aplicación
accesible para más de
1 billón de usuarios?
#GX29
Muchas gracias!