Ayuda a la navegación con Jaws

AYUDA A JAWS: Esta página tiene un diseño sencillo en el que se distribuyen las entradas o post en la mitad izquierda de la pantalla, y los gadgets en la mitad derecha sobre la vertical.

Para acceder a cada título de entrada, muévete por los encabezados con la tecla H.

Para acceder a los gadgets usa la tecla E buscando los cuadros de diálogo. El primer gadget es un buscador de google.

Si tienes problemas, haznos comentarios o envia un email.

CONSEJOS DE ACCESIBILIDAD PARA BLOGGER

Hola a todos!
Vamos a dedicar esta página a establecer unos principios básicos a tener en cuenta si queréis que vuestro blog realizado con Blogger sea un blog accesible para personas ciegas o con graves problemas visuales.

La idea es transmitir una serie de elementos básicos que todos podemos cambiar o tener presente en el diseño de nuestros blogs educativos, sin que esto suponga conocimientos específicos sobre programación en HTML. Por tanto, se trata de una serie de consejos para principiantes o usuarios no expertos de blogger.

REGLA NÚMERO UNO.-
"Utiliza la plantilla sencilla que nos ofrece blogger para el diseño de tu blog".

En esta imagen se nos indica que debemos seleccionar el modelo de plantilla sencilla de blogger para que Jaws navegue sin problemas.
Usando estas plantillas básicas el revisor de pantalla JAWS puede navegar sin problemas, leyendo todas las partes de tu blog y puede buscar los diferentes enlaces, entradas y gadgets que seleccionemos.
Las plantillas dinámicas y otras que nos ofrece la interfaz pueden causar problemas a este revisor y que la persona ciega encuentre más dificultades a la hora de desplazarse por ellas.

REGLA NÚMERO DOS.-
"Elige la distribución de tus entradas y gadgets de forma ordenada y fácil para la navegación por parte de las personas ciegas".

A la hora de diseñar tu blog, puedes elegir el lugar que ocuparán tus gadgets y tus entradas. Blogger te ofrece varias alternativas, sin enmbargo el revisor de pantalla JAWS siempre lee los títulos de entradas de izquierda a derecha. Esto quiere decir, que si en tu diseño has elegido poner los gadgets a la izquierda, el lector ciego tendrá que pasar por todos ellos antes de llegar a la primera entrada o post.
Por ello, siempre podemos hacer esto más fácil a estas personas si elegimos la columna de la izquierda como la predeterminada para entradas, y la de la derecha como la predeterminada para gadgets.

Esta imagen nos muestra el diseño de un blog con las entradas a la izquierda y los gadgets a la derecha

Es fundamental para el revisor de pantalla que cada entrada tenga un título. El lector JAWS va saltando de título en título para poder elegir la entrada deseada. Por ello, las entradas deben estar etiquetadas con su correspondiente título.

REGLA NÚMERO TRES.-
"Crear una entrada fija al principio del blog explicando la distribución aproximada del mismo".

Cuando los videntes accedemos a la página principal de un blog, lo primero que hacemos es una evaluación visual global de la misma para crearnos un "mapa mental" por donde navegar. En función de este mapa mental vamos eligiendo aquellas partes que nos parecen más importantes o nos ofrecen una información más relevante y decidimos llevar el ratón hasta allí sin necesidad de ir viendo cada uno de los elementos que aparecen en el blog.

Las personas invidentes o con graves limitaciones visuales no tienen esta imagen global de la pantalla y deben ir investigando y descubriendo cómo está distribuida la página y los elementos que contiene. Esto lo hacen paso a paso, por síntesis, lo cual conlleva cierto tiempo hasta encontrar aquellos elementos interesantes.

Para facilitarles esta tarea, una de las propuestas que os emplazamos a realizar en vuestro blog consiste en ofrecerles una ayuda rápida e inicial en la que le demos al ciego una información escrita sobre la distribución del blog. Esta información debe ser la más concisa y eficaz posible, ya que si la sobrecargamos podemos confundir a los usuarios ciegos.

Nuestra propuesta consiste en crear un gadget, simulando una entrada o post de inicio, en la horizontal del blog, que permanezca de forma fija en el mismo sin atender al carácter temporal inverso de las bitácoras. De esta forma nos aseguramos de que siempre aparezca el texto informativo cuando se accede al blog en cualquier momento.


