Diapositivas para mi charla Accesibilidad Web 101 presentada para el meetup de Women Who Code Buenos AIres

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

2. ¡HOLA!
Soy Leonardo Graterol
Venezolano, viviendo en Chile
UI Engineer @Globant
Mozilla Tech Speaker
@pankas87

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
La forma más
popular de
acceder a la
internet

6. WWW Eliminar las
barreras
Entregar acceso
a nuevas
oportunidades
La forma más
popular de
acceder a la
internet

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. WCAG 2.1
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.1
Alternativas de texto
Criterio 1.1.1
Contenido no Textual
Nivel A
Todo el contenido no
textual presentado al
usuario tiene una
alternativa de texto que
cumple con un propósito
equivalente

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

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

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

23. Percibible
Pauta 1.4
Distinguible
Criterio 1.4.1
Uso del Color
Nivel A
El color no es usado como
único mecanismo visual
para entregar
información, indicar una
acción, solicitar una
respuesta o distinguir un
elemento visual

24. Percibible
Pauta 1.4
Distinguible
Criterio 1.4.3
Contraste
Nivel AA
La representación visual
de texto e imágenes tiene
una proporción de
contraste de al menos
4.5:1

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

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

27. Operable
Pauta 2.1
Accesible por teclado
Criterio 2.1.3
Teclado
Nivel AAA
Toda la funcionalidad
del contenido es
operable por teclado

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

29. “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

30. Pauta 2.3
Convulsiones y
reacciones físicas
Criterio 2.3.1
Umbral de tres
parpadaeos
Nivel AA
Las páginas no contienen
elementos que parpadeen
3+ veces en 1 segundo o el
parpadeo está debajo del
umbral de parpadeos
Operable

31. Pauta 2.3
Convulsiones y
reacciones físicas
Criterio 2.3.2
Tres Parpadeos
Nivel AAA
Las páginas no
contienen elementos
que parpadeen 3+
veces en 1 segundo
Operable

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

33. Pauta 2.4
Navegable
Criterio 2.4.1
Saltar Bloques
Nivel A
Hay un mecanismo
disponible para saltar
bloques de contenido
que se repiten entre
páginas
Operable

34. Pauta 2.4
Navegable
Criterio 2.4.6
Encabezados y
Etiquetas
Nivel AA
Los encabezados y
etiquetas describen la
temática y propósito
Operable

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

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

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

38. Pauta 3.1
Legible
Criterio 3.1.1
Idioma de la página
Nivel A
El idioma de una
página web puede ser
determinado
programáticamente
Entendible

39. Pauta 3.1
Legible
Criterio 3.1.2
Idioma de secciones
Nivel AA
El idioma de cada
pasaje o frase de una
página puede ser
determinado
programáticamente
Entendible

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

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

42. Pauta 3.3
Asistencia para campos
Criterio 3.3.1
Identificación de Errores
Nivel A
Los errores detectados
automáticamente en
campos de formulario
son descritos en forma
textual al usuario
Entendible

43. Pauta 3.3
Asistencia para
campos
Criterio 3.3.2
Etiquetas o
Instrucciones
Nivel A
Se proveen etiquetas e
instrucciones cuando
se solicitan datos al
usuario
Entendible

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

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

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

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

48. 3.
DOM + ARIA
Árbol de
Accesibilidad

49. Árbol de Accesibilidad
Estructura tipo DOM, creada para la API de accesibilidad del SO

50. Semántica y el
árbol de
accesibilidad
Comunica el
comportamiento por
defecto definido por la
especificación HTML e
implementada por el
browser para elementos
semánticos
● Usar una jerarquía apropiada de elementos de
encabezado, para títulos y subtítulos
● Usar los controles de formularios correctos como
campos de texto, botones radio y checkboxes
para crear elementos interactivos de formulario
● Usar los elementos HTML semánticamente
correctos como <header>, <article>, <footer>
para definir

51. Semántica y el
árbol de
accesibilidad
Comunica el
comportamiento por
defecto definido por la
especificación HTML e
implementada por el
browser para elementos
semánticos
● Usar una jerarquía apropiada de elementos de
encabezado, para títulos y subtítulos
● Usar los controles de formularios correctos
como campos de texto, botones radio y
checkboxes para crear elementos interactivos
de formulario
● Usar los elementos HTML semánticamente
correctos como <header>, <article>, <footer>
para definir

52. Semántica y el
árbol de
accesibilidad
Comunica el
comportamiento por
defecto definido por la
especificación HTML e
implementada por el
browser para elementos
semánticos
● Usar una jerarquía apropiada de elementos de
encabezado, para títulos y subtítulos
● Usar los controles de formularios correctos como
campos de texto, botones radio y checkboxes
para crear elementos interactivos de formulario
● Usar los elementos HTML semánticamente
correctos como <header>, <article>, <footer>
para definir

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

