Este documento presenta información sobre diseño inclusivo para plataformas digitales. Explica conceptos clave como el árbol de accesibilidad, la tecnología asistiva y las consideraciones para testear la accesibilidad usando herramientas y usuarios con discapacidad. También cubre entregables de accesibilidad como los nombres de regiones de la página, la jerarquía y orden lógico del contenido, y los atributos para elementos interactivos.

1. Diseño Inclusivo para
plataformas digitales
Consuelo Correa
>>> CURSO
EDUCACIÓN
CONTINUA
2021

2. Módulo 4
Testear la accesibilidad

3. Tecnología asistiva
y la web semántica
01

4. Muchas de las tecnologías
asistivas confían en que la
semántica expresada en el
código, creará una experiencia
del usuario accesible

5. Cómo navegan las PcD
Software y
hardware
especializado
Ejemplo: línea braille
Ajuste de
configuración
Preferencias de plataforma y
navegador. Ejemplo: activar
preferencias de accesibilidad.
Tecnología asistiva
+ propia estrategia
La tecnología permite a las PcD
interactuar y participar en el
entorno digital; la estrategia es
la técnica que usan.

6. Tecnología asistiva
General Específico
Como el zoom del
navegador
Como un control de
videojuegos
Dispositivo
externos
Implementado
por software
Como una línea braille Como el control de
voz

7. El árbol de accesibilidad
● Se expone una versión semántica
de la UI para tecnología asistencial
vía una API.
● La tecnología asistencial lee la API
y usa la info para crear una
presentación de interfaz de usuario
alternativa para el usuario. Por
ejemplo, un lector de pantalla.
● La tecnología asistencial también
puede permitirle al usuario
interactuar con la app de otra
manera. Por ejemplo, simulando
un clic.
● La tecnología asistencial transmite
la intención del usuario a la app a
través de la API de accesibilidad. La
app interpreta la acción.
La mayoría de las tecnologías
asistenciales interactúan con el árbol de
accesibilidad

8. La accesibilidad se logra en parte
gracias al código semántico; y
este está casi asegurado cuando
se usa código nativo.

9. Entregables de
accesibilidad
Diseñamos para el árbol de
accesibilidad
02

10. 1. nombre de la página y
sus regiones

11. navigation
main
content info
Regiones de la página
4 regiones
banner
<div id=“” role=”banner”>
navegación
<div id=“” role=“navigation”>
contenido
<div id=“” role=“main”>
content info
<div id=“” role= “contentinfo”>
Inicio I am canguro

12. banner
navegation
main

13. content info

14. 2. jerarquía y orden lógico

15. <button>Vuelos</button>
<button style=”float:right”>Cotiza ahora</button>
<button>Hoteles</button>
Vuelos Hoteles Cotiza ahora
El orden de navegación y el orden de los elementos en
pantalla debe ser el mismo.
1 3 2

16. Vuelos Hoteles Cotiza ahora
1 2 3
<button>Vuelos</button>
<button>Hoteles</button>
<button>Cotiza ahora</button>

17. 3
1 2
4
5
6
8
9
10
11
12
El rol ALERT DIALOG nos permite
avisar que levantamos una modal
El modal siempre debe darse la
opción de cerrar con la tecla ESC.
Siempre la “X” debe tener un rol de
button o link.
Siempre agregar contexto del form
con el screen reader only.

18. Las personas con discapacidad visual
también escanean el contenido
Son impacientes como todo usuario
Por eso debes anidar correctamente el contenido. Los lectores
de pantalla les permiten escanear no solo el menú, sino que el
contenido de la página, y cuando se aburren se saltan al
siguiente texto.
El lector de pantalla entonces, lee el árbol de accesibilidad por
tanto, no puede haber más de un título principal, ni puede
haber un secundario antes. El orden visual debe ser igual al
del código.
h1
h2
p
p

19. 3. elementos clicables y foco

20. a:focus, button:focus {
}
Siempre probar el estado focus
Vuelos Hoteles Cotiza ahora

