Blog de DeInterfaz

Navegando una página Web con Jaws: consideraciones de accesibilidad para desarrolladores

Autor: Marco Giacomuzzi

Interpretación personal: fondo negro (lo que ve un ciego) con un muñeco que representa JAWS

Una de las ayudas técnicas que se utiliza con más frecuencia y más conocida por los invidentes es Jaws, un lector de pantalla que les permite beneficiarse de la total gestión del ordenador y sus aplicaciones.

La función del ratón se sustituye por una serie de combinaciones de teclas que permite llevar a cabo todo tipo de operaciones. Entre ellas navegar por una página Web, siempre y cuando ésta esté marcada de forma correcta, es decir, adoptando los Estándares de la Web y por supuesto considerando los requisitos de accesibilidad de la norma UNE 139803:2004.

Vamos a ver de qué manera un usuario que utiliza Jaws navega entre los diferentes elementos de una página Web y como un desarrollador de páginas Web debería actuar para alcanzar el nivel de accesibilidad Doble A (AA).

Navegar entre enlaces

El usuario de Jaws

Aunque en pantalla los enlaces están mezclados con otros textos, Jaws los coloca todos en una sola línea. Para saltar de uno a otro se utiliza, bien la tecla TAB,  o bien la tecla U para moverse entre los no visitados y la tecla V para moverse entre los visitados.

Pero también hay otra forma de leer los enlaces incluidos en una página: a través de la combinación de teclas Insert+F7 Jaws abre una ventana emergente con un listado de todos los enlaces. Con las teclas flecha arriba y abajo podemos movernos por la lista.

El desarrollador

Lo que el desarrollador debe proporcionar son enlaces cuyo texto identifique claramente su destino, siendo lo más conciso y explícito posible, de manera que sea comprensible cuando es leído fuera de contexto.

Recordar que el atributo TITLE sólo debe asignarse para ofrecer información adicional sobre el objetivo del enlace.

Referencias:

  • Requisito 4.5.1 de la norma UNE
  • Punto de verificación 13.1 de las WCAG 1.0.

Navegar entre encabezados

El usuario de Jaws

Los encabezados se utilizan para crear una estructura lógica del documento, especificando el comienzo de secciones y subsecciones de la página. Jaws reconoce los encabezados desde el nivel 1 hasta el 6 y permite saltar al encabezado siguiente con la tecla H.

De la misma manera que en los enlaces, Jaws permite abrir (teclas: Insert+F6) una ventana emergente con un listado de todos los encabezados, pudiendo navegar entre ellos con las teclas flecha arriba y abajo.

El desarrollador

Dentro de una página hay que definir cuales son los encabezados y cómo están estructurados, para luego asignar el nivel adecuado, de 1 a 6. El título principal de la página debería siempre ser de nivel 1 y por tanto, marcado como H1.

Normalmente cuando imparto cursos, siempre pongo el ejemplo de un libro. Podemos considerar una página Web como un capítulo entero, por tanto, el título del capítulo sería el encabezado de página (nivel 1) que a su vez contiene otros encabezados de secciones y subsecciones (nivel 2, 3, etc.) de página.

Referencias:

  • Requisito 4.3.5 de la norma UNE
  • Punto de verificación 3.5 de las WCAG 1.0.

Navegar entre formularios

El usuario de Jaws

A través la combinación de las teclas CTRL+Insert+Home, Jaws se posiciona en el primer control de formulario, para luego pasar al siguiente con la tecla F.

Como en los casos anteriores, existe la posibilidad de obtener una lista de todos los formularios contenidos en la página (tecla Insert+F5).

También existen comandos rápidos para llegar directamente a determinados tipos de controles: campo de texto, radio, checkbox, etc.

El desarrollador

En los formularios es muy importante tener agrupados sus elementos para mejorar la legibilidad y facilitar su rellenado (uso de los marcadores FIELDEST y LEGEND), sobre todo en caso de tener muchos controles. También es imprescindible mantener un orden lógico de tabulación para facilitar la navegación a aquellos usuarios que utilizan ayudas técnicas o simplemente un teclado para saltar de un campo a otro. Por último, asociar siempre una etiqueta por cada control.

