Estrategias de usabilidad y accesibilidad online, para la Unidad de Educación Virtual del CEC-EPN 2018; tipos de diversidad funcional, creación de contenidos accesibles, separación de apariencia y contenidos, pautas de accesibilidad

1. USABILIDAD Y ACCESIBILIDAD
ONLINE
Tema 3: Accesibilidad

2. ¿QUÉ
APRENDEREMOS?
Accesibilidad

3. CONTENIDOS
Introducción
Tipos de diversidad funcional
Creando contenidos accesibles
Separación contenidos - apariencia
Pautas de Accesibilidad WCAG

4. INTRODUCCIÓN
Accesibilidad

5. Esquema Conceptual

6. Introducción
Conocer los tipos de diversidad funcional y las barreras de accesibilidad
derivadas de cada una de ellas
Conocer los principales elementos de una página web accesible
Adquirir una visión general del diseño de contenidos accesibles en un
página web
Conocer las alternativas textuales para elementos no textuales
Gestionar contenidos web con criterios de accesibilidad
Estudiar las pautas de accesibilidad de la WCAG 2.0

7. TIPOS DE DIVERSIDAD
FUNCIONAL
Accesibilidad

8. Diversidad Funcional
Producto Usable y Accesible =
Persona como centro del
proceso
Todos estamos en una situación
disfuncional = etapas de la vida
Partes del cuerpo o sentidos
funcionan de forma distinta

9. Tecnología para Diversidad Funcional
• Productos de apoyo.
• Silla de ruedas
• Gafas / lentes
• Audífonos
• Lectores de pantalla
• Magnificadores de pantalla
• Líneas braille
• Entrada de datos alternativa
(voz, teclado, ratón)

10. Tipos de Diversidad Funcional
Sensoriales:
visual y
auditiva
Física:
motórica
Lenguaje y
comprensión
Cognitiva
Tecnológica

11. Diversidad Funcional Visual
Diversidad
Funcional
Visual
Ceguera
Ceguera al
color
Baja visión o
visión reducida
Problemas de Accesibilidad
Ayudas técnicas y Estrategias de Diseño

12. Ceguera
Problemas de Accesibilidad
• Imágenes sin texto alternativo.
• Imágenes complejas o gráficos sin
una descripción detallada.
• Elementos multimedia sin
descripción textual o sonora.
• Falta de independencia del
dispositivo que impide utilizar
dispositivos de entrada diferentes.
• Formato no accesible de
documentos que pueden causar
problemas con las tecnologías de
asistencia (por ejemplo, lectores de
pantalla o líneas braille).
Estrategias y Ayudas Técnicas
Algunas ayudas técnicas y
estrategias de diseño pueden ser:
navegadores de voz, líneas
braille, teclado como dispositivo
de entrada, proporcionar texto
alternativo a información no
textual, y facilitar el uso del
teclado.

13. Ceguera al color
Problemas de Accesibilidad
• Percepción de los colores
utilizando la metáfora de un
semáforo.
• Para una persona daltónica
una interfaz basada solo en
colores no es accesible).
Estrategias y Ayudas Técnicas
Algunas ayudas técnicas y
estrategias de diseño son: No
basarse solo en el uso de color
para transmitir información.
Reforzar con etiquetas.
Utilizar herramientas de evaluación
de accesibilidad que simulen la
diversidad funcional para ver la
interfaz (Colour Constrast
Analyser).

14. Baja visión
Problemas de Accesibilidad
• Fuentes de tamaño reducido.
• Poco contraste en imágenes y
texto.
• Texto añadido como imágenes
que impide su redimensión.
• Páginas mal diseñadas que
dificultan la navegación al
modificar el tamaño de la
fuente.
Estrategias y Ayudas Técnicas
Algunas ayudas técnicas y
estrategias de diseño son: uso de
pantallas grandes, ampliadores
de pantalla, la posibilidad de
configuración de los colores, y
cuerpos de letra.

15. Diversidad Funcional Auditiva
Diversidad
Funcional
Auditiva
Sordera Total
Hipoacusia
Prelocutivas
Poslocutivas
Problemas de Accesibilidad
Ayudas técnicas y Estrategias de Diseño

16. Diversidad Funcional Auditiva
Problemas de Accesibilidad
• Ausencia de subtítulos o
transcripciones en contenidos
sonoros.
• Ausencia de imágenes que ayuden
a la comprensión del contenido.
• Creación de páginas con mucho
texto y sin imágenes que impiden su
comprensión a aquellas personas
cuyo idioma principal es la lengua
de signos.
• La necesidad de entrada de voz en
algunos sitios.
Estrategias y Ayudas Técnicas
Algunas de las ayudas técnicas y
estrategias de diseño serían:
evitar que la información se
encuentre solo en formato texto,
utilizar subtítulos en elementos
multimedia auditivos, y utilizar
lenguaje simple y apoyo gráfico.