Para hacer esto os proponemos esta sencilla forma:
Blogger por defecto solo permite añadir algunos elementos de página que aparecen en ciertas secciones de la estructura principal del Blog, es decir, cuando accedemos a la sección de Plantilla> Elemtentos de Página nos encontramos con algo como ésto:

La imagen muestra la estructura de entradas y gadgets de una plantilla básica de blogger, la cual no nos permite incorporar gadgets fijos encima de las entradas
Lo que haremos, según nos explica la página web TECNOLOGÍA DIARIA, será desbloquear algunas opciones ocultas que nos permitirán añadir más elementos en distintas nuevas zonas de la estructura. Para ello iremos a Plantilla> Edición de HTML (antes que nada, descargémonos la plantilla original como copia de seguridad), alli clic en la opción “Expandir plantillas de artilugios” y luego (usando CTRL+F) buscaremos todos los textos donde haya esto:

showaddelement=’no’

y lo cambiamos por esto otro:

showaddelement=’yes’

El resultado será que blogger nos permitirá incluir gadgets bajo la cabecera de entrada del blog o bien un gadget fijo como si fuese una nueva entrada. Nos mostraría algo como esto:

La imagen muestra la plantilla de blogger modificada de forma que podemos incluir gadgets al comienzo del blog, bajo la cabecera.

El siguiente paso será incluir un gadget de texto donde explicar de forma breve y concisa la estructura del blog.

REGLA NÚMERO CUATRO.-
"Utilización de imágenes con texto alternativo".

Las imágenes aportan una información crucial en cualquier entrada de nuestro blog. Aquello de una imagen vale más que mil palabras es cierto, pero en un blog que pretenda ser accesible no debe sustituirse la imagen por la palabra, sino complementarse.
Blogger pone a nuestra disposición un sistema de "etiquetado" de imágenes de forma que las mismas puedan "hablar" a las personas ciegas y describirles lo que muestran.

Para ello seguimos un sencillo consejo. Cuando insertamos una imagen en alguna entrada de nuestro blog veremos algo similar a esto:

La imagen muestra la herramienta "propiedades" de la imagen insertada en una entrada de blogger. Esta herramienta permite poner texto alternativo a la imagen.

Cuando seleccionamos la imagen, blogger nos ofrece una serie  de herramientas para su diseño. Además de alinearla, cambiarle el tamaño o añadir leyenda, existe otra herramienta que se muestra como "propiedades". Al pincharla encontraéis esto:


El texto del título ayuda a catalogar a google las imágenes y además ofrece una información rápida a la persona ciega.
En el lugar del texto del alt es donde podemos incluir una descripción de la imagen para que JAWS pueda leerla a la persona ciega y le aclare de qué trata la misma. Debes hacer una descripción breve y concisa ya que blogger te ofrece hasta algo más de 250 carácteres.

REGLA NÚMERO CINCO.-
"Ofrece la posibilidad de ampliar o disminuir el tamaño de las letras de tu blog".

Las personas con baja visión, a menudo tienen problemas para acceder a la información porque ésta aparece con un tamaño de fuente muy pequeño.
Algunos blogeros prefieren que el tamaño de la fuente sea más pequeño porque estéticamente resulta más atractivo el blog y además se puede ofrecer mayor información en menos espacio.
Blogger, en sus diseños, ofrece la posibilidad de ampliar/disminuir la pantalla para paliar este problema con una sencilla combinación de teclas:

CTRL + para aumentar o CTRL - para disminuir.

La imagen ofrece una imagen ampliada de blogger donde se aprecia como deja fuera de la pantalla parte del blog
También podemos hacerlo presionando la tecla CTRL y gir
ando la ruedecilla del ratón hacia adelante, para aumentar, o hacia atrás, para disminuir.
El efecto conseguido sería el que ofrece la imagen.
Sin embargo, el aumento conseguido deja parte de la imagen total del blog fuera del monitor, por lo que el alumno con déficit visual tendría que utilizar las barras de desplazamiento lateral para acceder al resto de la imagen visual del blog.

Esto puede suponer un inconveniente para estas personas porque les obliga constantemente a moverse por el blog mediante las barras laterales para poder tener una imagen mental de la estructura del blog.