21. Vuelos Hoteles Cotiza ahora
a:focus, button:focus {
outline: 2px solid #2F80ED;
outline-offset: 2px;
}

22. <label>
<input type="checkbox">¿Quieres recibir noticias en tu correo?</input>
</label>
<input id="promo" type="checkbox"></input>
<label for="promo">¿Quieres recibir noticias en tu correo?</label>
¿Quieres recibir noticias en tu correo?
¿Quieres recibir noticias en tu correo?

23. Identificar los elementos sobre los
que puedo hacer clic, me permite
definir un kit UI o una guía de estilos
que tenga estas consideraciones

25. 4. atributo alt de imágenes

26. ME DIJISTE QUE NO
TOMABAS
BUENAS
DECISIONES
<img src="/160204193356-01-cat-500.jpg" alt="Meme
me dijiste que no tomabas. Buenas decisiones">
● alt te permite especificar un texto para usar cuando la
imagen no esté disponible. Ejemplo: la imagen no se
carga o si accede a ella un robot web de rastreo, o la
encuentra un lector de pantalla.
● alt es distinto de title o cualquier tipo de subtítulo,
solo se usa si la imagen no está disponible.

27. Atributo alt

28. Testear la
accesibilidad
Algunas consideraciones
03

29. Testear
Herramientas Personas
WCAG 2.1
4 principios
13 pautas
78 criterios de conformidad
A
AA
AAA
Niveles
de
conformidad
Testear la accesibilidad

30. Evaluación
guiada
La herramienta
localiza el
problema y lo
presenta
01
02
03
04
Simulación
Un experto simula la
navegación de
distintos tipos de
usuarios
Inspección
basándose en
herramientas
Por ejemplo
usando una
extensión
Revisión de código
Revisión 100% a
mano realizada por
expertos
Testear la accesibilidad

31. Herramientas de evaluación

32. Algunas extensiones

33. Achecker

34. Accesible email

35. WebAIM checklist

36. Aunque inspecciones y simules,
nada es más real que testear con
un usuario con discapacidad, que
conoce la tecnología que necesita.

37. Testear con usuarios con
discapacidad

38. Pruebas con expertos
Existen tester expertos que pueden ser
discapacitados o no. Trabajan como
consultores porque son expertos en la
navegación asistida.
No solo conocen la tecnología si no que
son expertos sobre su propia
discapacidad. Logran evidenciar los
distintos niveles de relación con la
tecnología, de menos a más expertos.
Prueba con usuarios

39. Cuando reclutamos un tester con
discapacidad lo hacemos con las
mismas consideraciones de
siempre. Nada cambia.

40. 01
02
03
04
Agencias
reclutadoras
Fundaciones
Grupos o foros
Grupos de
discusión
https://webaim.org/discussi
on/
https://www.w3.org/WAI/a
bout/groups/waiig/
¿Cómo reclutar usuarios con discapacidad?

43. Entorno
accesible
Nada es más
accesible que su
casa o remoto
01
02
03
04
Selecciona usuarios
intermedio
Ni inexpertos ni
expertos, para poder
saber si en realidad
está en tus manos
Tecnología familiar
Los usuarios
personalizan su
tecnología
Entornos no
familiares
Este estrés solo se
justifica cuando
probamos
tecnología nueva
Consideraciones

44. Tipo de tareas
Quieres viajar a ver a tu
mamá, compra un ticket
ida y vuelta
Para encontrar
problemas comunes
Necesitas entender qué
pasa con ellos mientras
realizan la tarea.
No solo debes estar
pendiente de lo que te
dice, también de lo que
hace.
Escenarios y tareas
concretas Exploración libre
Pedir que piensen
en voz alta Observa y registra

45. Comunicar los
resultados
Aprendan a vivir con datos
04

46. Problema el menú no se abre con teclado.
Cómo reproducirlo Intenta abrir el menú con el
teclado.
Explicación la navegación del sitio no debe
depender del dispositivo, los usuarios que no
usan un mouse para navegar deben poder
hacerlo.
Implicancias para la conformudad la
operatividad del teclado es una exigencia para la
conformidad con el nivel "A" de WCAG 1.0 y WCAG
2.0.
Url representativa #
Solución propuesta Cuando no se pueda
acceder al JavaScript, utilizar una lista con los
enlaces del menú.
Comunicar resultados
Luego de comunicar los resultados,
debes hacerle seguimiento

