Accesibilidad Web en Blogs
•Descargar como PPT, PDF•
0 recomendaciones•431 vistas
2010 Segundo Seminario RES NON VERBA (HECHOS, NO PALABRAS): ”Accesibilidad para Todos, nuevos retos en el Siglo XXI” Red Especial Uruguaya, UNIT Presentacion: Accesibilidad Web en Blogs ------------------- Simposio Internacional FIDA-SICA – Miradas, un solo propósito Fundación FREE. Universidad Católica. Unesco. Presentacióna: “Accesibilidad Web en Blogs” http://capacidad.es/fida2010sica/
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Similar a Accesibilidad Web en Blogs
Similar a Accesibilidad Web en Blogs (14)
Más de tayzee
Más de tayzee (20)
Último
Último (20)
Accesibilidad Web en Blogs
- 1. 2/09/10 Accesibilidad Web al Contenido Sandra Machin. smachin.tecnoadapta@gmail.com Ing. Silvia Da Rosa. tayzee@gmail.com Blogs y Herramientas de Gestión de Contenido
- 2. 2/09/10 Limitaciones asociadas a la discapacidad Visuales Ceguera, baja visión, problemas para distinguir colores Auditivas Sordera parcial o total Motrices Dificultad o imposibilidad de mover las manos, temblores o lentitud muscular etc. Cognitivas Dificultad de aprendizaje, discapacidades cognitivas que afecten la memoria, la atención, las habilidades lógicas etc.
- 3. 2/09/10 Limitaciones asociadas con la edad avanzada Visuales Auditivas Motrices Cognitivas
- 4. 2/09/10 Limitaciones tecnológicas Muy antigua Muy nueva Ancho de banda Limitaciones de administración Plugin Dispositivos Pantalla, teclado, mouse. Navegador
- 5. 2/09/10 Accesibilidad en la 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.
- 6. 2/09/10 Componentes de la accesibilidad Autores Accesibilidad del Navegador Accesibilidad de la Computadora Accesibilidad del Contenido NVDA Usuarios
- 7. 2/09/10 ¿Cómo lograr una Web Accesible? Pautas WCAG
- 8. 2/09/10 Accesibilidad del contenido web Que puedo hacer si “solo” ingreso el contenido y no soy informático? Textos Estilos Enlaces Imagenes y Video
- 9. 2/09/10 Ingreso de Texto • Evitar copiar y pegar contenidos directo de un editor de textos (word). – Copiar del editor (word) directo a un editor de textos simple tipo notepad y desde éste copiar al editor web. • Evitar el uso de estilos en el texto. Revisar en cada nota!
- 10. 2/09/10 Calidad del Texto • Verificar – Ortografía – Gramática – Abreviaturas y acrónimos – Palabras extranjeras • Párrafos cortos. • Textos cortos • Texto comprensible
- 11. 2/09/10 Empleo del color Revisar en cada nota! No usar color como único medio de transmitir información. Cual es un enlace?
- 12. 2/09/10 Contraste Contraste suficiente para colores de texto y fondo.
- 13. 2/09/10 Empleo del color y contrastes en el blog
- 14. 2/09/10 Verificar contrastes Colour Contrast Analyser (version en Espanol) http://www.visionaustralia.org.au/
- 15. 2/09/10 Enlaces Usar texto que tenga sentido cuando se lea fuera de contexto. “Si quieres conocer mi currículum click aquí. Desde aquí puedes acceder a las fotos de mi familia. Mis aficiones favoritas las encontrarás aquí.” click aquí aquí aquí “Puedes conocer mi currículum, las fotos de mi familia y mis aficiones favoritas.” Revisar en cada nota!
- 16. 2/09/10 Imagenes Revisar en cada nota! Alternativas textuales para todo contenido no textual. Óptimo: – Atributo “alt” (texto alternativo, descripción, etc)
- 17. 2/09/10 Imagenes Revisar en cada nota! Alternativas textuales para todo contenido no textual. Si la herramienta no permite “alt”: – Referir la imagen en el contexto
- 18. 2/09/10 Uso de estándares Si subo archivos que sean .PDF
- 19. 2/09/10 Mejora contínua Tests de accesibilidad www.tawdis.net Retroalimentación de usuarios Correo de contacto
- 20. 2/09/10 Gracias! Sandra Machin. smachin.tecnoadapta@gmail.com Ing. Silvia Da Rosa. tayzee@gmail.com
Notas del editor
- Desde hace un tiempo, el concepto accesibilidad está cayendo en desuso a la vez que cobra vida el concepto de accesibilidad universal. Como todos los cambios en el lenguaje, éste no es casual, sino que tiene que ver con un cambio en la mentalidad en relación con el diseño de espacios, productos y servicios. La accesibilidad apunta a personas con discapacidades, olvidando a personas más altas que el promedio, las mujeres embarazadas, los adultos mayores, las personas obesas y otros grupos humanos que por distintas razones muchas veces también ven coartados sus derechos porque los mismos no están adaptados a sus necesidades. El concepto de accesibilidad universal nuclea a todos esos colectivos, ya que apuesta a un diseño de los espacios, productos y servicios para todas las personas, teniendo en cuenta el concepto de diversidad funcional. Este concepto parte de la base de que todas las personas son diferentes por lo que tienen necesidades diferentes, las cuales deben ser contempladas.
- El concepto de accesibilidad web se basa en el de diseno universal.
- El concepto de accesibilidad web se basa en el de diseno universal.
- El concepto de accesibilidad web se basa en el de diseno universal.
- El concepto de accesibilidad web se basa en el de diseno universal.
- El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el World Wide Web Consortium (W3C), en especial su grupo de trabajo Web Accessibility Initiative (WAI). En 1999 el WAI publicó la versión 1.0 de sus pautas de accesibilidad Web. Con el paso del tiempo se han convertido en un referente internacionalmente aceptado. En diciembre del 2008 las WCAG 2.0 fueron aprobadas como recomendación oficial. Estas pautas se dividen en tres bloques: Pautas de Accesibilidad al Contenido en la Web (WCAG) Están dirigidas a los webmasters e indican cómo hacer que los contenidos del sitio Web sean accesibles. Pautas de Accesibilidad para Herramientas de Autor (ATAG) Están dirigidas a los desarrolladores del software que usan los webmasters, para que estos programas faciliten la creación de sitios accesibles. Pautas de Accesibilidad para Agentes de Usuario (UAAG) Están dirigidas a los desarrolladores de Agentes de usuario (navegadores y similares), para que estos programas faciliten a todos los usuarios el acceso a los sitios Web. http://es.wikipedia.org/wiki/Accesibilidad_web
- Lo más importante de una página Web son sus vínculos. Son lo que les da sentido. Si no existieran vínculos sería como compartir otro tipo de archivos, que se puede hacer mediante otro tipo de protocolos, también disponibles en Internet. Por lo tanto, es importante que los usuarios conozcan para qué sirven los vínculos en un sitio Web. El texto que utilizamos para un vínculo es esencial. Así, esos frecuentes vínculos con textos del tipo "pincha aquí" o, simplemente, "aquí" dejan de tener su utilidad si se les saca de contexto. Algunos navegadores, tanto visuales como de otro tipo, proporcionan al usuario un listad de los vínculos de la página visitada. Imaginemos que tengo un texto en el que proporciono los siguientes vínculos: Si quieres conocer mi currículum pincha aquí. Desde aquí puedes acceder a las fotos de mi familia. Mis aficiones favoritas las encontrarás aquí. Cuando el navegador muestre o lea los vínculos de este texto, el usuario se encontrará con: pincha aquí aquí aquí Este listado carece de utilidad para navegar, ya que desconocemos que hay detrás de "aquí". Ese mismo texto sería más útil con los enlaces colocados en otro lugar: Si quieres conocer mi currículum pincha aquí. Desde aquí puedes acceder a las fotos de mi familia. Mis aficiones favoritas las encontrarás aquí. Ahora el listado será mucho más significativo: mi currículum mi familia Mis aficiones La diferencia entre uno y otro texto es sólo el lugar del mismo donde hemos colocado el vínculo. La próxima vez que encuentres un vínculo con texto "aquí" mira a ver si se podría haber colocado en un mejor lugar para hacer más comprensible el texto del vínculo. Otro factor que hace más comprensibles los vínculos es "titularlos". Esto se hace mediante el atributo "title" colocado junto a la dirección del vínculo. Esta forma de proceder, colocando títulos a los vínculos, hace más comprensibles el uso y destino de los mismos para mucha gente, principalmente para gente con problemas de comprensión, y añade información para el general de los usuarios.Utilicemos la segunda frase del texto anterior para poner un ejemplo. Veamos cuál sería su código fuente sin el atributo "title": Desde aquí puedes acceder a las fotos de <a href="http://mi/familia.com">mi familia</a> No podemos decir que esto sea incorrecto, pero sí que no proporciona ayuda complementaria al usuario. Con el uso del atributo "title" podemos aumentar la información. Vemos como: Desde aquí puedes acceder a las fotos de <a href="http://mi/familia.com" title="Albúm de fotos familiar de las pasadas vacaciones">mi familia</a> Ahora tenemos más información sobre el destino del vínculo. El uso del atributo "title" se vuelve especialmente importante el los textos de nuestros menús de navegación. Solemos utilizar palabras sueltas o frases muy cortas, por lo que muchas veces no transmiten la suficiente información. Si usamos dicho atributo, a los usuarios que manejen navegadores visuales les aparecerá una "tooltip" [cuadro emergente junto al puntero]; a los usuarios de lectores de pantalla, si activan la opción, su programa les leerá el contenido del mismo; y en ciertos navegadores sólo texto, como Lynx, al pulsar una tecla o combinación de tecla les aparecerá un listad de los vínculos, acompañados del título explicativo. En determinadas ocasiones nos puede interesar que no aparezca el cuadro emergente que nos muestran los navegadores visuales (por ejemplo, cuando usamos determinadas imágenes como vínculo). Para ello podemos utilizar un título vacío (title=""), colocando como valor del atributo sólo las comillas sin espacio entre ellas. Esto hay que valorarlo seriamente, ya que ese cuadro emergente amplia información que puede ser útil a algunas personas. Los enlaces deben ser reconocidos sin problemas por lo que se recomienda: · un color diferente al del texto (el más común es el azul) · el color del enlace tiene suficiente contraste con el color del fondo · se recomienda que estén subrayados y que no se use el subrayado en otro lugar del texto. · los enlaces visitados tienen otro color (el más común es el morado), algo que es de gran ayuda cuando se busca información en un sitio y que no se respeta en muchos de ellos.
- El atributo alt se aplica a todo contenido no textual, sin este atributo, las personas que utilizan navegadores sólo texto, los que navegan con lectores de pantalla o navegadores por voz y todos aquellos que, por una u otra razón, no tienen habilita la descarga de imágenes se quedarán sin conocer el contenido y utilidad de las mismas. Es, sin dudarlo, el elemento de accesibilidad que afecta a mayor número de personas y, por lo tanto, se merece una atención relevante. La función de este atributo es trasmitir el contenido y la función de la imagen, cuando esta no puede llegar a usuario de forma visual. Responde por tanto a dos preguntas: "ｿQué es? y ｿPara qué sirve? ". Supongamos que queremos insertar una foto del autor que sirva de enlace a una página con un resumen curricular de su trayectoria profesional. Si nos limitamos a colocar en el sitio elegido la referencia al archivo de imagen y le colocamos un enlace obtendremos algo así: <a href="http://autor.htm"> <img src=http://../imagenes/foto.jpg /> </a> Recordemos qué y para qué está la imagen: es la foto del autor y sirve para llevarnos a otra página donde podemos conocer más sobre él. Eso es lo que debemos transmitir en el atributo "alt" y lo tenemos que hacer de la manera más breve y clara que podamos. ﾉsta sería una buena forma de hacerlo: <a href="http://autor.htm"> <img src="http://../imagenes/foto.jpg" alt="Foto del autor que enlaza con un resumen de su currículum" title="Conoce al autor de esta bitácora" /> </a> Hemos añadido dos cosas: · Lo más importante ahora, hemos colocado el atributo "alt" en la etiqueta <img> informando a los que no vean la imagen de qué es y para qué sirve. · También hemos colocado el atributo "title" para proporcionar información adicional de forma visual. Al colocar el texto alternativo para las imágenes debemos tener en cuenta algunas cosas: · No podemos utilizar marcadores de código en el texto alternativo, sólo texto plano y caracteres especiales. Por ejemplo, no podemos intentar dar énfasis a parte del texto alternativo del siguiente modo: alt="Foto del autor que <em>enlaza</em> con el resumen de su currículum". Las etiquetas dentro del atributo se leerán como texto plano. · No debemos poner como texto alternativo el nombre del archivo de imagen. Por ejemplo, alt="foto.jpg". · Algunas herramientas de edición de páginas Web colocan un texto alternativo por defecto a las imágenes para que este sea sustituido por uno correcto. Por ejemplo, no dejes un texto alternativo del tipo alt="Texto alternativo". · No utilices como texto alternativo, cuando la imagen sirva como enlace, un texto que ya desaconsejamos para los vínculos. Por ejemplo, no ponga nunca alt="｡Pinche aquí!". · No nos pasemos de listos y hagamos algo tan sin sentido como este ejemplo que vi en una página Web: alt="Activar las imágenes". Esto es algo así como si una persona ciega nos preguntara la hora y mostrándoles nuestro reloj le dijéramos: "｡Mírala tú!". En esta sección se ofrecen 10 consejos rápidos para el diseño de páginas web accesibles. Para ello nos basamos en la traducción del documento publicado por la WAI: Guía rápida para realizar sitios web accesibles [4] que hemos completado con algunos comentarios y explicaciones. Imágenes y animaciones: Usar texto alternativo (atributo ALT) para describir la función de los elementos visuales. Esta es la recomendación más importante para el acceso a las páginas web de los usuarios con deficiencias visuales, pero también de aquellos usuarios con conexiones lentas y para los que esperar a la carga completa de las imágenes supone a veces una inversión de tiempo innecesaria. Mapas de imagen: Usar mapas de cliente y texto alternativo para las zonas activas. Los mapas de imágenes proporcionan a menudo la función de menú de opciones en la página inicial del sitio web. Si bloqueamos el acceso a aquellas personas que no pueden ver las imágenes estaremos impidiendo la navegación por nuestro sitio web de todos estos usuarios. Multimedia: Facilitar subtítulos y transcripción de los ficheros de sonido, descripción de los videos y versiones accesibles en el caso de usar formatos no accesibles. Los formatos PDF, RTF y otros formatos propietarios no se muestran de manera estándar en los navegadores, lo que se traduce frecuentemente en dificultades o imposibilidad de acceso para algunos usuarios con discapacidad o que usan navegadores adaptados. Gráficos de datos: Resumir o usar el atributo LONGDESC. Actualmente los gráficos de datos se muestran como imágenes en la web. Por tanto debemos explicar su contenido textualmente para hacerlo accesible a aquellos usuarios que no son capaces de ver o cuyos equipos no pueden mostrar imágenes.
- El atributo alt se aplica a todo contenido no textual, sin este atributo, las personas que utilizan navegadores sólo texto, los que navegan con lectores de pantalla o navegadores por voz y todos aquellos que, por una u otra razón, no tienen habilita la descarga de imágenes se quedarán sin conocer el contenido y utilidad de las mismas. Es, sin dudarlo, el elemento de accesibilidad que afecta a mayor número de personas y, por lo tanto, se merece una atención relevante. La función de este atributo es trasmitir el contenido y la función de la imagen, cuando esta no puede llegar a usuario de forma visual. Responde por tanto a dos preguntas: "ｿQué es? y ｿPara qué sirve? ". Supongamos que queremos insertar una foto del autor que sirva de enlace a una página con un resumen curricular de su trayectoria profesional. Si nos limitamos a colocar en el sitio elegido la referencia al archivo de imagen y le colocamos un enlace obtendremos algo así: <a href="http://autor.htm"> <img src=http://../imagenes/foto.jpg /> </a> Recordemos qué y para qué está la imagen: es la foto del autor y sirve para llevarnos a otra página donde podemos conocer más sobre él. Eso es lo que debemos transmitir en el atributo "alt" y lo tenemos que hacer de la manera más breve y clara que podamos. ﾉsta sería una buena forma de hacerlo: <a href="http://autor.htm"> <img src="http://../imagenes/foto.jpg" alt="Foto del autor que enlaza con un resumen de su currículum" title="Conoce al autor de esta bitácora" /> </a> Hemos añadido dos cosas: · Lo más importante ahora, hemos colocado el atributo "alt" en la etiqueta <img> informando a los que no vean la imagen de qué es y para qué sirve. · También hemos colocado el atributo "title" para proporcionar información adicional de forma visual. Al colocar el texto alternativo para las imágenes debemos tener en cuenta algunas cosas: · No podemos utilizar marcadores de código en el texto alternativo, sólo texto plano y caracteres especiales. Por ejemplo, no podemos intentar dar énfasis a parte del texto alternativo del siguiente modo: alt="Foto del autor que <em>enlaza</em> con el resumen de su currículum". Las etiquetas dentro del atributo se leerán como texto plano. · No debemos poner como texto alternativo el nombre del archivo de imagen. Por ejemplo, alt="foto.jpg". · Algunas herramientas de edición de páginas Web colocan un texto alternativo por defecto a las imágenes para que este sea sustituido por uno correcto. Por ejemplo, no dejes un texto alternativo del tipo alt="Texto alternativo". · No utilices como texto alternativo, cuando la imagen sirva como enlace, un texto que ya desaconsejamos para los vínculos. Por ejemplo, no ponga nunca alt="｡Pinche aquí!". · No nos pasemos de listos y hagamos algo tan sin sentido como este ejemplo que vi en una página Web: alt="Activar las imágenes". Esto es algo así como si una persona ciega nos preguntara la hora y mostrándoles nuestro reloj le dijéramos: "｡Mírala tú!". En esta sección se ofrecen 10 consejos rápidos para el diseño de páginas web accesibles. Para ello nos basamos en la traducción del documento publicado por la WAI: Guía rápida para realizar sitios web accesibles [4] que hemos completado con algunos comentarios y explicaciones. Imágenes y animaciones: Usar texto alternativo (atributo ALT) para describir la función de los elementos visuales. Esta es la recomendación más importante para el acceso a las páginas web de los usuarios con deficiencias visuales, pero también de aquellos usuarios con conexiones lentas y para los que esperar a la carga completa de las imágenes supone a veces una inversión de tiempo innecesaria. Mapas de imagen: Usar mapas de cliente y texto alternativo para las zonas activas. Los mapas de imágenes proporcionan a menudo la función de menú de opciones en la página inicial del sitio web. Si bloqueamos el acceso a aquellas personas que no pueden ver las imágenes estaremos impidiendo la navegación por nuestro sitio web de todos estos usuarios. Multimedia: Facilitar subtítulos y transcripción de los ficheros de sonido, descripción de los videos y versiones accesibles en el caso de usar formatos no accesibles. Los formatos PDF, RTF y otros formatos propietarios no se muestran de manera estándar en los navegadores, lo que se traduce frecuentemente en dificultades o imposibilidad de acceso para algunos usuarios con discapacidad o que usan navegadores adaptados. Gráficos de datos: Resumir o usar el atributo LONGDESC. Actualmente los gráficos de datos se muestran como imágenes en la web. Por tanto debemos explicar su contenido textualmente para hacerlo accesible a aquellos usuarios que no son capaces de ver o cuyos equipos no pueden mostrar imágenes.
- Algunas recomendaciones basicas para mejorar la accesibilidad de los sitios: Uso de estandares. Garantiza interoperabilidad y compatibilidad hacia adelante
- Video “Publicidad de EDF”: [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. En otra calle un hombre intenta usar una cabina telefónica, pero todas están sólo a la altura de los utilizadores de sillas de ruedas, por lo que tiene que ponerse en una posición muy incómoda. Se ve el semáforo de peatones, que en vez de presentar el icono de un hombre andando, muestra el de una persona en silla de ruedas. Un chico entra en una biblioteca y se cruza con una chica ciega. Toma un libro, pero está en braille, por lo que él no puede leer nada. Así que se sienta en el quicio de una ventana desconcertado. [fin]