Webinar Northem Quality - Los mil millones de usuarios que debes considerar en tus pruebas

Los mil millones de usuarios que
debes considerar en tus pruebas
WEBINAR
Lisandra Armas
@lisyarmas

Mobile UX, Usabilidad & Accesibilidad
QE Leader

@lisyarmas | @AbstractaUS@lisyarmas | @AbstractaUS

@lisyarmas | @AbstractaUS
¿Son accesibles las aplicaciones?

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

1.094.215.000
Población Continente Americano

Visual Auditiva Motora Cognitiva
Source: Microsoft’s inclusive design toolkit
Permanente Temporal Situacional

La falta de accesibilidad nos impacta a
TODOS

Las mejoras de accesibilidad nos favorece a
TODOS

"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

AGENDA
Productos de
Apoyo
Intro a la WCAG
y sus Principios
Chequeando la
accesibilidad
Ideas accesibles

TalkBack/VoiceOver
Zoom
Dictado
Productos de apoyo de Accesibilidad para Usuarios
Visual Lectores de Pantalla
Magnificadores de Pantalla
Navegadores Alternativos
Traductores de braille

Subtítulos
Alertas visibles y
vibratorias
Auditiva
Subtítulos
Alertas visibles

Switch Access/Control
AssistiveTouch
Motriz Teclados Virtuales
Mouse especiales

Navegadores AccesiblesCognitivaAcceso Guiado
Apoyo Lector

Ejemplo de Producto de Apoyo

VoiceOver
https://youtu.be/YphxuTLIC0s

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/

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

78 criterios!!!

WCAG
2.1
Perceptible Operable
ComprensibleRobusto
Principios de Accesibilidad

WCAG 2.1
“Se enfoca en la información
y los componentes de la
interfaz de usuario.”
WCAG
2.1
ComprensibleRobusto

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
ComprensibleRobusto

ACEPTAR BOTÓN
Perceptible – Textos Alternativos
BUTTON1 BOTÓN
Aceptar Cancelar
alt= button1
Aceptar Cancelar
alt= Aceptar

AceptarCancelar
Perceptible – Zoom
Aceptar
Cancelar

Perceptible – Contraste de colores
Aceptar Cancelar
Nombre
Apellidos
Aceptar Cancelar
Nombre
Apellidos

WCAG 2.1
“Se enfoca en las acciones
sobre los componentes de la
interfaz de usuario y la
navegación.”
WCAG
2.1
ComprensibleRobusto

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
ComprensibleRobusto

Operable - Ubicación
Solicitar Partida de Nacimiento
Continuar
Información
Nombre
Apellidos
Cancelar
Solicitar
Continuar
Nombre
Apellidos
Información
Cancelar
Datos

Continuar
|
Información
Cancelar
Nombre
Apellidos
Operable - Foco
Continuar
Información
Nombre
Apellidos
Cancelar
|

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
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

Comprensible – Texto Legible
Menú
Solicitar Partida de Matrimonio
Solicitar CI
FAQs
Volver
Menú
Solicitar Partida de Matrimonio
Solicitar Cédula de Identidad
Preguntas Frecuentes
Volver

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
ComprensibleRobusto

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
ComprensibleRobusto

Continuar
Matias
Perez Perez
Información
Nombre
Apellidos
Cancelar
Continuar
Matias
Perez Perez
Información
Nombre
Apellidos
Cancelar
Robusto – Productos de apoyo

Continuar
Información
Nombre
Apellidos
Cancelar
Continuar
Información
Dirección
Teléfono
Cancelar
Robusto – Productos de apoyo

https://www.w3.org/WAI/ER/tools/Más validadores:
Accessibility Scanner
Herramientas para chequear la accesibilidad

Contraste de colores
Colour Contrast Analyser
https://developer.paciellogroup.com/resources/contrastanalyser/

Probando
con
Colour Contrast
Analyser
(CCA)

Ventana Principal

Barra de menú
Colour Contrast
Analyser (CCA)
About CCA Preferences

Barra de menú
Edit
Copy results

Barra de menú
View
Colour blindness
simulation
(Window, macOS)

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).

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.

Foreground &
Background colour
Se visualizan los colores seleccionados para el Primer plano y el Fondo.

No estamos libres de Bug!

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.

Ajustes manuales de RGB y HSL

Cuenta Gotas

Ayuda
Vista previa

WCAG 2.1 Results

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.

Probando con
aXe

Comprobación de Accesibilidad - aXe
aXe Extension. Pestaña "aXe" en la "Herramientas de desarrolladores" de Chrome
https://dequeuniversity.com/rules/axe/3.2

Resultados de la comprobación automática de accesibilidad

Resultados de la comprobación automática de accesibilidad
Paginación
Relevancia
Descripción
Normativa

Mucho cuidado!
Con los Falsos Positivos
Es importante realizar una validación manual y
comprobar si efectivamente es un error.

Pruebas
de
Accesibilidad
Revisión
Manual
Extensiones
de
Accesibilidad
Pruebas con
Tecnología
Asistiva
Herramientas
de Evaluación
Online
Pruebas de Accesibilidad
http://www.professionalqa.com/accessibility-testing

Muchas gracias!
Lisandra Armas
@lisyarmas

Webinar Northem Quality - Los mil millones de usuarios que debes considerar en tus pruebas

Recommended

Recommended

More Related Content

Similar to Webinar Northem Quality - Los mil millones de usuarios que debes considerar en tus pruebas

Similar to Webinar Northem Quality - Los mil millones de usuarios que debes considerar en tus pruebas (20)

More from Lisandra Armas

More from Lisandra Armas (20)

Webinar Northem Quality - Los mil millones de usuarios que debes considerar en tus pruebas