Desarrollo de un Portal
Accesibilidad
22 de octubre, 2010
Silvia Da Rosa
silvia.darosa@agesic.gub.uy
No todos navegamos igual
Si quisieras mirar un video de
Mafalda en el Aeropuerto…
¿Qué palabras se dicen durante
los prime...
No todos navegamos igual
Ejercicio 1
¿Qué solución plantearías?
• Que el usuario lleve siempre
audífonos.
• Que subtitulen...
No todos navegamos igual
¿Y si no puedes usar el mouse y/o la mano derecha
(o izquierda) …
• Por un accidente
• Porque ten...
No todos navegamos igual
Ejercicio 2
¿Qué solución plantearías?
• Que tengan siempre un mouse de repuesto.
• Hacer que las...
Diseño para
algunos
6
Diseño Universal – Diseño para todos
7
Accesibilidad Universal
Opción 1 Versus Opción 2
¿Accesibilidad para quienes?
• Discapacidad
Visual, Auditiva, Motora,
Cognitiva
• Edad avanzada
• Limitaciones tecnológica...
Accesibilidad Web
La posibilidad que recursos web
(información y servicios) puedan ser
utilizados de forma satisfactoria p...
Tecnología de apoyo
De la
Computadora
Del Navegador Del Contenido
Componentes de la Accesibilidad Web
AutoresUsuarios
¿Por donde empezar?
Principios, pautas y criterios de
conformidad de WCAG 2.0
A
• Debe cumplir
AA
• Debería cumplir
AAA
• Si cumple es mucho m...
Documentos complementarios
WCAG 2.0
Pautas de accesibilidad de
contenido web
Como Cumplir Técnicas Comprender
How to meet
...
¿Cómo profundizo después de esta clase?
• Guías Agesic:
http://www.agesic.gub.uy/
• Pautas WCAG 2.0:
http://www.codexexemp...
¿En qué momento del proyecto se aplican?
En todo momento:
• Planificación
• Diseño
• Desarrollo
• Mantenimiento
Por todos ...
1.1 Alternativas textuales
Brindar alternativas textuales para imágenes.
Perceptible | Operable | Distinguible | Robusto
a...
¿Cómo se ve un sitio sin imágenes?
¿Cómo se ve un sitio sin imágenes?
¿Cómo se ve un sitio sin imágenes?
Ejercicio 3
1. Abrir el navegador Mozilla Firefox
Si no tiene el navegador instalado, u...
¿Qué descripción le pondría a cada
imagen?
Ítem 1
Ítem 2
Ejercicio 4
1 2 3
4 5 6
Una posible solución…
Ítem 1
Ítem 2
Ejercicio 4
1 2 3
4 5 6
alt = “¡Importante!”
alt = “ Gatito”
alt = “En formato pdf”
al...
Si la imagen necesita más descripción...
<img src="grafico1.gif“
alt = "Variación porcentual en
el incremento de
colombian...
Controles de formularios
<label for="nombre">nombre: </label>
<input type="text" id="nombre"
name="nombre" />
<input name=...
1.2 Medios Tempodependientes
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta
clase?
Proveer alternativas ...
Transcripción textual
[Sonido de calle]
[Entra música]
En la calle casi todas las personas van en silla de ruedas. Una
chi...
1.3 Adaptable
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta
clase?
El contenido debe poder
presentarse ...
Marcar estructura con elementos
semánticos
• Usar <h1> - <h6> para encabezados.
• Marcar los párrafos con <p>
• Usar <ul>,...
Ejemplo de elementos semánticos
<h1>Recetas de cocina</h1>
<h2>Pascualina</h2>
<h3>Ingredientes</h3>
<ul>
<li>Masa</li>
<l...
Marcar texto especial con elementos
semánticos
• Usar <em> y <strong> para el texto enfatizado
• Usar <q> para las citas c...
Ejemplos para marcar texto especial
La accesibilidad web beneficia además a las personas
sin discapacidad.
Ejemplo 1
Ejemp...
Ejemplos para marcar texto especial
Ejemplo 3
Extracto del libro El Quijote de Miguel de Cervantes:
En un lugar de la manc...
1.4 Distinguible
Hacer que sea más fácil para el usuario ver y escuchar el contenido.
• No usar el color para transmitir i...
Por ejemplo:
• “Los campos marcados en rojo son
obligatorios.”
• “Por favor revisa los campos
obligatorios marcados en roj...
Contraste suficiente
Debe existir un contraste suficiente entre color de fondo y de letra.
2/09/1
Verificar Contraste
• Simular discapacidades visuales:
http://colorfilter.wickline.org/
Ejemplo:
http://www.distanc...
2/09/1
Formato y tamaño de los textos
• Utilizar tamaños relativos (em, %)
Permitir aumentar hasta un 200% el texto
sin de...
2.1 Accesible por teclado
• Usar enlaces y controles de formulario estándar de HTML.
• Usar manejadores de evento que pued...
2.2 Tiempo suficiente
• Responder físicamente
• Mover el ratón, usar el teclado, etc.
• Leer el contenido.
• Interactuar y...
Tiempo suficiente
• Permitir modificar el tiempo de sesión.
• Ante una interrupción, continuar sin pérdida de datos.
2.3 Convulsiones
Personas con epilepsia fotosensitiva pueden sufrir ataques por cambios
rápidos de luz a oscuridad, que su...
2.4 Navegable
Ayudar al usuario a navegar, encontrar el contenido y determinar dónde
está.
Foco visible
Usar encabezados. ...
Ayudar al usuario a encontrar el contenido
Nombrar los enlaces de manera que identifiquen su propósito.
Incluir mapa del s...
Ayudar al usuario a saber dónde está
Titular las páginas
Indicar situación actual dentro de las barras de navegación
Miga ...
3.1 Legible
Simplificar el contenido de texto.
Perceptible | Operable | Distinguible | Robusto
Idioma de la página: <html ...
3.2 Predecible
• Al recibir el foco no iniciar ningún cambio en el contexto
• La navegación debe ser coherente
• La identi...
3.3 Entrada de datos asistida
Ayuda a evitar y corregir errores.
• Identificar errores
• Prevención de errores
• Proporcio...
4.1 Compatible
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta
clase?
Maximizar la compatibilidad con otr...
Validar estándares
Que nos marcan?
Mapa conceptual?
Cómo profundizo después de esta
clase?
• Validador HTML [http://valida...
¿Cómo evaluar la accesibilidad?
Evaluación automática
•TAW para WCAG2.0: http://www.tawdis.net
• eXaminator: http://examin...
Cumplir las pautas no es lo mismo que ser
accesible
Un portal web...
• Puede cumplir con todas las pautas
• Puede pasar to...
Navegar con lector de pantalla
1. Activar NVDA
2. Navegar usando NVDA
• http://www.sanidadpolicial.gub.uy/
• http://www.fu...
Muchas gracias
www.agesic.gub.uy
Próxima SlideShare
Cargando en…5
×

Accesibilidad Web (Una introducción de 3 horas)

1.007 visualizaciones

Publicado el

Clase de Accesibilidad como parte del Taller de Desarrollo de Portales realizado por AGESIC en 2010.
Original publicado en: www.agesic.gub.uy
http://www.agesic.gub.uy/innovaportal/file/1189/1/Clase2_Accesibilidad.pdf

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.007
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
35
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Accesibilidad Web (Una introducción de 3 horas)

  1. 1. Desarrollo de un Portal Accesibilidad 22 de octubre, 2010 Silvia Da Rosa silvia.darosa@agesic.gub.uy
  2. 2. No todos navegamos igual Si quisieras mirar un video de Mafalda en el Aeropuerto… ¿Qué palabras se dicen durante los primeros 25 segundos? ¿Cuántas veces llama Mafalda por su nombre a su mamá? Ejercicio 1
  3. 3. No todos navegamos igual Ejercicio 1 ¿Qué solución plantearías? • Que el usuario lleve siempre audífonos. • Que subtitulen los videos. • Que el usuario se compre un equipo con sonido más potente. • Que el usuario no utilice Internet en espacios públicos.
  4. 4. No todos navegamos igual ¿Y si no puedes usar el mouse y/o la mano derecha (o izquierda) … • Por un accidente • Porque tener una mano ocupada • Porque se rompió el mouse …y necesitaras el teléfono del Departamento de RRHH de la AIN? Ejercicio 2 http://www.ain.gub.uy/nosotros/nosotros_edificio.html
  5. 5. No todos navegamos igual Ejercicio 2 ¿Qué solución plantearías? • Que tengan siempre un mouse de repuesto. • Hacer que las funciones sean accesibles por teclado. • Aconsejar a los usuarios que practiquen usar el mouse con la mano izquierda para casos de emergencia. • Que no tomen mate mientras trabajan.
  6. 6. Diseño para algunos 6
  7. 7. Diseño Universal – Diseño para todos 7
  8. 8. Accesibilidad Universal Opción 1 Versus Opción 2
  9. 9. ¿Accesibilidad para quienes? • Discapacidad Visual, Auditiva, Motora, Cognitiva • Edad avanzada • Limitaciones tecnológicas: Antigua, nueva. Ancho de banda. Plugins, navegador.
  10. 10. 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.
  11. 11. Tecnología de apoyo
  12. 12. De la Computadora Del Navegador Del Contenido Componentes de la Accesibilidad Web AutoresUsuarios
  13. 13. ¿Por donde empezar?
  14. 14. Principios, pautas y criterios de conformidad de 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
  15. 15. Documentos complementarios WCAG 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 Ejemplo 1 Pautas online
  16. 16. ¿Cómo profundizo después de esta clase? • Guías Agesic: http://www.agesic.gub.uy/ • Pautas WCAG 2.0: http://www.codexexempla.org/traducciones/pautas-accesibilidad- contenido-web-2.0.htm • Mapa conceptual: http://www.triplea.es/blog/wp-content/uploads/2009/04/mapa-wcag2.pdf • Olga carreras: http://olgacarreras.blogspot.com/
  17. 17. ¿En qué momento del proyecto se aplican? En todo momento: • Planificación • Diseño • Desarrollo • Mantenimiento Por todos los integrantes del equipo • Diseño • Tecnología • Editores
  18. 18. 1.1 Alternativas textuales Brindar alternativas textuales para imágenes. Perceptible | Operable | Distinguible | Robusto alt = “Flor de Edelweiss …” El texto alternativo debe presentar contenido y función, muy raramente es una descripción. Descripciones alternativas cortas
  19. 19. ¿Cómo se ve un sitio sin imágenes?
  20. 20. ¿Cómo se ve un sitio sin imágenes?
  21. 21. ¿Cómo se ve un sitio sin imágenes? Ejercicio 3 1. Abrir el navegador Mozilla Firefox Si no tiene el navegador instalado, utilice el archivo de instalación que se encuentra en el material de clase. 2. Instalar complemento: Web Developer. https://addons.mozilla.org/es-ES/firefox/addon/60/ 3. Entrar al sitio de su organismo 4. Visualizarlo sin imágenes
  22. 22. ¿Qué descripción le pondría a cada imagen? Ítem 1 Ítem 2 Ejercicio 4 1 2 3 4 5 6
  23. 23. Una posible solución… Ítem 1 Ítem 2 Ejercicio 4 1 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 = “”
  24. 24. 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:
  25. 25. Controles de formularios <label for="nombre">nombre: </label> <input type="text" id="nombre" name="nombre" /> <input name="busqueda" type="text" title="Término para la búsqueda" /> input type="submit" value="Buscar" /> Ejemplo:
  26. 26. 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
  27. 27. Transcripción textual [Sonido de calle] [Entra música] En la calle casi todas las personas van en silla de ruedas. Una chica que no usa silla de ruedas entra en un banco. La chica dice: Buenos días, querría abrir una cuenta. El empleado le habla en lengua de signos. La chica sonríe desconcertada, porque no entiende nada. Vuelve a verse la calle y está lloviendo. Varias personas en sillas de rueda suben y bajan por ella sin problemas, un hombre que camina, se escurre por la lluvia. [ … ] Ejemplo 2 Video
  28. 28. 1.3 Adaptable Que nos marcan? Mapa conceptual? Cómo profundizo después de esta clase? El contenido debe poder presentarse de diferentes formas sin perder información o estructura: • Audio mediante un lector de pantalla • Braille por medio de una línea braille • Sin hoja de estilos • Sólo texto… Perceptible | Operable | Distinguible | Robusto Separar contenido y estructura de presentación, y usar elementos semánticos para estructurar el contenido. Ejemplo 3 www.zengarden.com
  29. 29. Marcar estructura con elementos semánticos • Usar <h1> - <h6> para encabezados. • Marcar los párrafos con <p> • Usar <ul>, <ol> y <dl> para las listas • Marcar los encabezados en las tablas de datos (<th>) y relacionarlos con las celdas de datos (<td>) Y no usarlos solamente por su presentación visual!
  30. 30. Ejemplo de elementos semánticos <h1>Recetas de cocina</h1> <h2>Pascualina</h2> <h3>Ingredientes</h3> <ul> <li>Masa</li> <li>Acelga</li> </ul> <h3>Preparación</h3> <ol> <li>Poner la masa en la asadera.</li> <li>Poner la acelga.</li> <li>Llevar al horno.</li> </ol> <h2>Tarta de zapallitos</h2> <h3>Ingredientes</h3> Recetas de cocina Pascualina Ingredientes •Masa •Acelga Preparación 1. Poner la masa en la asadera. 2. Poner la acelga. 3. Llevar al horno. Tarta de zapallitos Ingredientes Nuestro contenido En HTML
  31. 31. Marcar texto especial con elementos semánticos • Usar <em> y <strong> para el texto enfatizado • Usar <q> para las citas cortas en línea (frases dentro de otro párrafo) • Usar <blockquote> para las citas largas en bloques de texto (párrafos). • Usar <cite> para identificar las referencias • Usar <abbr> para abreviaturas y <acronym> para acrónimos • Usar <a> para enlaces Y no usarlos solamente por su presentación visual!
  32. 32. Ejemplos para marcar texto especial La accesibilidad web beneficia además a las personas sin discapacidad. Ejemplo 1 Ejemplo 2 En su discurso, Tabárez recordó que el éxito “no son sólo los resultados sino las dificultades que se pasan para alcanzarlo”. <p> La accesibilidad web <strong>beneficia</strong> además a las personas <em>sin</em> discapacidad. </p> <p> En su discurso, Tabárez recordó que el éxito <q>no son sólo los resultados sino las dificultades que se pasan para alcanzarlo</q>. </p>
  33. 33. Ejemplos para marcar texto especial Ejemplo 3 Extracto del libro El Quijote de Miguel de Cervantes: En un lugar de la mancha, de cuyo nombre no quiero acordarme… <p> Extracto del libro <cite>El Quijote</cite> de Miguel de Cervantes: </p> <blockquote cite="http://www.elquijote.com/cap1"> <p> En un lugar de la mancha, de cuyo nombre no quiero acordarme... </p> </blockquote>
  34. 34. 1.4 Distinguible Hacer que sea más fácil para el usuario ver y escuchar el contenido. • No usar el color para transmitir información. • Contraste suficiente entre color de fondo y de letra. • Tamaño del texto configurable por el usuario • Formato del texto para mejorar su legibilidad Perceptible | Operable | Distinguible | Robusto
  35. 35. Por ejemplo: • “Los campos marcados en rojo son obligatorios.” • “Por favor revisa los campos obligatorios marcados en rojo.” Cual es un enlace? Uso del color No usar el color como único medio de transmitir información.
  36. 36. Contraste suficiente Debe existir un contraste suficiente entre color de fondo y de letra.
  37. 37. 2/09/1 Verificar Contraste • Simular discapacidades visuales: http://colorfilter.wickline.org/ Ejemplo: http://www.distancia.edu.uy/ • Herramienta para verificar contraste: http://www.paciellogoup.com/resources/contrast- analyser.html Ejemplo 4 Filtro de color
  38. 38. 2/09/1 Formato y tamaño de los textos • Utilizar tamaños relativos (em, %) Permitir aumentar hasta un 200% el texto sin desarmar la estructura sin scroll horizontal para leer una línea de texto. • El texto no debe estar justificado. • Colocar interlineado de, al menos, un espacio y medio.
  39. 39. 2.1 Accesible por teclado • Usar enlaces y controles de formulario estándar de HTML. • Usar manejadores de evento que puedan lanzarse mediante teclado. onmousedown con onkeydown onmouseup con onkeyup onmouseover con onfocus onmouseout con onblur • Usar onclick. • Comprobar que no existen trampas para el foco del teclado. Todas las funcionalidades deben ser accesibles por teclado. Perceptible | Operable | Distinguible | Robusto Ejemplo 5 www.ursea.gub.uy (Firefox)
  40. 40. 2.2 Tiempo suficiente • Responder físicamente • Mover el ratón, usar el teclado, etc. • Leer el contenido. • Interactuar y rellenar los formularios. • Localizar elementos en la página. • Etc. Dar suficiente tiempo para leer y usar el contenido para: Perceptible | Operable | Distinguible | Robusto Ejemplo 6 www.opp.gub.uy www.universidad.edu.uy
  41. 41. Tiempo suficiente • Permitir modificar el tiempo de sesión. • Ante una interrupción, continuar sin pérdida de datos.
  42. 42. 2.3 Convulsiones Personas con epilepsia fotosensitiva pueden sufrir ataques por cambios rápidos de luz a oscuridad, que superen cierta frecuencia y tamaño.después de esta clase? En 1997 en Japón, un capítulo de una serie de dibujos animados produjo ataques epilépticos a gran número de personas. Herramienta para analizar si un contenido presenta riesgos. http://trace.wisc.edu/peat/ Perceptible | Operable | Distinguible | Robusto
  43. 43. 2.4 Navegable Ayudar al usuario a navegar, encontrar el contenido y determinar dónde está. Foco visible Usar encabezados. Enlace al comienzo que vaya al área principal
  44. 44. Ayudar al usuario a encontrar el contenido Nombrar los enlaces de manera que identifiquen su propósito. Incluir mapa del sitio y enlaces a páginas relacionadas. Incluir búsqueda Click aquí Leer más
  45. 45. Ayudar al usuario a saber dónde está Titular las páginas Indicar situación actual dentro de las barras de navegación Miga de pan Ejemplo 8 www.cmat.edu.uy
  46. 46. 3.1 Legible Simplificar el contenido de texto. Perceptible | Operable | Distinguible | Robusto Idioma de la página: <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> Palabras "inusuales“ Enlace a la definición Idioma de las partes xml:lang="en“ Abreviaturas <acronym title="World Wide Web Consortium" xml:lang="en">W3C</acronym> Nivel de lectura de educación secundaria Ilustraciones que ayuden a explicar Resumen texto fácil de leer: texto corto, párrafos cortos
  47. 47. 3.2 Predecible • Al recibir el foco no iniciar ningún cambio en el contexto • La navegación debe ser coherente • La identificación debe ser coherente en etiquetas, nombres y alternativas textuales • Evitar abrir nuevas ventanas. En caso de hacerlo: Avisar apertura de páginas o que sea opcional Que las páginas operen de una manera predecible. Perceptible | Operable | Distinguible | Robusto Ejemplo 9 http://www.ursea.gub.uy/ (IExplorer) Práctica CTIC
  48. 48. 3.3 Entrada de datos asistida Ayuda a evitar y corregir errores. • Identificar errores • Prevención de errores • Proporcionar ayuda contextual • Permitir confirmar datos, permitir deshacer Perceptible | Operable | Distinguible | Robusto
  49. 49. 4.1 Compatible Que nos marcan? Mapa conceptual? Cómo profundizo después de esta clase? Maximizar la compatibilidad con otros productos, incluyendo tecnología de apoyo. Perceptible | Operable | Distinguible | Robusto
  50. 50. Validar estándares Que nos marcan? Mapa conceptual? Cómo profundizo después de esta clase? • Validador HTML [http://validator.w3.org/] • Validador CSS [http://jigsaw.w3.org/css-validator/]
  51. 51. ¿Cómo evaluar la accesibilidad? Evaluación automática •TAW para WCAG2.0: http://www.tawdis.net • eXaminator: http://examinator.ws Simulador de lector de pantalla http://www.usamos.es/accesibilidadWeb/herramientas/lector.html Evaluación automática Evaluación manual Herramientas de apoyo (simuladores) Ejemplo 10 http://www.snap.gub.uy/ http://www.mrree.gub.uy/ http://www.boe.es/
  52. 52. 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 • Información de contacto disponible para que el usuario reporte barreas de acceso.
  53. 53. Navegar con lector de pantalla 1. Activar NVDA 2. Navegar usando NVDA • http://www.sanidadpolicial.gub.uy/ • http://www.fundacionctic.es/ 3. Ahora escuchar el sitio de sus organismos Ejercicio 4
  54. 54. Muchas gracias www.agesic.gub.uy

×