![Page 1: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/1.jpg)
AccesibilidadIntroducción
Disclaimer: Lamentablemente (para el autor) nada de esto es creación del autor, su único mérito es recopilar información reconociendo a los autores originales y presentarlo en un formato apropiado para servir de apoyo. No obstante, esta presentación puede contener opiniones del autor (en lo posible, pocas...).
![Page 2: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/2.jpg)
AutoresUsuarios
Componentes de la accesibilidad web
![Page 3: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/3.jpg)
Limitaciones en el acceso a la web (1)
Discapacidades Visuales• Ceguera, baja visión, problemas para distinguir colores.
• Imágenes sin alternativa textual• Imágenes complejas sin descripción• Fuentes de texto con medidas absolutas• Falta de contraste en colores• Información transmitida con colores
![Page 4: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/4.jpg)
Limitaciones en el acceso a la web (2)
Discapacidades Auditivas• Sordera parcial o total
• Falta de alternativas textuales a información sonora• Lenguaje no claro
![Page 5: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/5.jpg)
Limitaciones en el acceso a la web (3)
Discapacidades Motrices• Dificultad o imposibilidad de mover las manos, temblores
o lentitud muscular etc.
• Tiempo limitado de espera de respuesta• No soporte de alternativas de teclado
![Page 6: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/6.jpg)
Limitaciones en el acceso a la web (4)
Discapacidades Cognitivas• Dificultad de aprendizaje (Dislexia) o discapacidades
cognitivas que afecten la memoria, la atención, las habilidades lógicas etc.
• Textos no claros• Dificultades en la navegación• Única forma de transmitir información
![Page 7: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/7.jpg)
Limitaciones en el acceso a la web (5)
• Limitaciones asociadas con la edad avanzada• Visión, audición, motrices, memoria
• Limitaciones Tecnológicas• Tecnología antigua o muy nueva, • Limitaciones de ancho de banda, • Uso de computadora con limitaciones de
administración
![Page 8: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/8.jpg)
Accesibilidad Universal
Opción 1Opción 1 Versus Opción 2 Opción 2
![Page 9: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/9.jpg)
La accesibilidad nos beneficia a TODOS
• También beneficia a usuarios:– De edad avanzada– Con conexiones lentas o
tecnologías antiguas– Con tecnologías muy nuevas– Operen en contextos no
ideales– Con bajo nivel de
alfabetización o que no hablan el idioma
– Nuevos o poco frecuentas
• No solo beneficia a personas con discapacidad
![Page 10: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/10.jpg)
¿Por qué hacer una web accesible?
• La accesibilidad es rentable• Mayor Público Objetivo• Reducción del tiempo de carga• Mejora en la usabilidad• Mejora en la indexación• Usuario ciego más famoso: GOOGLE• Independencia de dispositivo• Demostrar Responsabilidad Social• Reducir la Responsabilidad Legal
Qué tal preguntarnos: Por que no hacerlo???
![Page 11: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/11.jpg)
Además …
• No es difícil• No es más costoso• No implica diseños primitivos, feos, simples• No implica crear versiones
Un requisito más desde el inicio del proyectoa lo largo de todo el proyecto por todos los involucrados.
![Page 12: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/12.jpg)
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.
![Page 13: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/13.jpg)
Diseño Universal
• La accesibilidad se sustenta en una serie de premisas llamadas principios del
diseño para todos o diseño universal.
• Objetivo: el diseño de productos y entornos de fácil uso para el mayor número posible de personas,
sin la necesidad de adaptarlos o rediseñarlos de una forma especial.
• Sirven para orientar el proyecto entero, desde su conceptualización, alcance y las especificaciones
![Page 14: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/14.jpg)
¿Por donde empezar?
![Page 15: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/15.jpg)
Principios, pautas y criterios de conformidad de WCAG 2.0
Niveles de Accesibilidad
4 Principios
4 Principios
12 Pautas
12 Pautas
61 Criterios de
conformidad
61 Criterios de
conformidad
Conceptos fundamentales
Objetivos Básicos Requisitos concretos a cumplir, testeables
•
Perceptible• Operable• Comprensible• Robusto
![Page 16: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/16.jpg)
Documentos complementarios
WCAG 2.0Pautas de accesibilidad de
contenido web
Como Cumplir
Como Cumplir
Técnicas
Técnicas ComprenderComprender
How to meet WCAG2.0
Techniques for WCAG 2.0
Understanding WCAG2.0
Ejemplo 1Pautas online
![Page 17: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/17.jpg)
Algunos criterios importantes al ingresar contenido
![Page 18: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/18.jpg)
¿Qué descripción le pondrías?
Ítem 1 Ítem 2
Ejercicio 11 2 3
4 5 6
![Page 19: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/19.jpg)
Una posible solución…
Ítem 1 Ítem 2
Ejercicio 11 2 3
4 5 6
alt = “¡Importante!”
alt = “ Gatito”
alt = “En formato pdf”
alt = “3 años de garantía”
alt= "Introduzca las letras de la imagen"alt = “”
![Page 20: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/20.jpg)
Si la imagen necesita más descripción...
<img src="grafico1.gif“
alt = "Variación porcentual en el incremento de colombianos y ecuatorianos en España. 1998 - 2007.“
longdesc="grafico1.html" />
Ejemplo:
![Page 21: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/21.jpg)
1.2 Medios Tempodependientes
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta clase?
Proveer alternativas para multimedia
Cinco medidas de accesibilidad diferentes:• Transcripción textual: descripciones tanto de la parte visual como
de la parte auditiva
• Subtítulos
• Audiodescripción
• Audiodescripción ampliada
• Interpretación en lengua de señas
Perceptible | Operable | Distinguible | Robusto
![Page 22: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/22.jpg)
Evaluación de accesibilidad
![Page 23: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/23.jpg)
Evaluación de accesibilidad• Objetiva, rápida y económica. • Validar de estándares, pautas y aspectos específicos de la accesibilidad.• Utilizar simuladores de discapacidades y de otras tecnologías.
• Evaluación manual utilizando herramientas y un checklist de apoyo.
• Limitar o modificar alguna habilidad física o sensorial:•guantes gruesos para limitar la destreza manual•lentes o venda para limitar la visión•tecnologías de apoyo como lectores de pantalla o punteros bucales.
• No evalúan la conformidad con las pautas, detectan barreras.
![Page 24: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/24.jpg)
Evaluaciones automáticas
• Objetiva• Rápida • Económica
• Utilizando herramientas gratuitas– Estándares W3C– Pautas WCAG
![Page 25: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/25.jpg)
Evaluaciones automáticas >>Estándares
• Gramática (X)HTML– Garantiza portabilidad– Facilita mantenibilidad del
código
Recomendado en Pauta 4.1 de WCAG 2.0
![Page 26: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/26.jpg)
Evaluaciones automáticas >>Estándares
• Hojas de Estilos CSS– Garantiza portabilidad– Facilita mantenibilidad del
código
Recomendado en Pauta 4.1 de WCAG 2.0
![Page 27: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/27.jpg)
Evaluaciones automáticas >>Pautas de Accesibilidad
• Herramientas evalúan ciertos aspectos de la accesibilidad
• Algunos aspectos no son automatizables• No es una evaluación completa• Tener en cuenta: falsos positivos y negativos• Utilizar al menos dos herramientas
![Page 28: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/28.jpg)
Evaluaciones automáticas >>Pautas de Accesibilidad
http://www.tawdis.net/
http://examinator.ws/
http://www.totalvalidator.com/
![Page 29: Taller de introducción a la accesibilidad web](https://reader035.vdocuments.co/reader035/viewer/2022062514/557b9fb2d8b42aa0758b533c/html5/thumbnails/29.jpg)
Cumplir las pautas no es lo mismo que ser accesible
Un portal web...• Puede cumplir con todas las pautas
• Puede pasar todos los test automáticos
• Puede parecer accesible
Sin embargo ...• Puede seguir teniendo barreras de acceso
Entonces...• El objetivo no es cumplir pautas, sino ser accesible
• Las pautas son herramientas para llegar a la accesibilidad
• Es necesario realizar pruebas manuales y test de usuarios
• Información de contacto para que el usuario reporte barreas de acceso.