No es aconsejable el uso del atributo TABINDEX ya que puede generar cierta confusión, sobre todo cuando se hace un “copia y pega” de otro formulario que por su semejanza queremos reaprovechar. Muchas veces se arrastra dicho atributo sin prestar atención a su valor. Creando un orden lógico de tabulación no es necesario usar TABINDEX.

Referencias:

  • Requisitos 4.3.6, 4.4.7, 4.4.8 y 4.5.9 de la norma UNE
  • Punto de verificación 9.4, 10.2, 12.3 y 12.4 de las WCAG 1.0.

Navegar entre tablas

El usuario de Jaws

Viendo como un usuario utiliza Jaws, aprendo que éste último no facilita información acerca de los encabezados o la estructura de las tablas, a menos que se utilicen comandos específicos.

Jaws lee una tabla de izquierda a derecha considerando cada celda como si estuviera en una nueva línea. Permite desplazarse a una celda en concreto a través de la combinación de teclas CTRL+J, especificando el número de columna y fila.

También existe la posibilidad de reunir todas las tablas de una página (CTRL+Insert+T)

El desarrollador

Marcar el código correctamente siempre es importante, pero más aún cuando se trata de tablas complejas. Un correcto marcado hará que la lectura de la tabla sea más sencilla y sobre todo que las relaciones o dependencias entre celdas sean claras.

Existen algunas herramientas que nos ayudan a comprobar si la tabla es correcta, como por ejemplo la extensión de Firefox creada por Gez Lemon. ¡Merece la pena probarla!

Referencias:

  • Requisitos 4.2.8, 4.2.9, 4.3.2, 4.3.3, 4.3.9, 4.4.13 de la norma UNE
  • Puntos de verificación 5.1, 5.2, 5.3, 5.4 de las WCAG 1.0.

Navegar entre marcos (frames)

El usuario de Jaws

El lector de pantalla permite navegar entre los diferentes marcos a través la tecla M, y también permite tener un listado de todos los marcos con la combinación de teclas Insert+F9.

El desarrollador

En los últimos años el uso de marcos es muy limitado y afortunadamente casi nos hemos olvidado de ellos. Aún así, en caso de utilizarlos hay que tener en cuenta algunos aspectos que ayudan a entender, por ejemplo, que relación hay entre ellos.

Referencia:

  • Requisitos 4.3.1, 4.3.4, 4.4.1, 4.4.6, 4.5.6 de la norma UNE
  • Puntos de verificación 12.1, 12.2 de las WCAG 1.0.

Navegando entre otros elementos

El usuario de Jaws

Para ver los elementos de una página existe la posibilidad de obtener un mapa global y así entender mejor su estructura. Con la combinación de teclas Insert+Shift+F1 Jaws lee los atributos y sus valores del elemento corriente y del que se encuentra directamente antes en la jerarquía de la página HTML.

Resulta útil cuando por ejemplo se lee una tabla.

El desarrollador

Muchas veces se hace un uso equivocado de los atributos. Uno de los fallos más comunes es aplicar el mismo valor a los atributos ALT y TITLE, pensando que uno vale para un navegador y el otro para otros, o simplemente se sabe que existen pero no se tiene muy clara la diferencia.

El atributo ALT sirve para incluir una breve descripción como alternativa al elemento, mientras que el atributo TITLE añade información que va a complementar al elemento mismo.

Otro fallo común es utilizar el atributo ABBR en los encabezados de tabla (TH) para aplicar una descripción larga, cuando sin embargo su función es totalmente lo contrario.

Referencia:

  • Requisitos 4.1.4, 4.3.3, 4.3.4, 4.3.9, 4.4.4, 4.4.7, 4.5.9 de la norma UNE
  • Puntos de verificación 13.2, 5.1, 5.2, 12.1, 4.3, 10.2, 12.4, 9.4 de las WCAG 1.0.

Navegando entre objetos gráficos

El usuario de Jaws

