Diapositivas para mi charla "Accesibilidad Web 101" presentada en NG Bolivia 2019

1. ACCESIBILIDAD WEB 101
Introducción a la Accesibilidad Web
Leonardo Graterol

2. ¡HOLA!
Leonardo Graterol

3. 1.
A11y
¿Por Qué? ¿Qué?

4. La Organización Mundial de la Salud
reporta que hay 1000 millones de
personas en el mundo experimentando
alguna forma de discapacidad

5. WWW

6. WWW Eliminar las
barreras
Entregar acceso
a nuevas
oportunidades

7. Accesibilidad
¿Qué es eso?
Espacios digitales que son
usables y entendibles por el
mayor grupo de personas posible

8. Accesibilidad
Esfuerzo Multidisciplinario

9. HABILIDAD + BARRERA = DISCAPACIDAD
A Web for Everyone: Designing Accessible User Experiences
Sarah Horton and Whitney Quesenbery

10. ACCESIBILIDAD
Debe ser un
feature
obligatorio, es un
derecho humano
básico

11. ...derribar
las
barreras

12. Demandas
por
Accesibilidad
Multas de cientos
de miles de dólares

13. El poder de la web se encuentra en su
universalidad, el acceso por cualquier
persona, sin importar las discapacidades
es uno de sus aspectos esenciales
Tim Berners-Lee
Inventor de la world-wide web y
director del W3C

14. 2.
WCAG + POUR

15. Web Content Accessibility Guidelines
PPerceivable
OOperable
UUnderstandable
RRobust
4 principios fundamentales

16. 13 Pautas o Guías
61 Criterios de Éxito
A AA AAA
3 Niveles de Cumplimiento

17. Percibible
Considera todas las
distintas formas en
que las personas
con discapacidad
reciben
información
sensorial

18. “Percibible
Pauta 1.1
Alternativas de texto
Proveer alternativas de
texto para cualquier
contenido no textual,
para que pueda ser
presentado de
cualquier forma que los
usuarios necesiten.

19. “Percibible
Pauta 1.2
Medios que dependen
del tiempo
Proveer alternativas
para contenido
multimedia basado en
el tiempo

20. “Percibible
Pauta 1.3
Adaptable
Crea contenido que
pueda ser presentado
de distintas formas sin
perder información o
estructura

21. “Percibible
Pauta 1.4
Distinguible
Hazle fácil a los
usuarios ver y escuchar
el contenido,
incluyendo separando
el fondo del contenido
principal

22. Sitios web creados
de formas que
permitan interactuar
a través de distintos
métodos
independiente del
nivel de habilidad del
usuario
Operable

23. “Operable
Pauta 2.1
Accesible por Teclado
Haz toda la
funcionalidad de la web
accesible por teclado

24. “Operable
Pauta 2.2
Suficiente tiempo
Provee a los usuarios
de suficiente tiempo
para leer y usar el
contenido

25. “Operable
Pauta 2.3
Convulsiones y
reacciones físicas
No diseñes contenido
de maneras que se
saben que pueden
ocasionar convulsiones
o reacciones físicas

26. “Operable
Pauta 2.4
Navegable
Provee mecanismos
que ayuden a los
usuarios a navegar,
encontrar contenido y
determinar en donde
están

27. “Operable
Pauta 2.5
Modalidades de
entrada
Haz fácil para los
usuarios operar la
funcionalidad a través
de varios mecanismo
de entrada más allá del
teclado

28. Sitios web que le
permiten al usuario
entender la
información
presentada y los
mecanismos de
operación de la
interfaz
Entendible

29. “Entendible
Pauta 3.1
Legible
Haz el contenido
textual legible y
entendible

30. “
Pauta 3.2
Predecible
Haz que las páginas
webs luzcan y operen
de formas predecibles
Entendible

31. “
Pauta 3.3
Asistencia para
campos
Ayuda a los usuarios a
evitar y corregir los
errores
Entendible

32. Robusto
Sitios web que
pueden ser
operados con
múltiples agentes
de usuario y
herramientas,
presentes y futuras

33. “
Pauta 4.1
Compatible
Maximiza la
compatibilidad con
agentes de usuario
actuales y futuros,
incluyendo tecnologías
asistivas
Robusto

34. Las Guidelines
(Pautas o Directivas)
Detalles de
Implementación
Técnica
WCAG 2.1
Criterios de
Cumplimiento
Verificables
Relacionado al
“como” de la
accesibilidad
web https://www.w3.org/WAI/standards-guidelines/wcag/

35. Los Principios
Fundacional
POUR
Ayudar a los
usuarios a
cumplir sus
tareas
Explica el
“porque” de la
accesibilidad
web

36. 3.
Semántica
Web y ARIA

37. Semántica web
y accesibilidad
● Usar una jerarquía apropiada de elementos de
encabezado, para títulos y subtítulos
●
●

38. Semántica y el
árbol de
accesibilidad
●
● Usar los controles de formularios correctos
como campos de texto, botones radio y
checkboxes para crear elementos interactivos
de formulario
●

39. Semántica web
y accesibilidad
●
●
● Usar los elementos HTML semánticamente
correctos como <header>, <article>, <footer>
para definir

40. Desarrollar sitios web
semánticos resuelve más del
50% de los problemas de
accesibilidad más comunes

41. WAI-ARIA:
Accesibilidad más allá de la
semántica
Accessible Rich Internet Applications
▹ Especificación escrita por la Web
Accessibility Initiative W3C
▹

42. WAI-ARIA:
Accesibilidad más allá de la
semántica
Accessible Rich Internet Applications
▹
▹ Extiende los features de accesibilidad de
los elementos nativos y semánticos

43. ARIA
¿Cuándo
debería usarlo?
● Definir regiones en nuestro contenido
●
●
●
●

44. ARIA
¿Cuándo
debería usarlo?
●
● Actualizaciones dinámicas de contenido
●
●
●

45. ARIA
¿Cuándo
debería usarlo?
●
●
● Mejorar la accesibilidad de teclado
●
●

46. ARIA
¿Cuándo
debería usarlo?
●
●
●
● Hacer accesibles los controles no
semánticos (Solución parche)
●

47. ARIA
¿Cuándo
debería usarlo?
●
●
●
●
● Controlar mejor el árbol de accesibilidad

48. Usamos la semántica HTML, Javascript y la
especificación ARIA para diseñar una
experiencia de usuario dedicada para
tecnologías asistivas, de la misma forma
que usamos CSS y HTML para diseñar
experiencias visuales.

49. 4.
Testing,
Herramientas,
Recursos de
Aprendizaje

50. Screen
Readers
● NVDA:
● JAWS:
● VoiceOver:
● ChromeVox:
● Orca:

51. Extensiones
de Browser
● aXe
● Wave:
● Chrome DevTools
● NoCoffee
● Firefox Dev Tools

52. Recursos
para
aprender
más
● WCAG2.1:
○
● WAI-ARIA
○
○
● MDN tutoriales de accesibilidad:
○
● W3C introducción a la accesibilidad:
○

53. Gracias… totales!
Hora de las preguntas