54. WAI-ARIA:
Accesibilidad más allá de la
semántica
Accessible Rich Internet Applications
▹ Especificación escrita por la
Web Accessibility Initiative W3C
▹ Extiende los features de
accesibilidad de los elementos
nativos y semánticos

55. WAI-ARIA:
Accesibilidad más allá de la
semántica
Accessible Rich Internet Applications
▹ Especificación escrita por la
Web Accessibility Initiative W3C
▹ Extiende los features de
accesibilidad de los elementos
nativos y semánticos

56. ARIA
¿Cuándo
debería usarlo?
● Definir regiones en nuestro contenido
● Actualizaciones dinámicas de contenido
● Mejorar la accesibilidad de teclado
● Hacer accesibles los controles no
semánticos (Solución parche)
● Controlar mejor el árbol de accesibilidad
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

57. ARIA
¿Cuándo
debería usarlo?
● Definir regiones en nuestro contenido
● Actualizaciones dinámicas de contenido
● Mejorar la accesibilidad de teclado
● Hacer accesibles los controles no
semánticos (Solución parche)
● Controlar mejor el árbol de accesibilidad
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

58. ARIA
¿Cuándo
debería usarlo?
● Definir regiones en nuestro contenido
● Actualizaciones dinámicas de contenido
● Mejorar la accesibilidad de teclado
● Hacer accesibles los controles no
semánticos (Solución parche)
● Controlar mejor el árbol de accesibilidad
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

59. ARIA
¿Cuándo
debería usarlo?
● Definir regiones en nuestro contenido
● Actualizaciones dinámicas de contenido
● Mejorar la accesibilidad de teclado
● Hacer accesibles los controles no
semánticos (Solución parche)
● Controlar mejor el árbol de accesibilidad
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

60. ARIA
¿Cuándo
debería usarlo?
● Definir regiones en nuestro contenido
● Actualizaciones dinámicas de contenido
● Mejorar la accesibilidad de teclado
● Hacer accesibles los controles no
semánticos (Solución parche)
● Controlar mejor el árbol de accesibilidad
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

61. ARIA roles
▹ Widgets
￭ Button
￭ Checkbox
￭ Progressbar
￭ Slider
▹ Composite
￭ Combobox
￭ Grid
￭ Menu
▹ Document Structure
￭ Article
￭ Heading
￭ List
￭ Presentation
▹ Landmark
￭ Search
￭ Complementary
￭ Form
￭ Navigation
￭ Main
￭ Region
▹ Live Region
￭ Alert
￭ Timer
▹ Window
￭ Dialog
￭ WindowDialog
Definir un tipo de elemento de interfaz de usuario
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_
Techniques

62. ARIA states and properties
▹ Widget attributes
￭ aria-checked
￭ aria-disabled
￭ aria-expanded
▹ Live Region
Attributes
￭ aria-live
￭ aria-relevant
▹ Drag & Drop
￭ aria-dropeffect
￭ aria-dragged
▹ Relationship
Attributes
￭ aria-controls
￭ aria-describedby
￭ aria-labelledby
￭ aria-details
￭ aria-owns
￭ aria-colcount
￭ aria-colindex
Controla los distintos atributos y estados soportados
por un rol
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_
Techniques

63. Experiencias Visuales
Experiencias para
Usuarios de Tecnologías
Asistivas

64. Experiencias Visuales
Experiencias para
Usuarios de Tecnologías
Asistivas

65. 4.
Testing,
Herramientas,
Recursos de
Aprendizaje

66. Screen
Readers
● NVDA: Gratis, sólo Windows
● JAWS: Pago, sólo Windows
● VoiceOver: Pago, sólo Mac OS
● ChromeVox: Gratis, extensión de Chrome
extension, sólo para browser
● Orca: Gratis, Linux, no es el mejor :-/

67. Extensiones
de Browser
● aXe: Auditorías de accesibilidad
● Wave: Auditorías de accesibilidad
● Chrome DevTools Auditorías de accesibilidad
● NoCoffee simulador de problemas visuales
● Firefox Dev Tools Auditorías de accesibilidad,
inspector del árbol de accesibilidad

68. Recursos
para
aprender
más
● WCAG2.1:
○ https://www.w3.org/TR/WCAG21/
● WAI-ARIA
○ https://www.w3.org/TR/wai-aria-practices/
○ https://developer.mozilla.org/en-US/docs/Web/Accessibility
/ARIA/ARIA_Techniques
● MDN tutoriales de accesibilidad:
○ https://developer.mozilla.org/en-US/docs/Learn/Accessibility
● W3C introducción a la accesibilidad:
○ https://www.w3.org/WAI/fundamentals/accessibility-intro/

69. ¡Gracias!
Hora de las preguntas
Leonardo Graterol
@pankas87
DALAT
Desarrollo Accesible en
Latinoamérica
dalat-a11y.slack.com