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/
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.
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
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!
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!
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]