Taller de 3 horas de introducción a la accesibilidad web

1. Introducción
CC www.diseñoaccesible.es
Accesibilidad Web

2. Agenda
1. ¿Por qué nos preocupa?
2. ¿Qué es?
Break
3. ¿Por donde empiezo?
4. Probemos!
CC https://www.flickr.com/photos/otacke/

3. ¿Por qué nos preocupa?

4. Todos somos diferentes
https://www.youtube.com/watch?v=pmqrscX6wa8

5. Definir el público objetivo
Tecnología
Dispositivo (pantalla, teclado, mouse)
Velocidad de conexión
Navegador
CC https://www.flickr.com/photos/flat61/
Plugin (Flash, etc.) JavaScript
Usuario sin ninguna discapacidad

6. ¿Quiénes más usan la web?
CC http://en.wikipedia.org/
CC https://www.flickr.com/photos/mhofstrand
CC commons.wikimedia.org
CC http://www.flickr.com/photos/dcmetroblogger

7. Algunos números
Discapacidad en el
mundo 10%
(OMS)
• 16%: Discapacidad (INE,
2012)
• 14,1%: Mayores de 65 años (INE,
2012)
• 51%: De los hogares de bajo
nivel socioeconómico, la XO es la
única computadora (CIFRA, 2012)
¿Cuantas personas usan móviles para
acceder a internet?

8. Definiciones previas
• Deficiencia
– Pérdida o anormalidad de una estructura o función
psicológica, fisiológica o anatómica.
• Discapacidad
– Restricción o ausencia (causada por una deficiencia) de la
capacidad de realizar una actividad en la forma o dentro
del margen que se considera normal por el ser humano.
• Minusvalía
– Situación desventajosa para una individuo determinado,
consecuencia de una deficiencia o de una discapacidad,
que le limita e impide desempeñar un rol que es normal en
su caso (en función de la edad, sexo y factores sociales y
culturales).

9. Lo único universal es la diversidad
Limitación X Contexto = Discapacidad
Cualquier limitación (característica personal o
tecnológica) puede transformarse en una
discapacidad si el contexto impone barreras
CC https://w CC http://www.flickr.com/photos/camera_is_a_mirror_with_memory/ ww.flickr.com/photos/remedy904/ CC http://www.flickr.com/photos/dcmetroblogger

10. Tecnologías de apoyo
CC en.wikipedia.org CC en.wikipedia.org CC de.wikipedia.org

11. Lectores de pantalla
• Jaws
– No es un Software gratuito, se pueden descargar guías de
usuario y demos en:
http://www.funcaragol.org/html/mainjaws.htm
• NVDA
– Lector de pantalla gratuito y de código abierto para Windows.
Está disponible en 11 idiomas, entre los que se encuentra el
español. Información y descargas en la página web del
proyecto: http://www.nvda-project.org/.
• Orca
– Software libre, de código abierto que posee un lector de
pantalla y un magnificador. Ayuda a proporcionar acceso a
aplicaciones y herramientas dentro del entorno Linux.

12. Componentes de la accesibilidad web
De la
Computadora
Del Navegador Del Contenido
Usuarios Autores

13. La Universalidad de la Web
“El poder de la Web está en su
universalidad. Un acceso para
todo el mundo
independientemente de su
discapacidad es un aspecto
esencial”
(Tim Berners-Lee, Director del W3C e inventor de la
Web)

14. Web para todos?
http://www.snap.gub.uy/ 2010

15. O para algunos?

16. Web para todos?
www.uruguay.gub.uy 2010

17. O para algunos?

18. La accesibilidad nos beneficia a
TODOS
Usuarios en su diversidad:
• De edad avanzada
• Con conexiones lentas
• Con tecnologías antiguas
• Con tecnologías muy nuevas
• Que operen en contextos no
ideales
• Con bajo nivel de alfabetización
• Que no hablan el idioma
• Nuevos o poco frecuentas
No es solo para personas con discapacidad

19. ¿Por qué hacer una web accesible?
• Menor costo de mantenimiento
• Menor costo en capacidad del servidor
• Menor tiempo de carga
• Evita crear múltiples versiones
• Independencia de dispositivo
• Menor costo de actualización a nuevas tecnologías
• Mejora la usabilidad
• Mejora en la indexación en buscadores
• SEO gratis!
• Demostrar responsabilidad social
Qué tal preguntarnos: Por qué no hacerlo???
CC ringling.libguides.com

20. Además …
• No es difícil
• No es más costoso
• No implica diseños primitivos, feos, simples
• No implica crear versiones
Es un requisito más
desde el inicio del proyecto
a lo largo de todo el proyecto
por todos los involucrados.

21. ¿Qué es?

22. Diseño
para
algunos

23. Ejemplo
de
Diseño
Univers
al

24. Accesibilidad Universal
Adaptaciones Versus Accesibilidad

25. Diseño Universal

26. Accesibilidad Web
La posibilidad que recursos web
(información y servicios) puedan ser
utilizados de forma satisfactoria por
el mayor número posible de personas,
independientemente de las
limitaciones personales o de
limitaciones derivadas de su
entorno, sean éstas de carácter físico,
mental, educativo, familiar o socio-económico.
CC pixabay.com

27. Break
CC https://www.flickr.com/photos/otacke/

28. ¿Por donde empiezo?

30. Componentes esenciales
Web Accessibility Initiative – Iniciativa de Accesibilidad Web (WAI), un grupo de trabajo del
Consorcio de la World WideWeb (W3C).

31. ISO/IEC DIS 40500:2012
• En 2012 la Organización Internacional de
Normalización (ISO) publica la norma ISO/IEC
DIS 40500:2012
• Equivalente textualmente a las WCAG 2.0
• Con el objetivo de facilitar su uso en países
que requieran una normalización por parte de
ISO en sus procesos normalizadores.

32. WCAG 2.0
Niveles de Accesibilidad
A •Debe cumplir
AA •Debería cumplir
AAA •Si cumple es mucho mejor.
4
Principios
12
Pautas
61
Criterios de
conformidad
Conceptos
fundamentales
Objetivos Básicos Requisitos concretos a
cumplir, testeables
• Perceptible
• Operable
• Comprensible
• Robusto

33. Documentos complementarios
WCAG 2.0
Pautas de accesibilidad de
contenido web
Ejercicio
Como Cumplir Técnicas Comprender
How to meet
WCAG2.0
Techniques for
WCAG 2.0
Understanding
WCAG2.0

34. Un vistazo a WCAG 2.0
Perceptible Provee textos alternatvios a contenido no textual
Provee subtítulos y otras alternativas para multimedia
Crea contenido que pueda ser presentado de diferentes maneras sin perder contenido
Facilita al usuario poder ver y oir el contenido
Operable Crea funcionalidades disponibles por teclado
Brinda suficiente tiempo para leer y usar el contenido
No uses contenido que pueda causar ataques
Ayuda a los usuarios a navegar y encontrar el contenido
Comprensible Crea textos legibles y comprensibles
Crea contenido que se muestre y opera de forma predecible
Ayuda a los usuarios a evitar y corregir errores
Robusto Maximiza la compatibilidad con herramientas actuales y futuras

35. Probemos!

36. Quiero ir al cine…
• Qué película puedo ver hoy de noche? A que
hora empieza? Cuánto cuesta la entrada?
– http://www.movie.com.uy/
• Prueba luego con una web que hayas
desarrollado, con una que habitualmente
uses…
Usando un lector de pantalla….
Ejercicio

37. Lo único universal es la diversidad
La discapacidad no está en las personas sino
en el contexto

38. CC http://www.flickr.com/photos/wwworks