Technisys accesibilidad mobile

marodriguez@technisys.com I www.technisys.com
Accesibilidad Web para
todos los días
Mobile
*

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

www.technisys.com
01
Accesibilidad
en el medio físico
www.technisys.com

www.technisys.com
01 / Accesibilidad en el medio físico
¿Qué es la
accesibilidad?

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

www.technisys.com
¿La accesibilidad sólo
involucra a personas
con discapacidad?

www.technisys.com
01 / Accesibilidad en el medio físico / ¿Sólo involucra a personas con discapacidad?
Algunos tipos de discapacidades

www.technisys.com
01 / Accesibilidad en el medio físico / ¿Sólo involucra a personas con discapacidad?
Algunos ejemplos de limitaciones

www.technisys.com
Barreras comunes
del medio físico

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.

www.technisys.com
Solución mal aplicada: no sirve para nada

www.technisys.com
La solución: diseño inclusivo y universal

www.technisys.com
02
Hablemos de
accesibilidad web
y mobile
www.technisys.com

www.technisys.com
02 / Hablemos de accesibilidad web & mobile
¿Qué es la
accesibilidad web?

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

www.technisys.com
Única: No deben existir diferentes
versiones según el dispositivo o navegador
que se utilice. Universal: Utilizable
independientemente de las características
del usuario.

www.technisys.com
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)

www.technisys.com
Experiencia de usuario (UX) en internet
interfaz de
usuario
usabilidad y
accesibilidad
funcionalidad
diseño de
contenidos
plataforma
estructura
de datos
UX

www.technisys.com
Accesibilidad es hablar de acceso universal a la web

www.technisys.com
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

www.technisys.com
¿Por qué es importante
un sitio accesible?

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

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

www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Por qué es importante un sitio accesible?
Accesibilidad web:
valor agregado

www.technisys.com
¿Para quién es la
accesibilidad web?

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.

www.technisys.com
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.

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

www.technisys.com
Mitos y prejuicios
más comunes

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

www.technisys.com
Limitaciones

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

www.technisys.com
Interacción con
las interfaces
Menús
Barras de Navegación
Botones

www.technisys.com
Acceso a los
contenidos
Textos
Imágenes
Formularios
Sonido

www.technisys.com
Accesibilidad mobile

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
{

www.technisys.com
❖ 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

www.technisys.com
❖ 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.

www.technisys.com
❖ 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.

www.technisys.com
Por definición
mobile es restrictivo

www.technisys.com
❖ 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

www.technisys.com
Por definición
mobile brinda posibilidades

www.technisys.com
❖ 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

www.technisys.com
Configuración de
accesibilidad en iOS y Android

www.technisys.com
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
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
Hearing aid mode Sordera o deficiencias auditivas.
Guided access Todas las personas incluidos los chicos y educación.
Assistive touch Movilidad.

www.technisys.com
Configuración de accesibilidad en iOS 7

www.technisys.com
Configuración de accesibilidad en Android
Settings Limitaciones del usuario
Voice output
Haptic feedback Personas invidentes, baja visión, sordera. (o ambas)
Large text
Personas con baja visión, dificultad de aprendizaje y
Speak passwords
Personas invidentes, baja visión, dificultad de aprendizaje,
Enhance web accessibility Personas invidentes.

www.technisys.com
Configuración de accesibilidad en Android

www.technisys.com
Soluciones a los
problemas de accesibilidad
más comunes

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.

www.technisys.com
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.

www.technisys.com
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.

www.technisys.com
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.

www.technisys.com
más comunes
Ejemplo iOS
Ejemplo Android
“El orden debe ser lógico”
Orden del contenido.

www.technisys.com
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.

www.technisys.com
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.

www.technisys.com
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.

www.technisys.com
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)

www.technisys.com
¿Cómo sabemos si lo
estamos haciendo bien?

www.technisys.com
❖ 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:

www.technisys.com
¿Por dónde
empezamos?

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

www.technisys.com
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

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

www.technisys.com
}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)

www.technisys.com
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

www.technisys.com
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.

www.technisys.com
¿Qué son las tecnologías
o productos de apoyo?

www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Qué son las tecnologías o productos de apoyo?
Productos de apoyo: Hardware

www.technisys.com
02 / Hablemos de accesibilidad web & mobile / ¿Qué son las tecnologías o productos de apoyo?
Productos de apoyo: Software

www.technisys.com
02 / Hablemos de accesibilidad web
Para aprender un
poco más

www.technisys.com
Links de interés
Lineamientos y organismos
Lectores de pantalla
Evaluación automática
Pautas
Icons
W3C: w3.org/
Ley de Accesibilidad: infoleg.gov.ar/infolegInternet/anexos/
175000-179999/175694/norma.htm
Inadi: inadi.gob.ar/accesibilidad/
jQuery mobile: jquerymobile.com/browser-support/
NVDA: nvda-project.org
JAWS: freedomscientific.com/products/fs/jaws-product- page.
asp
Tawdis: tawdis.net/
W3C: validator.w3.org/
WCAG 2.0: w3.org/TR/WCAG/
WAI-ARIA: w3.org/TR/wai-aria/
MWBP 1.0: w3.org/TR/mobile-bp/summary
MWABP: w3.org/TR/mwabp/
Android: developer.android.com/guide/topics/ui/accessibility
iOS: developer.apple.com/library/ios/documentation/
Noun Project: https://thenounproject.com/

www.technisys.com
02 / Hablemos de accesibilidad web
¿Preguntas?
...

Technisys accesibilidad mobile

Más contenido relacionado

Similar a Technisys accesibilidad mobile

Último

Technisys accesibilidad mobile