2. www.technisys.com
Agenda
01. Accesibilidad en el
medio físico
02. Hablemos de
accesibilidad web & mobile
¿Qué es la accesibilidad?
¿La accesibilidad sólo involucra a personas con discapacidad?
Barreras comunes del medio físico
¿Qué es la accesibilidad web?
¿Por qué es importante un sitio accesible?
¿Para quién es la accesibilidad web?
Mitos y prejuicios más comunes
Limitaciones
Accesibilidad Mobile
Configuración de accesibilidad en iOS y Android
Soluciones a los problemas de accesibilidad más comunes
¿Cómo sabemos si lo estamos haciendo bien?
¿Por dónde empezamos?
¿Qué son las tecnologías o productos de apoyo?
Para aprender un poco más
5. www.technisys.com
01 / Accesibilidad en el medio físico / ¿Qué es la accesibilidad?
Es el grado o nivel
en el que todas las personas,
pueden usar una cosa,
visitar un lugar,
hacer uso de una infraestructura,
más allá de sus capacidades físicas,
técnicas o cognitivas,
Wikipedia
10. www.technisys.com
01 / Accesibilidad en el medio físico / Barreras comunes
El problema
Escaleras en lugares
públicos que impiden la
libre circulación de
personas con movilidad
reducida.
15. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Qué es la accesibilidad web?
El poder de la web está en su universalidad.
Que cualquier persona pueda acceder,
independientemente de su discapacidad es un
aspecto esencial.
Tim Berners-Lee / W3C Director and inventor of the World Wide Web
16. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Qué es la accesibilidad web?
Única: No deben existir diferentes
versiones según el dispositivo o navegador
que se utilice. Universal: Utilizable
independientemente de las características
del usuario.
17. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Qué es la accesibilidad web?
Al hablar de accesibilidad web
se está haciendo referencia a un diseño web
que va a permitir que todas las personas
puedan percibir, entender, navegar e interactuar
con la Web, aportando a su vez contenidos.
W3C (The World Wide Web Consortium)
18. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Qué es la accesibilidad web?
Experiencia de usuario (UX) en internet
interfaz de
usuario
usabilidad y
accesibilidad
funcionalidad
diseño de
contenidos
plataforma
estructura
de datos
UX
19. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Qué es la accesibilidad web?
Accesibilidad es hablar de acceso universal a la web
20. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Qué es la accesibilidad web?
En 2010 se aprobó en Argentina la ley de accesibilidad de la información
en las páginas web
May. 1999
1990 2020
Ley de
Accesibilidad
Web
Norma de
Accesibilidad
Web 2.0
ArgentinaInternacional
Dic. 2008
Oct. 2014
Pautas WCAG
1.0
Dic. 2000 Nov. 2010
Section 508
(US)
Pautas WCAG
2.0
22. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Por qué es importante un sitio accesible?
1 de cada 5 usuarios no puede navegar un sitio inaccesible
X
23. www.technisys.com
Hay muchas razones que justifican la accesibilidad:
❖ Porque lo exigen las leyes
❖ Porque la web es de todos
❖ Porque el cliente lo pide
❖ Porque mejora la eficiencia y el tiempo de respuesta
❖ Porque es más rentable
02 / Hablemos de accesibilidad web & mobile / ¿Por qué es importante un sitio accesible?o
we
24. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Por qué es importante un sitio accesible?
Accesibilidad web:
valor agregado
26. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Para quién es la accesibilidad web?
Según la OMS, alrededor del 10% de la población mundial, es decir 650
millones de personas, vive con alguna discapacidad o limitación.
De este 10% mundial, casi la mitad posee discapacidad visual, y el 0.7%
son no videntes.
27. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Para quién es la accesibilidad web?
Las limitaciones en la accesibilidad de los sitios Web pueden ser.
Motriz
Auditiva
Cognitiva
Visual
Distrofia muscular, parálisis
cerebral, amputaciones,
parkinson.
Sordera o deficiencias
auditivas.
Dislexia o discapacidades cognitivas
que afecten a la memoria,
la atención y las habilidades lógicas.
Invidentes, baja visión,
daltonismo.
28. www.technisys.com
La accesibilidad no se centra sólo en las personas con discapacidad
❖ Las personas mayores (tercera edad)
❖ Circunstancias derivadas del entorno
➢ Baja iluminación
➢ Ambientes ruidosos
❖ Equipos y conexiones limitados
❖ Usuarios que no dominen el idioma (extranjeros)
❖ Brecha tecnológica
❖ Usuarios inexpertos o inseguros
02 / Hablemos de accesibilidad web & mobile / ¿Para quién es la accesibilidad web?
30. www.technisys.com
❖ Las páginas web accesibles son feas.
❖ Las personas con discapacidad no utilizan la web.
❖ Las páginas web con sólo texto son las únicas accesibles.
❖ La accesibilidad es cara y difícil.
❖ La accesibilidad es sólo para invidentes.
❖ La accesibilidad es sólo para las personas con discapacidad.
02 / Hablemos de accesibilidad web & mobile / Mitos y prejuicios más comunes
31. www.technisys.com
❖ Las páginas web accesibles son feas.
❖ Las personas con discapacidad no utilizan la web.
❖ Las páginas web con sólo texto son las únicas accesibles.
❖ La accesibilidad es cara y difícil.
❖ La accesibilidad es sólo para invidentes.
❖ La accesibilidad es sólo para las personas con discapacidad.
02 / Hablemos de accesibilidad web & mobile / Mitos y prejuicios más comunes
32. www.technisys.com
❖ Las páginas web accesibles son feas.
❖ Las personas con discapacidad no utilizan la web.
❖ Las páginas web con sólo texto son las únicas accesibles.
❖ La accesibilidad es cara y difícil.
❖ La accesibilidad es sólo para invidentes.
❖ La accesibilidad es sólo para las personas con discapacidad.
02 / Hablemos de accesibilidad web & mobile / Mitos y prejuicios más comunes
33. www.technisys.com
❖ Las páginas web accesibles son feas.
❖ Las personas con discapacidad no utilizan la web.
❖ Las páginas web con sólo texto son las únicas accesibles.
❖ La accesibilidad es cara y difícil.
❖ La accesibilidad es sólo para invidentes.
❖ La accesibilidad es sólo para las personas con discapacidad.
02 / Hablemos de accesibilidad web & mobile / Mitos y prejuicios más comunes
34. www.technisys.com
❖ Las páginas web accesibles son feas.
❖ Las personas con discapacidad no utilizan la web.
❖ Las páginas web con sólo texto son las únicas accesibles.
❖ La accesibilidad es cara y difícil.
❖ La accesibilidad es sólo para invidentes.
❖ La accesibilidad es sólo para las personas con discapacidad.
02 / Hablemos de accesibilidad web & mobile / Mitos y prejuicios más comunes
35. www.technisys.com
❖ Las páginas web accesibles son feas.
❖ Las personas con discapacidad no utilizan la web.
❖ Las páginas web con sólo texto son las únicas accesibles.
❖ La accesibilidad es cara y difícil.
❖ La accesibilidad es sólo para invidentes.
❖ La accesibilidad es sólo para las personas con discapacidad.
02 / Hablemos de accesibilidad web & mobile / Mitos y prejuicios más comunes
37. www.technisys.com
Las principales dificultades con las que se encuentran las personas con
discapacidad suelen ser:
02 / Hablemos de accesibilidad web & mobile / Limitaciones
Manejo de
terminales
Teléfonos
Computadoras
Cajeros Automáticos
Televisión digital
38. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Limitaciones
Interacción con
las interfaces
Menús
Barras de Navegación
Botones
Las principales dificultades con las que se encuentran las personas con
discapacidad suelen ser:
39. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Limitaciones
Acceso a los
contenidos
Textos
Imágenes
Formularios
Sonido
Las principales dificultades con las que se encuentran las personas con
discapacidad suelen ser:
41. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
Aplicaciones
mobile
También llamadas apps.
software desarrollado específicamente
para el uso en dispositivos pequeños,
con conexión inalámbrica, tales como
smartphones o tablets.
Son para los móviles lo que los
programas son para las computadoras
{
42. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
❖ Aplicaciones móviles
➢ Son desarrolladas con el software que ofrece cada sistema
operativo llamado genéricamente Software Development Kit o SDK.
➢ Android, iOS y WP tienen uno diferente y las apps nativas se diseñan
y programan específicamente para cada plataforma.
➢ Se descargan e instalan desde las tiendas de aplicaciones.
➢ Pueden hacer uso de las notificaciones del SO para mostrar avisos
importantes al usuario, aun cuando no se esté usando la
aplicación.
➢ Están integradas al teléfono, lo cual les permite utilizar todas las
características de hardware del terminal, como la cámara y los
sensores (GPS, acelerómetro, giróscopo, entre otros).
Tipos de aplicaciones según su desarrollo
43. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
❖ Aplicaciones web
➢ Tambien llamadas webapps.
➢ No necesitan instalarse, ya que se visualizan usando el
navegador del teléfono como un sitio web normal.
➢ Construidas con HTML , CSS y JavaScript.
➢ Requieren de una conexión a Internet para funcionar
correctamente.
Tipos de aplicaciones según su desarrollo
44. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
❖ Aplicaciones híbridas
➢ Combinación entre las dos anteriores.
➢ Permiten acceder a las capacidades del teléfono, usando
librerías, tal como lo hace una app nativa.
Tipos de aplicaciones según su desarrollo
46. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
❖ Tamaño reducido de pantalla
❖ Poca luz
❖ Brillo en la pantalla
❖ Fuentes pequeñas
❖ Imagenes de mala calidad
❖ Teclados pequeños
❖ No usa mouse
❖ Manejado con una mano
❖ Diferentes tamaño de pantalla
❖ Depende de la habilidad y el tacto
Restricciones en mobile
47. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
Por definición
mobile brinda posibilidades
48. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
❖ Mobile vs desktop
➢ Portabilidad
➢ Innovación más rápida
❖ Servicios de localización
➢ Mapas
➢ Contenidos personalizados
❖ Segunda pantalla
➢ Para visualizar información
contextual adicional
Oportunidades en mobile
❖ Apoyo de accesibilidad
➢ Integrado
➢ A través de terceros
❖ Integración de dispositivos
➢ Contactos
➢ Cámara
➢ Mapas
50. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
Configuración de accesibilidad en iOS
Settings Limitaciones del usuario
Voiceover
Personas invidentes, baja visión, dificultad de aprendizaje y
discapacidad cognitiva.
Zoom, Large Text
Personas invidentes, baja visión, dificultad de aprendizaje y
discapacidad cognitiva.
Invert Colours
Personas con baja visión, daltonismo, dificultad de
aprendizaje.
Speak selection
Personas con baja visión, daltonismo, dificultad de aprendizaje
y discapacidad cognitiva.
Speak auto-text
Personas invidentes, baja visión, dificultad de aprendizaje y
discapacidad cognitiva.
Hearing aid mode Sordera o deficiencias auditivas.
Guided access Todas las personas incluidos los chicos y educación.
Assistive touch Movilidad.
51. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
Configuración de accesibilidad en iOS 7
52. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
Configuración de accesibilidad en Android
Settings Limitaciones del usuario
Voice output
Personas invidentes, baja visión, dificultad de aprendizaje y
discapacidad cognitiva.
Haptic feedback Personas invidentes, baja visión, sordera. (o ambas)
Large text
Personas con baja visión, dificultad de aprendizaje y
discapacidad cognitiva.
Speak passwords
Personas invidentes, baja visión, dificultad de aprendizaje,
discapacidad cognitiva.
Enhance web accessibility Personas invidentes.
53. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
Configuración de accesibilidad en Android
55. www.technisys.com
“Se debe especificar el idioma de una página o app”
Indicar el Idioma
02 / Hablemos de accesibilidad web & mobile / Soluciones a los problemas de accesibilidad
más comunes
Ejemplo iOS
Ejemplo Android
Las tecnologías asistivas, como por ejemplo los lectores de pantalla, tienen diferentes sintetizadores de voz para el
contenido en diferentes idiomas por lo que el lenguaje debe ser discernible mediante programación para que sea
correctamente entendido.
56. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Soluciones a los problemas de accesibilidad
más comunes
Ejemplo iOS
Ejemplo Android
“Se debe poder hacer foco solamente en los elementos activos”
Hacer foco en los elementos
La funcionalidad debe ser operable a través de cualquier dispositivo de entrada (teclado, mouse, el tacto, voz, switch,
etc. ) . Los usuarios con limitaciones pueden no ser capaces de usar una pantalla táctil o un dispositivo de puntero y
pueden tener que depender de un teclado o dispositivo de entrada alternativo para la navegación y entrada.
57. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Soluciones a los problemas de accesibilidad
más comunes
Ejemplo iOS
Ejemplo Android
“Se debe aprovechar la opción del zoom”
Zoom
El Zoom debe ser soportado por el contenido HTML en un navegador móvil o en una aplicación nativa sin el uso de
tecnología de asistencia y sin pérdida de contenido o funcionalidad.
La configuración de iOS proporciona una manera para que los usuarios puedan ampliar el texto y
aumentar el nivel del zoom.
58. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Soluciones a los problemas de accesibilidad
más comunes
Ejemplo iOS
Ejemplo Android
“No debe haber trampa en el teclado”
Teclado
Los controles deben recibir libremente el foco y permitir al usuario moverse a otro control en la
medida de lo necesario mientras está revisando los contenidos de la pantalla.
Si se utiliza un teclado o controlador direccional el enfoque no debe quedar atrapado en ninguna parte de la pantalla.
Todos los elementos enfocables deben ser accesibles.
59. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Soluciones a los problemas de accesibilidad
más comunes
Ejemplo iOS
Ejemplo Android
“El orden debe ser lógico”
Orden del contenido.
60. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Soluciones a los problemas de accesibilidad
más comunes
Ejemplo iOS
Ejemplo Android
“No se debe cambiar el foco o el contexto automáticamente”
Dirigir el foco
C
Cuando se cambia el foco en base a lo que ingresa el usuario, como por ejemplo introducir una cantidad máxima de
números permitidos en un campo de número de teléfono, el foco no debería pasarse al siguiente campo. El foco y el
contexto sólo deberían cambiar en base a la solicitud del usuario.
61. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Soluciones a los problemas de accesibilidad
más comunes
Ejemplo iOS
Ejemplo Android
“Todos los controles del formulario deben tener labels”
Labels
Todos los controles de entrada deben tener etiquetas explícitas. Estas etiquetas son importantes para todos los
usuarios con el fin de entender cual es el tipo de entrada pero además son esenciales para aquellos usuarios que no
puede deducir fácilmente lo que el elemento del formulario quiere decir.
62. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Soluciones a los problemas de accesibilidad
más comunes
“Los controles, elementos, y objetos deben estar correctamente agrupados”
Agrupar Form Inputs
Ejemplo iOS
Ejemplo Android Componentes de Radio button agrupados a través de RadioGroup
Controles , elementos y objetos deben ser agrupados adecuadamente para que los usuarios de tecnología asistiva
como un lector de pantalla para entender la relación entre los controles.
63. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Soluciones a los problemas de accesibilidad
más comunes
❖ Usar elementos text label en lugar de imágenes de texto.
❖ Los cambios de estado deben estar bien comunicados.
❖ Usar los mensajes de alerta standard de los OS.
❖ No hacer refresco automático de las páginas.
❖ Ofrecer de 30 a 60 segundos para cada campo en la pantalla y mostrar
una ventana emergente que permite al usuario ampliar el tiempo.
❖ Las páginas tienen que ser únicas y claramente identificables.
❖ Ofrecer alternativas para el contenido no textual
❖ Asegurarse de que el contenido está claramente escrito y sea
fácil de leer.
❖ Usar ARIA (Accessible Rich Internet Applications)
65. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / Accesibilidad mobile
❖ Con personas con visión limitada o personas no videntes.
❖ Con personas con deficiencia auditiva o persona sorda.
❖ Con personas con capacidades de manipulación y fuerza limitadas.
❖ Con personas con limitaciones cognitivas.
❖ Sin percepción de color (para no depender de esta variable)
El criterio de testeo consiste en hacer pruebas:
67. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Por dónde empezamos?
Estándares y recomendaciones
Define los protocolos y
estándares para la web y
mobile, como HTML o CSS.
Guiar la Web hacia su
máximo potencial a través
del desarrollo de
protocolos y pautas.
Promueve la visión de Web
Única.
¿Quées?Objetivo
68. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Por dónde empezamos?
Estándares y recomendaciones
- Mobile Web Best
Practices Working Group.
- Device Description
Working Group.
- Mobile Web for Social
Development Interest
Group.
Ayudar a los desarrolladores
a mejorar la accesibilidad y
usabilidad de los contenidos
para dispositivos móviles.
ObjetivoGruposdeTrabajo
69. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Por dònde empezamos?
Mobile Web Best Practices Working Group
Elaboró un conjunto de buenas prácticas para mejorar la experiencia
de los usuarios al acceder al contenido Web desde dispositivos móviles.
Desarrolló dos documentos
❖ Mobile Web Best Practices 1.0 (MWBP) (Recomendación desde julio de 2008)
➢ Son pautas para mejorar la experiencia de usuario en la navegación web a través de
dispositivos móviles.
❖ Mobile Web Application Best Practices (Recomendación desde diciembre de
2010)
➢ Amplían las MWBP
➢ Recogen las mejores prácticas para las aplicaciones Web que se ejecutan en el
navegador y/o que usan las capacidades de los dispositivos avanzados (por
ejemplo la geolocalización).
70. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Por dónde empezamos?
}60 pautas organizadas en 10 principios clave que
permiten incrementar el público que puede acceder a
los contenidos, crear sitios Web y aplicaciones
eficaces y, hacer la navegación en la Web accesible
desde más dispositivos.
Mobile Web
Best Practices
1.0 (MWBP)
71. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Por dónde empezamos?
Amplían las MWBP y recogen las mejores prácticas para
las aplicaciones Web que se ejecutan en el navegador y/o
que usan las capacidades de los dispositivos avanzados
(por ejemplo la geolocalización).{
Mobile Web
Application
Best Practices
72. www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Por dónde empezamos?
A
AA
AAA
Niveles de conformidad
Satisface todos los Criterios de Conformidad del
Nivel A.
Satisface todos los Criterios de Conformidad de
los Niveles A y AA.
Satisface todos los Criterios de Conformidad de
los Niveles A, AA y AAA.