Introducción a la accesibilidad web
Transcript of Introducción a la accesibilidad web
![Page 1: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/1.jpg)
Accesibilidad Web
Introducción
CC www.diseñoaccesible.es
![Page 2: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/2.jpg)
Agenda
1. ¿Por qué nos preocupa?
2. ¿Qué es?
3. ¿Por donde empiezo?
4. Probemos!
BreakCC https://www.flickr.com/photos/otacke/
![Page 3: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/3.jpg)
¿Por qué nos preocupa?
![Page 4: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/4.jpg)
Todos somos diferentes
https://www.youtube.com/watch?v=pmqrscX6wa8
![Page 5: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/5.jpg)
Definir el público objetivo
Tecnología
Dispositivo (pantalla, teclado, mouse)
Velocidad de conexión
Navegador
Plugin (Flash, etc.) JavaScript
Usuario sin ninguna discapacidad
CC https://www.flickr.com/photos/flat61/
![Page 6: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/6.jpg)
CC http://en.wikipedia.org/
¿Quiénes más usan la web?
CC https://www.flickr.com/photos/mhofstrand
CC commons.wikimedia.org
CC http://www.flickr.com/photos/dcmetroblogger
![Page 7: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/7.jpg)
Algunos números
Discapacidad en el
mundo 10% (OMS)
• 16%: Discapacidad (INE,
2012)
¿Cuantas personas usan móviles para
acceder a internet?
• 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)
![Page 8: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/8.jpg)
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).
![Page 9: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/9.jpg)
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://www.flickr.com/photos/remedy904/CC http://www.flickr.com/photos/camera_is_a_mirror_with_memory/ CC http://www.flickr.com/photos/dcmetroblogger
![Page 10: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/10.jpg)
Tecnologías de apoyo
CC en.wikipedia.org CC en.wikipedia.org CC de.wikipedia.org
![Page 11: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/11.jpg)
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.
![Page 12: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/12.jpg)
De la Computadora
Del Navegador Del Contenido
AutoresUsuarios
Componentes de la accesibilidad web
![Page 13: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/13.jpg)
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)
![Page 15: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/15.jpg)
O para algunos?
![Page 17: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/17.jpg)
O para algunos?
![Page 18: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/18.jpg)
La accesibilidad nos beneficia a TODOS
• 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
Usuarios en su diversidad:
![Page 19: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/19.jpg)
¿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
![Page 20: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/20.jpg)
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.
![Page 21: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/21.jpg)
¿Qué es?
![Page 22: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/22.jpg)
Diseño para algunos
![Page 23: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/23.jpg)
Ejemplo deDiseño Universal
![Page 24: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/24.jpg)
Accesibilidad Universal
VersusAdaptaciones Accesibilidad
![Page 25: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/25.jpg)
Diseño Universal
![Page 26: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/26.jpg)
Accesibilidad WebLa 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
![Page 27: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/27.jpg)
Break
CC https://www.flickr.com/photos/otacke/
![Page 28: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/28.jpg)
¿Por donde empiezo?
![Page 29: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/29.jpg)
![Page 30: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/30.jpg)
Componentes esenciales
Web Accessibility Initiative – Iniciativa de Accesibilidad Web (WAI), un grupo de trabajo del Consorcio de la World Wide Web (W3C).
![Page 31: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/31.jpg)
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.
![Page 32: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/32.jpg)
WCAG 2.0
A•Debe cumplir
AA•Debería cumplir
AAA•Si cumple es mucho mejor.
Niveles de Accesibilidad
4 Principios
12 Pautas
61 Criterios de
conformidad
Conceptos fundamentales
Objetivos Básicos Requisitos concretos a cumplir, testeables
• Perceptible• Operable• Comprensible• Robusto
![Page 33: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/33.jpg)
Documentos complementariosWCAG 2.0
Pautas de accesibilidad de contenido web
Como Cumplir Técnicas Comprender
How to meet WCAG2.0
Techniques for WCAG 2.0
Understanding WCAG2.0
Ejercicio
![Page 34: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/34.jpg)
Un vistazo a WCAG 2.0Perceptible 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
![Page 35: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/35.jpg)
Probemos!
![Page 36: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/36.jpg)
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
![Page 37: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/37.jpg)
Lo único universal es la diversidad
La discapacidad no está en las personas sino
en el contexto
![Page 38: Introducción a la accesibilidad web](https://reader038.fdocuments.es/reader038/viewer/2022102903/55aa77c81a28ab620d8b47b1/html5/thumbnails/38.jpg)
CC http://www.flickr.com/photos/wwworks