2/09/10
Accesibilidad Web al Contenido
Sandra Machin. smachin.tecnoadapta@gmail.com
Ing. Silvia Da Rosa. tayzee@gmail.com
...
2/09/10
Limitaciones asociadas a la discapacidad
 Visuales
 Ceguera, baja visión, problemas para
distinguir colores
 Au...
2/09/10
Limitaciones asociadas con la edad avanzada
Visuales
Auditivas
Motrices
Cognitivas
2/09/10
Limitaciones tecnológicas
 Muy antigua
 Muy nueva
 Ancho de banda
 Limitaciones de administración
 Plugin
 D...
2/09/10
Accesibilidad en la Web
La posibilidad que recursos
web (información y servicios)
puedan ser utilizados
de forma s...
2/09/10
Componentes de la accesibilidad
Autores
Accesibilidad del
Navegador
Accesibilidad de
la Computadora
Accesibilidad ...
2/09/10
¿Cómo lograr una Web Accesible?
Pautas WCAG
2/09/10
Accesibilidad del contenido web
 Que puedo hacer si “solo” ingreso el contenido y no soy
informático?

Textos

...
2/09/10
Ingreso de Texto
• Evitar copiar y pegar contenidos directo de un editor
de textos (word).
– Copiar del editor (wo...
2/09/10
Calidad del Texto
• Verificar
– Ortografía
– Gramática
– Abreviaturas y acrónimos
– Palabras extranjeras
• Párrafo...
2/09/10
Empleo del color
Revisar
en cada
nota!
No usar color como único medio de transmitir información.
Cual es un enlace?
2/09/10
Contraste
Contraste suficiente para colores de texto y fondo.
2/09/10
Empleo del color y contrastes en el blog
2/09/10
Verificar contrastes
 Colour Contrast Analyser (version en Espanol)
 http://www.visionaustralia.org.au/
2/09/10
Enlaces
 Usar texto que tenga sentido cuando se lea fuera de contexto.
“Si quieres conocer mi currículum click aq...
2/09/10
Imagenes
Revisar
en cada
nota!
Alternativas textuales para todo contenido no textual.
 Óptimo:
– Atributo “alt” (...
2/09/10
Imagenes
Revisar
en cada
nota!
Alternativas textuales para todo contenido no textual.
Si la herramienta no permite...
2/09/10
Uso de estándares
 Si subo archivos que sean .PDF
2/09/10
Mejora contínua
Tests de
accesibilidad
www.tawdis.net
Retroalimentación
de usuarios
Correo de
contacto
2/09/10
Gracias!
Sandra Machin. smachin.tecnoadapta@gmail.com
Ing. Silvia Da Rosa. tayzee@gmail.com
Próxima SlideShare
Cargando en…5
×

Accesibilidad Web en Blogs

496 visualizaciones

Publicado el

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/

Publicado en: Diseño, Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
496
En SlideShare
0
De insertados
0
Número de insertados
8
Acciones
Compartido
0
Descargas
5
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.
  • 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]
  • Accesibilidad Web en Blogs

    1. 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. 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. 3. 2/09/10 Limitaciones asociadas con la edad avanzada Visuales Auditivas Motrices Cognitivas
    4. 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. 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. 6. 2/09/10 Componentes de la accesibilidad Autores Accesibilidad del Navegador Accesibilidad de la Computadora Accesibilidad del Contenido NVDA Usuarios
    7. 7. 2/09/10 ¿Cómo lograr una Web Accesible? Pautas WCAG
    8. 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. 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. 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. 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. 12. 2/09/10 Contraste Contraste suficiente para colores de texto y fondo.
    13. 13. 2/09/10 Empleo del color y contrastes en el blog
    14. 14. 2/09/10 Verificar contrastes  Colour Contrast Analyser (version en Espanol)  http://www.visionaustralia.org.au/
    15. 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. 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. 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. 18. 2/09/10 Uso de estándares  Si subo archivos que sean .PDF
    19. 19. 2/09/10 Mejora contínua Tests de accesibilidad www.tawdis.net Retroalimentación de usuarios Correo de contacto
    20. 20. 2/09/10 Gracias! Sandra Machin. smachin.tecnoadapta@gmail.com Ing. Silvia Da Rosa. tayzee@gmail.com

    ×