Este problema puede solucionarse si incluimos un gadget que proporcione la opción de aumentar o disminuir el tamaño de las letras de blogger sin variar la estructura básica de su diseño.
Existen numerosas páginas que ofrecen diferentes trucos para modificar la plantilla básica de blogger y ofrecer un gadget de aumento/disminución de letras.

Nosotros os vamos a proporcionar una de ellas: BLOGTECNIA nos explica cómo hacerlo de una forma fácil y sencilla.

Primero accede a la edición en HTML.


En edición HTML, debes buscar
</body>

Lo puedes hacer pulsando las teclas CTRL + F.

La imagen ofrece el texto a buscar escribiéndolo con el buscador que se activa con CTRL + F

Justo antes colocas este script:

<script type='text/javascript'>

//<![CDATA[
var tgs = new Array( 'div','td','tr');
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
//]]>
</script>

Guardas la plantilla y cierras.
El último paso consiste en incluir un gadget de Edición HTML/Java
Y colocas lo que sigue en el gadget, elemento html, donde quieras que aparezca en la plantilla:

<p><center><a href="javascript:ts('body',2)"><b>Aumentar letras</b></a> <b>|</b> <a href="javascript:ts('body',-1)"><b>Disminuir letras-</b></a></center></p>
Y si quieres insertar una imagen:

<a href="javascript:ts('body',2)"><img src="URL DE LA IMAGEN 2"/></a><a href="javascript:ts('body',-1)"><img src="URL DE LA IMAGEN 1"/></a>


 Con esto conseguimos que la fuente se aumente sin variar el diseño del blog. Algo como esto:

La imagen muestra la pantalla de un blog con su diseño completo y los tipos de letras ampliados

REGLA NÚMERO SEIS.-
"Ofrece la posibilidad de ampliar o disminuir las imágenes de tus entradas".

En ocasiones nos surge la duda, al diseñar una entrada, de si poner la imagen en formato pequeño o grande.
Para que la puedan ver todos de una forma aceptable, lo recomendable es elegir la  opción de tamaño extra-grande que te ofrece blogger.
La imagen nos dice exactamente dónde se encuentra el botón de extra grande para imágenes en la plantilla de edición de un post

Y el resultado final sería algo similar a esto:

En la presentación del blog la imagen se vería ampliada.

Aunque la plantilla de blogger por defecto trae un visor de imágenes donde poder verlas ampliadas al hacer click sobre ellas, este visor nos extrae la imagen fuera del contexto del blog, por lo que no existe una conexión directa con el texto, diseño e intención del editor al colgar la foto.

Se muestra un visor de con la imagen ampliada al hacer click y un fondo negro

Existe otra posibilidad que deje conforme a todos. En CiudadBlogger nos plantean la posibilidad de aumentar el tamaño de la imagen a su estado natural con sólo pasar el puntero del mouse por delante de la imagen. Algo parecido a esto:
Se ve una pequeña imagen de JClic que aumenta al detener el mouse sobre ella.

Es cierto que este proceso es algo más complejo que lo que hemos explicado antes, pero seguro que no tendrás problemas para hacerlo en tu blog.

Lo primero que debes hacer es entrar en el formato de edición en HTML en el diseño de plantillas de blogger, como explicábamos en la regla número cinco. Sería muy prudente que hicieses una copia de seguridad de tu plantilla, por si las moscas.

Usando las teclas CTRL + F, busca en la plantilla lo siguiente:
</head>
Justo antes debes poner el siguiente script:
<script type='text/javascript'>
//<![CDATA[

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

<style>
img.expando{
margin:10px;
vertical-align: top;
}
</style>
Y luego, cuando quieras incluir una imagen en tus entradas utiliza este código HTML:

<img border="0" src="URL de la imagen" class="expando" width="100" />

Donde pone URL de la imagen deberás poner la dirección de donde descargarás la imagen que quieres ampliar.
El valor width="100" nos indica el tamaño que tendrá la imagen en el blog cuando no pase el ratón por ella. Este tamaño lo puedes modificar a tu gusto.
La imagen será ampliada al tamaño orginal de la misma, por lo que si quieres que se vea bien grande, tendrás que modificar su tamaño ampliándolo en un programa editor de fotos o en el propio Paint de Windows.


REGLA NÚMERO SIETE.-
"Evita los famosos 'leer más...' y/o 'pincha en este enlace...' y ofrece una información más concreta".