47. ¿Cuál es el beneficio de testear
con personas con discapacidad?

48. Son las únicas pruebas que
aseguran el éxito de nuestros
productos y servicios

49. Cuál es tu papel en
el diseño inclusivo
Todos somos responsables de
que sea una realidad
05

50. Probemos

51. Usemos algunas extensiones
Vamos a instalar las siguientes extensiones:
● Landmark Navigation
● WAVE Evaluation Tool
● headingsMap
Nos vamos a dividir en grupo, y vamos a
descubrir qué hace cada extensión
20 minutos y volvemos

52. Tu papel en la
accesibilidad
Todos somos responsables de
que sea una realidad
06

53. La clave para unir la tecnología y
las pautas para crear
experiencias de usuario
accesibles son las personas

54. Por dónde partir
Product Lead
01
02
03
04
Incluye personas con discapacidad en tu
equipo.
No negocies la accesibilidad. Lidera el uso
de estándares web.
Aprende a vender la accesibilidad al
negocio y transfórmalo en tu diferenciador.
Forma un equipo diverso: edad, género,
nacionalidad, etc. Realiza inducciones y
capacitaciones.

55. Por dónde partir
Product Owner
01
02
03
04
Incorpora criterios de accesibilidad a
los criterios de aceptación.
Exige casos de uso a QA que incluya
adultos mayores y PcD.
Abarca los casos borde y triunfarás.
La accesibilidad no es un deseable, es
un derecho. Pídelo accesible.

56. Por dónde partir
UX content
01
02
03
04
Aprender un lenguaje común con los
front-end. Es clave.
Escribe simple.
Escribe en corto, que el mensaje llegue
rápido.
Genera estrategia de contenido
accesible e inclusivo.

57. Por dónde partir
UX researcher
01
02
03
04
Aprende a reclutar tester y a testear con
ellos, o ponte en sus zapatos.
Aprende a hacer análisis heurísticos,
vive con datos.
Audita tu trabajo como si los derechos de
otros dependiera de ello.
Investiga y prueba con usuarios con
discapacidad.

58. Por dónde partir
UX designer
01
02
03
04
Aprende a hacer QA de diseño con
herramientas de evaluación.
Orquesta la accesibilidad con
mentalidad de diseño de servicio.
Vive con las pautas de accesibilidad para
el diseño digital.
Utiliza guiones gráficos para desarrollo.
Señala qué ocultar.

59. Por dónde partir
UI designer
01
02
03
04
Genera áreas activas de buen tamaño.
Una palabra vale más que mil
imágenes. Usa etiquetas.
Nombra tus capas como lo haría un dev.
Aprende un lenguaje común con devs.
Crear diseños, imágenes,
presentaciones, funciones y recorridos
del usuario accesibles

60. Por dónde partir
Visual designer
01
02
03
04
Utiliza diagramas para explicar, pero
necesitarás un guión alternativo.
Utiliza íconos que apoyen la
información.
Cuida el contraste en las ilustraciones.
Evita elementos que tengan destello.
Acuérdate de los Simpsons.

61. Por dónde partir
Devs
01
02
03
04
Sigue las especificaciones tecnológicas y
las pautas de accesibilidad.
Audita tu propio trabajo, hay
herramientas online (solo 30% casos)
Pide las indicaciones al equipo de diseño
que aseguren la accesibilidad.
Aprende todo de WCAG.

62. Por dónde partir
QA
01
02
03
04
Define una estrategia que combine
pruebas automáticas con manuales.
Usa la Extensión Siteimprove
Accessibility Checker
Navega con el teclado, navega por voz,
haz zoom en las pantallas.
Verifica el cumplimiento de los
estándares y pautas.

63. ¿Dudas?
mc.correab@udd.cl