A la hora de leer una imagen Jaws lee todos los textos que la acompaña, es decir:

  • Atributo ALT: incluye una breve descripción
  • Atributo TITLE: añade información sobre la imagen
  • Atributo LONGDESC: define una descripción larga en una página separada

El desarrollador

En caso de utilizar imágenes decorativas, en la medida de lo posible es oportuno cargarlas a través de las hojas de estilo. En caso contrario siempre será obligatorio especificar el atributo ALT cuyo valor será vacío: alt="" (no debe haber espacio entre una comilla y otra).

Sin embargo, si utilizamos otro tipo de imágenes que transmitan información, como gráficos por ejemplo, el valor del atributo ALT deberá ser coherente con la imagen misma. Recordar una vez más que el atributo TITLE no tiene el mismo fin, sino el de añadir información a la imagen.

Referencia:

  • Requisitos 4.2.7, 4.4.3 de la UNE
  • Puntos de verificación 1.1, 1.2 de las WCAG 1.0.

Conclusiones

Las ayudas técnicas (como Jaws) hacen posible el acceso a los contenidos y servicios, pero por sí mismas no consiguen resolver el problema de la accesibilidad.

Todos los que “desarrollamos accesible” deberíamos leernos al menos una vez las especificaciones del HTML 4.01 y toda la documentación técnica relacionada. Está todo allí, desde el año 1999 que es cuando se publicó la versión definitiva. Las pautas de Accesibilidad Web no han creado nuevos marcadores, ni nuevos atributos, solo expone de que manera han de aplicarse.

Y un pequeño consejo que me dió Emmanuelle del SIDAR durante una conversación de hace ya un tiempo, que es muy simple pero muy eficaz: aplicar el sentido común.

Clasificado en: Accesibilidad, Estándares Web, Herramientas, Técnicas

Etiquetas: , , ,

Comentarios

  1. Leo 5 mayo 2011, 16:03

    Hola, gracias por iniciativas como esta. Solo una corrección, el listado de formularios es con la combinación de teclas Inserte + f5.

  2. Marco 5 mayo 2011, 18:59

    Gracias Leo por tu aporte, como verás ya está corregido.
    Un saludo.

  3. Fernando Gregoire 6 mayo 2011, 02:22

    Interesante el artículo; hace bastante tiempo uso JAWS por ser ciego pero siempre es bueno leer de vez en cuando cosas de estas.
    Sólo unos pequeños aportes: JAWS tiene un modo (no activado por defecto pero activable) de presentación en pantalla que intenta colocar los elementos de la página de forma similar a como los ve un usuario que ve, así por ejemplo las celdas de una tabla no se separan por líneas, sino las columnas mediante barra vertical (|). Por otra parte, me parece buena idea evitar los enlaces duplicados; a partir de la versión 11 de JAWS existe una función para que al existir 2 enlaces (uno con texto y otro con una imagen) que llevan exactamente al mismo sitio en el búfer virtual sólo se muestre el que tiene texto, los usuarios de versiones anteriores no disponen de esta posibilidad, con lo que es bueno que los desarrolladores lo tengan en cuenta en el diseño; después de todo ayuda también a quienes no usan herramientas de accesibilidad pues contribuye aunque sea un poco a la velocidad de carga.

  4. Lu 6 mayo 2011, 04:59

    Hola, le agradezco mucho por este artículo, pero sobretodo le agradezco el interés y dedicación que se nota al preparar este trabajo. Muchas gracias por interesarse y ayudarnos a leer mejor en internet! se lo mostraré a amigos desarroladores que seguramente les servirá. Una vez mas, muchas gracias y suerte. Lu

  5. JOHN 27 julio 2011, 00:57

    quisiera saber si el JAWS es compatible con el software consola y si es asi, con que tipos

  6. ARLET 4 julio 2012, 00:14

    hola la pagina es muy interesante mi mamá es invidente tiene retinosis desde hace más de 10 años quiero ayudarla pero no se cómo :( tendre que llevar un curso para que ella aprenda a utilizar su computadora.

    gracias a todos los que aportan algo para los que utilizan jaws

Deja tu comentario

Como aplicar estilos al texto y crear enlaces.