Vivimos en un mundo donde la tecnología ya forma parte de nuestras vidas, a diario instalamos nuevas aplicaciones y ya no nos imaginamos sin toda esta tecnología que nos hacen la vida más fácil.
Hoy en día nuestros teléfonos se han convertido en nuestro mejor aliado: nos lo llevamos a todas partes, lo consultamos a todas horas y lo usamos constantemente.
Pero nos hemos puesto a pensar ¿si las aplicaciones que usamos son accesibles? La mayoría de las veces no lo son!
Según la OMS (Organización Mundial de la Salud) existen más de mil millones de personas con algún tipo de discapacidad que representan más del 15% de la población mundial; de ellas, casi 200 millones experimentan dificultades considerables, además debemos estar conscientes de que la población está envejeciendo y el riesgo de discapacidad aumenta. Es por esto que debemos considerar la accesibilidad como un factor fundamental en nuestro entorno debido al índice de personas con algún tipo de discapacidad a nivel mundial.
11. @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
@lisyarmas | @AbstractaUS https://www.ted.com/speakers/elise_ro
23. @lisyarmas | @AbstractaUS
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/
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
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
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
55. @lisyarmas | @AbstractaUS
Contrast ratio
Contraste de colores: la relación de la luminiscencia relativa de los colores
de primer plano y de fondo.
Varía desde un mínimo de 1 (cuando los colores
de primer plano y de fondo son los mismos)
hasta un máximo de 21 (negro sobre blanco).
56. @lisyarmas | @AbstractaUS
Para prevenir estos errores y conocer si cumplimos o no con los requisitos de
contraste, la WCAG 2.1 nos plantea:
Nivel Radio de Contraste
Texto Normal Texto Grande
AA 4.5:1 3:1
AAA 7:1 4.5:1
*** El texto grande se define como 14 puntos (típicamente 18.66px) en
negrita o más grande, o 18 puntos (típicamente 24px) o mayor.
59. @lisyarmas | @AbstractaUS
Foreground &
Background colour
HEX: Compuesto por 3 bytes números hexadecimal (6 dígitos) que representan la
intensidad de rojo, verde y azul en el color.
RGB (del inglés Red, Green, Blue): Representa los colores Rojo, Verde y Azul que podrán
ajustarlos para crear una combinación de colores específicos.
HSL (del inglés Hue, Saturation, Lightness): Representa el Matiz, Saturación y Luminosidad
donde podrán ajustar el valor para modificar la tonalidad del color seleccionado.
64. @lisyarmas | @AbstractaUS
No presentan un requisito mínimo de contraste:
• Textos grandes: Textos e imágenes grandes que tengan una
relación de contraste mínimo de 3:1.
• Textos o imágenes: que son parte de la decoración y no son
contenidos significativos con los cuales el usuario interactúa.
• Logotipos: que contengan texto o el nombre de una marca.
66. @lisyarmas | @AbstractaUS
Comprobación de Accesibilidad - aXe
aXe Extension. Pestaña "aXe" en la "Herramientas de desarrolladores" de Chrome
https://dequeuniversity.com/rules/axe/3.2
68. @lisyarmas | @AbstractaUS
Comprobación de Accesibilidad - aXe
Resultados de la comprobación automática de accesibilidad
Paginación
Relevancia
Descripción
Normativa
69. @lisyarmas | @AbstractaUS
Mucho cuidado!
Con los Falsos Positivos
Es importante realizar una validación manual y
comprobar si efectivamente es un error.