17. Diversidad Funcional Motórica
Diversidad
Funcional
Motórica
Distrofia
(debilidad
control
movimiento)
Distonía
Muscular
(contracciones
involuntarias)
Parkinson
(temblores,
rigidez)
Problemas de Accesibilidad
Ayudas técnicas y Estrategias de Diseño

18. Diversidad Funcional Motórica
Problemas de Accesibilidad
• Iconos, botones o enlaces
demasiado pequeños.
• Falta de independencia del
dispositivo que impide el uso
de la web por teclado.
• Tiempo de respuesta limitados
(normalmente tardan más en
ejecutar las acciones).
Estrategias y Ayudas Técnicas
Favorecer el uso del teclado.
Dispositivos de entrada
especiales: ratones especiales,
teclados alternativos,
apuntadores de boca.
Sistemas de reconocimiento de
voz. Sistemas de seguimiento de
ojos.
Dar tiempo suficiente a que
acaben la acción o configurar el
tiempo de cierre de sesión.

19. Diversidad Funcional Cognitiva
Diversidad
Funcional
Cognitiva
Comprensión
del lenguaje y
en el
aprendizaje
Déficit de
atención,
memoria y
epilepsia
Sociales:
idioma,
psicológicos
Problemas de Accesibilidad
Ayudas técnicas y Estrategias de Diseño

20. Diversidad Funcional Cognitiva
Problemas de Accesibilidad
• Elementos visuales o sonoros
que no se pueden desactivar y
pueden distraer la atención.
• Falta de organización clara y
coherente de la información.
• Lenguaje complejo.
• Ausencia de gráficos que
complementen al texto.
• Tamaño de letra fijo.
• Destellos o parpadeos que
favorezcan ataques de
epilepsia.
Estrategias y Ayudas Técnicas
Diseño correcto de la aplicación
que muestre claramente su
organización y exprese el
contenido de forma simple.
Lectores de pantalla y subtítulos
para el contenido. Subtítulos del
contenido sonoro. Desactivación de
elementos multimedia, sonidos,
animaciones, o destellos que
permitan concentrarse en el
contenido o que puedan provocar
ataques de epilepsia.

21. Diversidad Funcional Tecnológica / Barreras del
Entorno
Tecnología y
Entorno
Inmigrantes
digitales
Tecnofobia
Entorno
Problemas de Accesibilidad

22. Diversidad Funcional Tecnológica / Barreras del
Entorno
Navegadores antiguos o terminales con una capacidad gráfica limitada
Navegadores de texto en ordenadores antiguos o terminales de capacidad
limitada como algunos teléfonos móviles, ebook, etc.
Conexiones lentas
Pantallas pequeñas
Monitores en blanco y negro
Entornos ruidosos
Entornos mal iluminados

23. CREANDO CONTENIDOS
ACCESIBLES
Accesibilidad

24. Marcado Semántico
Estructura Básica del
documento
Etiquetas del HTML
Reglas sobre el tipo de marcas

25. Marcado Semántico
<title> Título para el navegador</title>
<body> Información</body>

26. Marcado Semántico: Encabezados
<h1>….<h6>

27. WAT (Web Accessibility Toolbar)
• https://github.com/ThePacielloGroup/Web
AccessibilityToolbar/releases/tag/2015-05-
20

28. Encabezados

29. Estructura Definida

30. Marcado Semántico: Cuerpos
Listas de definiciones
<dl> <dt>… <dd>… </dl>
Listas Desordenadas
<ol> <li>….</li> </ol>
Listas ordenadas
<ul> <li>….</li> </ul>
Párrafos
<p>….</p>

31. Alternativas Textuales
Descripción
alt.
Rutas
scr.
Imágenes
<img>

32. Marcado Semántico: Cuerpos
Tablas
• <table summary>
• <caption>
• <tr>
Formularios
• <form>
• <label>
• id
• for
Enlaces
• <a>
• href=

33. Herramientas para Desarrolladores

34. Separación Contenidos - Apariencia
Página
Información
• <HTML>
Apariencia
• Hojas de
Estilo

35. Deshabilitar CSS

36. Pautas de Accesibilidad WCAG
Pautas
Cada pauta tiene criterios de conformidad. No son comprobables
Principios
Perceptible, Operable, Comprensible, Robusto
Cada principio tiene pautas.
Criterios de Conformidad
A= Básico
AA= Eliminar Barreras
AAA= Mejorar la Accesibilidad.

37. TAW (Test de Accesibilidad Web)
• https://www.tawdis.net/

38. Niveles de Impacto
No Verificados
Requiere revisión manual
Advertencias
Requiere revisión
Problemas
Correcciones necesarias

39. ¡Muchas Gracias!
Unidad de Educación Virtual