Les comparto las slides que estuve presentando en la meetup de Dribbble Mvd donde tuve la oportunidad de compartir con parte de la comunidad de diseñadores de Uruguay. En esta presentación estuvimos hablando sobre la WCAG 2.1, los 4 principios y compartimos 7 pasos fundamentales que debe seguir todo diseñador para hacer su diseño accesible.
2. ¿Qué grupo tenemos hoy?
ÁREAS Y ROLES
Testing
Product owner
Product design
Front-end
Ingeniería
Software
Diseño gráfico
Design Team leader
Comunicación
Multimedia
Administración
EDAD PROMEDIO
30 años
COMO LLEGARON
Linkedin
Más mujeres en UX
Boca a boca
Dribbble
Twitter, Facebook, Instagram
CONOCEN DE
ACCESIBILIDAD
40% Estudiante
eCommerce
3. Mobile UX, Usabilidad & Accesibilidad
QE Leader
@lisyarmas | @AbstractaUS | @dribbblemvd
5. “El poder de la web reside en su
universalidad. El acceso para todo el
mundo, a pesar de la discapacidad, es
un aspecto esencial”
Tim Berners-Lee
World Wide Web inventor
@lisyarmas | @AbstractaUS | @dribbblemvd
12. La accesibilidad es fundamental para un
10% de la población, para un 40% es necesario
y para el 100% es confortable.
@lisyarmas | @AbstractaUS | @dribbblemvd
https://www.observatoriodelaaccesibilidad
.es/accesibilidad/accesibilidad/definicion/
13. "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_ro
15. AGENDA
Intro a WCAG y 4 Principios1
2
Introducción a los Criterios3
Dinámica Los 4 Principios
4 Herramientas de Comprobación
@lisyarmas | @AbstractaUS | @dribbblemvd
16. AGENDA
Intro a WCAG y 4 Principios1
2
Introducción a los Criterios3
Dinámica Los 4 Principios
4 Herramientas de Comprobación
@lisyarmas | @AbstractaUS | @dribbblemvd
17. 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 | @dribbblemvd
20. Principios de Accesibilidad
WCAG 2.1
“La información y los
componentes de la interfaz
de usuario deben ser
presentados a los usuarios
de modo que ellos puedan
percibirlos.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto
@lisyarmas | @AbstractaUS | @dribbblemvd
21. Principios de Accesibilidad
WCAG 2.1
¿Hay algo en nuestro sitio web o
aplicación que una persona con
discapacidad no pueda percibir?
¿Funciona la aplicación con
diferentes productos de apoyo?
Asegúrese de pensar en todos los
diferentes tipos de discapacidades.
WCAG
2.1
Perceptible Operable
ComprensibleRobusto
@lisyarmas | @AbstractaUS | @dribbblemvd
22. Principios de Accesibilidad
WCAG 2.1
“Los componentes de la
interfaz de usuario y la
navegación deben ser
operables.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto
@lisyarmas | @AbstractaUS | @dribbblemvd
23. Principios de Accesibilidad
WCAG 2.1
¿Pueden los usuarios controlar
los elementos interactivos de
nuestro sitio web/aplicación?
¿Nuestro sitio web funciona bien
con el solo uso del teclado?
¿Funciona para dispositivos
móviles y táctiles?
WCAG
2.1
Perceptible Operable
ComprensibleRobusto
@lisyarmas | @AbstractaUS | @dribbblemvd
24. Principios de Accesibilidad
WCAG 2.1
“La información y el manejo
de la interfaz de usuario
deben ser comprensibles.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto
@lisyarmas | @AbstractaUS | @dribbblemvd
25. 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 | @dribbblemvd
26. Principios de Accesibilidad
WCAG 2.1
“El contenido debe ser
suficientemente robusto
como para ser interpretado
de forma fiable por los
productos de apoyo.”
WCAG
2.1
Perceptible Operable
ComprensibleRobusto
@lisyarmas | @AbstractaUS | @dribbblemvd
27. Principios de Accesibilidad
WCAG 2.1
¿Nuestro sitio web solo es
compatible con los navegadores o
sistemas operativos más recientes?
¿Nuestro sitio web está
desarrollado con las mejores
prácticas?
¿Funciona tanto en orientación
horizontal como vertical?
WCAG
2.1
Perceptible Operable
ComprensibleRobusto
@lisyarmas | @AbstractaUS | @dribbblemvd
28. AGENDA
Intro a WCAG y 4 Principios1
2
Introducción a los Criterios3
Dinámica Los 4 Principios
4 Herramientas de Comprobación
@lisyarmas | @AbstractaUS | @dribbblemvd
30. AGENDA
Intro a WCAG y 4 Principios1
2
Introducción a los Criterios3
Dinámica Los 4 Principios
4 Herramientas de Comprobación
@lisyarmas | @AbstractaUS | @dribbblemvd
36. Perceptible – 1.4.1 Uso del color
@lisyarmas | @AbstractaUS | @dribbblemvd
Solicitar Partida de Nacimiento
Continuar
Información
Nombre
Apellidos
Cancelar
Los campos requeridos están
en rojo.
Solicitar Partida de Nacimiento
Continuar
Información
Nombre *
Apellidos
Cancelar
Los campos requeridos están
en rojo y marcado con un *
39. @lisyarmas | @AbstractaUS | @dribbblemvd
4. Usa etiquetas o instrucciones con campos de
formulario y entradas.
40. Comprensible – 3.3.2 Etiquetas o Instrucciones
Solicitar Partida de Nacimiento
Continuar
Información
Nombre
Apellidos
Cancelar
Solicitar
Continuar
Nombre
Apellidos
Información
Cancelar
Datos
@lisyarmas | @AbstractaUS | @dribbblemvd
41. @lisyarmas | @AbstractaUS | @dribbblemvd
5. Escriba un texto alternativo útil para sus imágenes
y otros contenidos que no sean de texto.
47. AGENDA
Intro a WCAG y 4 Principios1
2
Introducción a los Criterios3
Dinámica Los 4 Principios
4 Herramientas de Comprobación
@lisyarmas | @AbstractaUS | @dribbblemvd