Uno de los aspectos que más enriquecen a un blog o a cualquier página web, más si cabe en el ámbito educativo, es el relacionado con los enlaces o links a otras páginas web. Esto hace que el blog disponga de un amplio abanico de recursos y que la información ofrecida por otros portales educativos, edublogs, etc. pueda ser conocida y compartida. De hecho es lo que da sentido a los blogs educativos.

La mayoría de estos enlaces se proporcionan estableciendo un nombre o etiqueta para el enlace.

La imagen muestra cómo en el cuadro puedes poner un nombre al enlace que será el visible.

En multitud de blogs o páginas web, se ha extendido la idea de rellenar este texto para mostrar el enlace escribiendo términos del tipo: "enlace", "pincha aquí" o "leer más...".
Cuando la persona ciega está leyendo con JAWS la entrada o gadget dentro de un contexto determinado y claro como puede ser la información proporcionada en un post, no hay problemas para que esto sea entendido. El usuario de JAWS sabe que ese enlace le dará información más extensa sobre lo que está leyendo.
Sin embargo, el Programa JAWS proporciona a las personas ciegas una opción que les permite buscar, a través de un cuadro de diálogo, todos los links o enlaces que hay en la página. Esto lo suelen usar, fundamentalmente, cuando quieren acceder de forma rápida a esos enlaces, igual que hacen los videntes buscando el típico texto azul subrayado que indica que tenemos un enlace.
Cuando el JAWS abre ese cuadro de diálogo de enlaces de la página, lo que lee es el texto para mostrar, y no la dirección web enlazada. Por tanto, cuando pasa por textos como "leer más...", "pincha aquí" o similares, el usuario de este programa no tiene ningún tipo de información sobre a dónde le llevará este enlace.
Este problema es muy fácil de solucionar, qiuzás el más fácil de los visto hasta ahora, si en el texto para mostrar elegimos un texto con una información clara de a dónde nos va a llevar esa página. Y listo.

En esta misma línea, existen muchos vínculos publicitarios, a facebook, twiter, etc., que se repiten en cada entrada, por lo que la persona ciega, leerá cada enlace a cada uno de ellos, tantas veces como entradas tengamos publicadas.
Esta opción evidentemente dependerá del usuario de blogger, pero mientras menos enlaces con poca utilidad tengamos en nuestro blog, más rapidez y ayuda daremos a las personas ciegas.




Seguimos trabajando en nuestro decálogo.
En breve continuaremos la serie de consejos para la accesibilidad en blogger.
¡Ya puedes hacer tus comentarios!

