Dribbble Meetup Montevideo - Hablemos de diseño accesible

Hablemos de
Diseño Accesible
Ing. Lisandra Armas
@lisyarmas
DRIBBBLE MEETUP MONTEVIDEO

¿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

Mobile UX, Usabilidad & Accesibilidad
QE Leader
@lisyarmas | @AbstractaUS | @dribbblemvd

“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

¿Las aplicaciones son accesibles?

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

15,8%
3.456.750 personas
https://www.bps.gub.uy/bps/@lisyarmas | @AbstractaUS | @dribbblemvd

Visual Auditiva
Motriz Cognitiva
Ejemplos de discapacidad
permanente, temporaria y situacional.
Source: Microsoft’s inclusive design toolkit

La accesibilidad es fundamental para un
10% de la población, para un 40% es necesario
y para el 100% es confortable.
https://www.observatoriodelaaccesibilidad
.es/accesibilidad/accesibilidad/definicion/

"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

AGENDA
Intro a WCAG y 4 Principios1
2
Introducción a los Criterios3
Dinámica Los 4 Principios
4 Herramientas de Comprobación

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

4 Principios
13 Pautas
78 Criterios
WCAG 2.1
Guía de Accesibilidad
Niveles
de
Conformidad
A/AA/AAA

WCAG
2.1
Perceptible Operable
ComprensibleRobusto
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
ComprensibleRobusto

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
ComprensibleRobusto

WCAG 2.1
“Los componentes de la
interfaz de usuario y la
navegación deben ser
operables.”
WCAG
2.1
ComprensibleRobusto

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
ComprensibleRobusto

WCAG 2.1
“La información y el manejo
de la interfaz de usuario
deben ser comprensibles.”
WCAG
2.1
ComprensibleRobusto

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
ComprensibleRobusto

WCAG 2.1
“El contenido debe ser
suficientemente robusto
como para ser interpretado
de forma fiable por los
productos de apoyo.”
WCAG
2.1
ComprensibleRobusto

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
ComprensibleRobusto

WCAG
2.1
ComprensibleRobusto
Dinámica Principios de Accesibilidad
Ejemplos
Positivos y
Negativos

78 criterios!!!

7 pasos para hacer tu diseño accesible

1. Provee suficiente contraste de color.

Perceptible – 1.4.3 Contraste (mínimo)
Aceptar Cancelar
Nombre
Apellidos
Aceptar Cancelar
Nombre
Apellidos

2. No use solo el color para transmitir información.

Perceptible – 1.4.1 Uso del color
Solicitar Partida de Nacimiento
Continuar
Información
Nombre
Apellidos
Cancelar
Los campos requeridos están
en rojo.
Continuar
Información
Nombre *
Apellidos
Cancelar
Los campos requeridos están
en rojo y marcado con un *

3. Diseña estados de enfoque usables.

Continuar
|
Información
Cancelar
Nombre
Apellidos
Operable – 2.4.7 Foco visible
Continuar
Información
Nombre
Apellidos
Cancelar
|

4. Usa etiquetas o instrucciones con campos de
formulario y entradas.

Comprensible – 3.3.2 Etiquetas o Instrucciones
Continuar
Información
Nombre
Apellidos
Cancelar
Solicitar
Continuar
Nombre
Apellidos
Información
Cancelar
Datos

5. Escriba un texto alternativo útil para sus imágenes
y otros contenidos que no sean de texto.

ACEPTAR BOTÓN
Perceptible – 1.1.1 Contenido sin texto
BUTTON1 BOTÓN
alt= button1 alt= Aceptar

6. Use un marcado correcto en su contenido.

Operable – 2.4.6 Encabezados y etiquetas

7. Verifica el soporte de navegación del teclado.

Comprensible – 3.2.3 Navegación consistente
Continuar
Información
Cancelar
Nombre
Apellidos
1
2
3
4
5
6
7 8
Continuar
Información
Nombre
Apellidos
Cancelar
2
4
3
6
5
1
7 8

Comprobación de Accesibilidad
https://www.w3.org/WAI/ER/tools/Más validadores:
Accessibility Scanner

Haz que la accesibilidad sea parte de
la elaboración de tu diseño

Muchas gracias!
dribbblemvd
DRIBBBLE MEETUP MONTEVIDEO
Ing. Lisandra Armas
@lisyarmas

Dribbble Meetup Montevideo - Hablemos de diseño accesible

Recomendados

Recomendados

Más contenido relacionado

Similar a Dribbble Meetup Montevideo - Hablemos de diseño accesible

Similar a Dribbble Meetup Montevideo - Hablemos de diseño accesible (20)

Más de Lisandra Armas

Más de Lisandra Armas (20)

Último

Último (15)

Dribbble Meetup Montevideo - Hablemos de diseño accesible