18 comentarios :

  1. exelente estava presisamente buscando info de como crear un blog accesible, y como soy nuevo en esto me paresió jenial este blog, me saca de algunas dudas pero tengo otras. quisiera saver si tienes mas info sobre este tema?

    ResponderEliminar
  2. Hola, Diego!
    Haz las preguntas que tengas y te las intentaremos resolver. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, me ha encantado esta entrada. Estoy intentando hacer accesible mi blog de blogger tal como explicas en esta entrada. ¿Sigue estando todo lo que cuentas actual?
      ¿Puedo utilizar vuestro mensaje de inicio en mi propio blog, el que hace referencia a ser accesible mediante programa jaws?
      Un saludo

      Eliminar
    2. Hola Lola!
      El blog está inactivo desde hace ya varios meses por motivos burocráticos. Algunas de las indicaciones puede que no funcionen en la nueva interfaz de blogger. Tendrás que probarlo y si no buscar información en redes. Muchas gracias y por supuesto que puedes poner lo que necesites de este blog. Para eso se creó.

      Eliminar
  3. Muchas gracias!!! realmente ha sido de suma importancia la información que han proporcionado!! Tengo un blog para personas con discapacidad, familias e instituciones con la idea de generar vínculos y que sea más fácil comunicarse...y algunos puntos en la accesibilidad del sitio estaban flojos!
    Ahora le pude hacer los cambios pertinentes gracias a su ayuda!! Les dejo el blog por si quieren conocerlo y de paso, si ven que puede faltarle algo me ddicen, siempre serán bienvenidos consejos!!
    www.porigual.com.ar
    Los mejores deseos!

    ResponderEliminar
    Respuestas
    1. Hola, Ana!
      Muchas gracias por tus palabras de ánimo. Nos alienta a seguir adelante.
      He visitado vuestro blog y lo he incluído en mi lista de blogs. Fantástico trabajo el vuestro.
      Si descubres algún otro consejo sobre accesibilidad para blogger, no olvides comunicárnoslo.
      Un saludo

      Eliminar
    2. Muchas gracias!!! Espero puedas crear el usuario en www.porigualmas.org y compartir allí! Hemos creado una RED SOCIAL ACCESIBLE :)!!!

      Eliminar
  4. Hola muy buena la explicación pero una pregunta como puedo disminuir el titulo de mi plantilla en mi blogguer desde ya gracias.

    ResponderEliminar
    Respuestas
    1. Hola Rubén!
      Perdona pero no he entendido muy bien qué es exactamente lo que quieres hacer.
      ¿Podrías explicármelo mejor?
      Siento la torpeza.

      Eliminar
  5. Muy interesantes las reglas, me han ayudado mucho. Un saludo

    ResponderEliminar
  6. Buenas tardes, quisiera saber que es JAWS, estoy planificando un entorno virtual para personas no videntes, quisiera saber si estos blogs soportan html5, quisiera colocar audio en cada boton de menú, muchas gracias

    ResponderEliminar
  7. Hola Ana!
    El Jaws es un revisor de pantalla que lee con una voz sintética el texto que se presenta en la pantalla del ordenador. Te dejo este enlace por si quieres saber más: http://www.compartolid.es/instalacion-jaws/ Si el blog que pretendes hacer usa siempre texto real, no animaciones, fotografías o flash, el Jaws puede leer al ciego todo aquello que publiques sin necesidad de que le tengas que poner audio a cada botón. El audio es un recurso útil para personas con baja visión que no usen el Jaws, pero para los usuarios de esta herramienta puede resultar hasta "molesto" ya que podría cruzarse en algún momento con lo que lea el programa.
    No obstante, si incorporas audio sería bueno que el enlace al audio tuviese una buena descripción que anticipe a la persona ciega que va a oír un texto concreto.
    En principio sí que html5 soporta audios y también soporta el Jaws.
    Gracias por tu interés.

    ResponderEliminar
  8. Hola!!!!!! Definitivamente la información que comparten es de mucha ayuda. estoy realizando un trabajo de investigación relacionado con este tema y requiero diseñar un entorno virtual accesible y esta información ha sido de mucha ayuda... Gracias..!!
    Por el comentario anterior entiendo que para la publicación de audiolibros es recomendable a traves de la inserción de un enlace.Me podrian recomendar una pagina para publicar los audios que sea accesible?

    ResponderEliminar
  9. Hola chicos. Enhorabuena por vuestro blog, quería daros las gracias por vuestro compromiso con las personas con deficiencia visual y vuestros más que interesantes consejos. Trabajo en el colectivo de la discapacidad y me parece muy importante la integración de estas personas en las nuevas tecnologías. Muchas gracias por vuestra aportación, os seguiré con mucho interés a partir de ahora. Un saludo!

    ResponderEliminar
  10. Buenas tardes. Enhorabuena por el blog y gracias por darnos esos consejos tan buenos!
    Me ha surgido un problema... He estado describiendo las imágenes en la tabla de propiedades, tal y como comentáis, y acabo de darme cuenta, pasado bastante tiempo, que se me borran las descripciones... Sabéis por que podrían ser y como puedo solucionarlo? Muchisimas gracias

    ResponderEliminar
  11. Hola! Gracias por tus palabras.
    No sé a qué puede deberse. Cuando escribes las propiedades de la tabla no suelen borrarse. Puede ser que esperes que se vea la leyenda pero ésta está oculta. La descripción sólo es para el sintetizador de voz. El título se activa al pasar el ratón por encima y éste si es visible. No sé si te puede servir de ayuda.

    ResponderEliminar
  12. Lo tendré en cuenta ya que me gustaría empezar a hacer cosas con alguna web pero no tengo nada de conocimientos sobre como hacerlo, verlo así me parece fácil y simple. Gracias por compartir

    ResponderEliminar
  13. Excelente post y con mucha información que me es muy útil para mejorar más la web, a ver si poco a poco aprendo de los mejores, gracias por la ayuda

    ResponderEliminar