Esta es la guía para los puntos de verificación de la prioridad 3 para las pautas de accesibilidad al contenido web. Para los que no las leyeron, revisen primero las partes correspondientes a:

1. Cada vez que un acrónimo o abreviatura aparezca por primera vez en un documento, debe ser especificada. (4.2)

Lo primero que deberíamos hacer es poder distinguir uno de otro, para ello recurrimos a sus respectivas definiciones en la Wikipedia:

Un acrónimo es un conjunto de letras formado por las iniciales de otras palabras. El término procede del griego, donde: akros es punta y onymos es nombre. Por ejemplo: URL (Uniform Resource Locator)

Una abreviatura es la representación escrita de una o varias palabras mediante una o varias de sus letras, a fin de que la palabras o las palabras en cuestión resulten más cortas en el texto.Como por ejemplo Mb. (Mega Byte).

Para mayores datos sobre diferencias pueden leer Abreviaturas y acrónimos en la web

Una vez que ya tenemos una noción de a qué grupo corresponde nuestra palabra debemos encerrarla en el tag correspondiente y usar el atributo title para describir su naturaleza por ejemplo:

Una <acronym title="Uniform Resource Locator">URL</acronym> es…

La casilla cuenta con 20 <abbr title="Mega Byte">Mb.</abbr>

2. Identifique el idioma principal de un documento. (4.3)

Esta recomendación se refiere a incluir en el tag html (el primer tag, el que abre el documento) el atributo lang que tendrá un valor referente al lenguaje en el que está escrito el documento.

Sirve para que los lectores de pantalla puedan interpretar la página con una correcta pronunciación y obviamente toda información semántica que le agreguemos a nuestros contenidos ayudará en un futuro cuando más funcionalidades estén implementadas para interpretarla.

<HTML lang="es"> ... </HTML>

En XML y XHTML el atributo se denomina xml:lang y utiliza los mismos valores.

3. Generar un orden lógico de navegación, para enlaces, controles de formularios y otros objetos. (9.4)

Esto implica que el usuario pueda desplazarse normalmente dentro de una página en el orden que propone la navegación aún si no cuenta con los dispositivos estándar, como por ejemplo el mouse. Para ello deben fijarse, mediante el código html, estructuras que puedan brindar una alternativa a la navegación convencional de los elementos activos. Una persona ciega, si no le entregamos una página que tenga sentido cuando el lector la traduzca, tendrá dificultades para entender lo que tratamos de transmitirle.

Este orden se puede estipular para que la persona se desplace por la página mediante el uso de la tecla tab, que le permitirá saltar de enlace en enlace o de campo en campo en el caso de ser un formulario.

Si bien esto se puede cumplir con un concienzudo diseño que ordene lógicamente los elementos de la página de la manera en que queremos mostrarlos, podemos ayudarnos mediante el atributo tabindex (se puede usar en los siguientes tags que respresentan elementos activos: a, area, button, input, object, select, y textarea.) se puede ayudar a fijar esa navegación.

El procedimiento comprende que se le asigne a cada elemento activo de la página el atributo tabindex con un valor positivo. Entonces el orden de navegación se dará desde el elemento con el tabindex más bajo hasta el que tenga el valor más alto. Luego seguirán aquellos que no tengan el atributo y finalmente los que tengan atributo disabled no serán tomados en cuenta.

<form action="" method="">
<input tabindex="2" type="text" name="user">
<input tabindex="1" type=" password" name="password">
<input tabindex="3" type="submit" name="ingresar">
</form>

En el ejemplo, si se usa el tab como método de desplazamiento, éste pasará primero por el tabindex 1, que es el campo user, luego el tabindex 2 que es el campo password y finalmente pasará al tabindex 3: el botón ingresar.

4. Brindar atajos de teclado para los links importantes y controles de formulario (9.5)

Aparte del orden de tabulación se puede incorporar otro atributo que permite el acceso a los elementos activos de la página: accesskey (que se utiliza en los siguientes tags: a, area, button, input, label, legend y textarea)

Accesskey permite realizar atajos de teclado a los elementos activos para que se puedan alcanzar con facilidad.

<a href="index.html" title="Acerca de la empresa" accesskey="A">Acerca de…</a>

En este ejemplo el usuario puede activar la letra A para ir al destino del enlace.

Por ahora no hay un estandar acerca de qué significan cada una de las teclas disponibles por lo que se recomienda brindar información sobre las asignaciones que se realizan.

5. Incluir barras de navegación en el sitio como mecanismo de navegación. (13.5)

Las barras de navegación son conjuntos de enlaces que permiten que el usuario acceda a los contenidos que ofrecemos en nuestro sitio, conviene entonces que sean facilmente reconocibles, que dispongan de un ordenamiento claro de la información y que se encuentren preferiblemente en un mismo lugar y con una sola estética a lo largo del sitio para su fácil reconocimiento por parte del usuario.

También se debe tener en cuenta la cantidad de ítems o categorías/secciones principales que contendría la barra, se recomiendan que sean pocas y concisas, si el sitio es muy grande, mejor presentar las categorías principales y que éstas sean lógicos contenedores de subcategorías/subsecciones que puedan llegar a presentarse, una buena regla a seguir es la de: The Magical Number Seven, Plus or Minus Two.

6. Incluir caracteres imprimibles, que no sirvan como link, entre los links contiguos. (10.5)
7. Identificar en conjuntos lógicos los enlaces relacionados (13.6)

La pauta 5 es lo que se denomina una pauta temporal, porque incluye la sentencia que dice que “hasta que las aplicaciones de usuario y ayudas técnicas interpreten claramente los vínculos contiguos…�? o sea es algo que hay que hacer porque la tecnología todavía no lo resolvió pero no perdamos las esperanzas. La pauta 6 también es temporal, o sea su uso se promueve hasta que el próximo cambio tecnológico resuelva la situación sin necesidad de realizar este tipo de adecuaciones.

Esto se aplica a las barras de navegacion principales de un sitio que son omnipresentes en todas sus páginas, entonces, un usuario que use lector de pantalla para interpretar una página debería siempre que ingrese a una nueva página releer las opciones de esa botonera. Es por ello que si agrupamos los enlaces en un conjunto lógico, como puede ser la barra de navegación, debemos identificarlo como una unidad. Al tratar los enlaces relacionados como un todo, podemos poner a disposición del usuario acciones simples que afecten a todo el conjunto, por ejemplo que puedan saltarsela en las páginas internas.

Cúales son las opciones que podemos brindarle a nuestros usuarios para que puedan saltearse este grupo de enlaces:

  • Incluir un link al principio de la barra que sea "Saltar Navegación principal" y que le premita hacer justamente eso o sea un anchor que le permita llegar a donde comienza el contenido dentro de la misma página..
  • Proporcionar una hoja de estilo para que los usuarios puedan ocultar el grupo de enlaces.
  • usar el tag map que permita agrupar los enlaces, y también identificarlos con el atributo title

En el ejemplo, el tag map agrupa el conjunto de enlaces que forman la barra de navegación principal que aparece al top de cada página, tiene un atributo title que lo identifica como tal. El primer enlace del grupo sirve para llegar a un marcador ubicado al terminar el conjunto que ayuda a saltar la información que ya se conoce.

Los enlaces incorporan los caracteres imprimibles, para impedir que los lectores de pantalla viejos lean los enlaces adyacentes como un único enlace, y también para dar una distinción visual que pueda ayudar a los usuarios a diferenciar los enlaces a simple vista.

<map title="Barra de navegación">
[ <a href="#salto">Saltar Barra de navegación</a> ]
[ <a href="prueba1.html">Sección 1</a> ]
[ <a href="prueba2.html">Sección 2</a> ]
[ <a href="prueba3.html">Sección 3</a> ]
[ <a href="prueba4.html">Sección 4</a> ]
[ <a href="prueba5.html">Sección 5</a> ]
</map>
<h1><a name="salto">Título del texto del sitio </a></h1>

8. Las opciones de búsqueda deben permitir diferentes tipos de búsquedas para diversos niveles de habilidad y preferencias (13.7)

Si se incluye una búsqueda en el sitio, qué cosas se deben hacer para brindar al usuario una interfaz de búsqueda que le sea útil:

  • Se debe ofrecer al usuario interfaces de búsqueda en todas las páginas del sitio.(preferentemente con la misma ubicación y el mismo estilo, para que el usuario pueda ubicarla en todas las páginas.
  • Debería contar con mecanismos para la búsqueda que facilitaran las acciones de los usuarios, por ejemplo en caso de que la búsqueda resultara nula, ofrecer otras alternativas, información sobre cómo ampliar las posibilidades de la búsqueda, etc.
  • Un campo de texto lo suficientemente ancho como para que permita ingresar palabras largas o varias palabras sin que se oculten parte de las mismas para que el usuario pueda ver la sentencia completa y corregirla si así lo dese, muchos usuarios no miran la pantalla cuando escriben con el teclado, sino que lo hacen una vez que terminaron de tipear la oración.
  • Incluir una página para realizar búsquedas avanzadas. Es mejor agrupar las opciones avanzadas en una página aparte, accesible desde el cuadro de diálogo de búsqueda que está presente en todas las páginas para aquellos usuarios que necesitan refinar o ampliar la búsqueda más allá de las opciones por defecto que ofrece la búsqueda simple.

9. Ubicar la información destacada al principio de los encabezamientos, párrafos, listas, etc. (13.8)

Los encabezados, títulos, y descripciones de los enlaces deben ser claros y precisos, ya que por ejemplo estos últimos puden ser leídos fuera de contexto.

  • Los encabezados deben ser útiles para describir la información que contienen en pocas palabras que orienten al usuariio para que sepa si le sirve o no leer el artículo.
  • En una lista de enlaces por ejemplo, que es una posibilidad que ofrecen los lectores de voz como por ejemplo el Jaws. Entonces la idea es presentar la información lo más clara y unívoca posible, de nada sirven los Click aquí o los Leer más ya que sacados del contexto no se sabe a ciencia cierta a dónde puede conducirnos. Podemos ayudarnos del atributo title para el tag a que permite incluir mayor información del contexto al cual nos lleva.
    <a href="pagina1.html" title="Ir a la sección 1: Cómo ingresar" >Sección 1</a>


  • Tener en cuenta el principio de la pirámide invertida, según el cual cuando se escribe para internet, aparte de un título claro, se comienza con la conclusión en un resumen corto y se va agregando información gradualmente, de modo que los lectores puedan tener una idea global del contenido incluso si no lo leen entero.
  • Los elementos estructurales tales como títulos, subtítulos, párrafos, citas, (h1 a h6, p y cite) deben estar marcados correctamente porque esto es útil para las personas que utilizan lectores de voz, ya que tienen la posibilidad de ir saltando de marcador en marcador a través de una página, para ayudar mejor a este tipo de navegación también se puede hacer lo siguiente:
    • Desarrollar un concepto principal por párrafo.
    • Evitar el uso de palabras no comunes (jerga, etc) que no estén descriptas en el documento y alentar el uso de las comunes, manejando un lenguaje coloquial, más entendible para los usuarios, evitando también frases o estructuras complicadas.

10. Incluir presentaciones gráficas o auditivas cuando facilite la comprensión del contenido (14.2)

Cierta información es conveniente presentarla acompañadad de gráficos o sonidos que complementen en concepto. Está comprobado que la información sobre procesos o procedimientos parece ser mejor comprendida cuando se utilizan animaciones, gráficos e infografías para explicarlas. De esto la gente de Eyetrack III hizo un estudio

Ejemplos de multimedia que complementan al texto:

  1. Un esquema de los datos complejos, tales como las cifras de negocios del año fiscal anterior.
  2. Una traducción del texto a una presentación animada en lenguaje de señas. El lenguaje de señas es muy diferente de los idiomas verbales. Por ejemplo, algunas personas que pueden comunicarse a través del lenguaje de señas americano, no son capaces de leer inglés americano.
  3. Los sonidos pre-grabados de música, discursos hablados o efectos sonoros pueden también ayudar a los no-lectores que pueden percibir presentaciones auditivas. Si bien el texto puede convertirse en discurso a través del sintetizador de voz, los cambios del tono de la voz del discurso grabado proporcionan información que con el sintetizador de voz se pierde.

11. Preparar la información para que los usuarios puedan recibirla de acuerdo a sus preferencias de idioma, formato o tipo de contenido. (11.3)

Esta pauta se divide en 2 partes, por un lado propone mejoras que se pueden realizar sin mucho esfuerzo tales como:

  • Proveer enlaces a diferentes versiones del contenido ofrecido, por ejemplo en otros idiomas.
  • Usar negociación del contenido para proveer al usuario del contenido que solicita, por ejemplo sergún el idioma que lo representa.
  • Indicar tanto el tipo de contenido como el idioma en la información cuando se disponga de estos datos, esto se puede hacer a través de los atributos type y hreflang.
    • hreflang es un atributo del tag a que indica el idioma con que el usuario se va a encontrar si sigue el link. El valor de este atributo está dado por el RFC1766 que especifica los identificadores para cada lenguaje. Por ejemplo: en para inglés fr para frances, es-ar para español argentino, etc.
    • title ayuda a describir mejor el destino del enlace que lo contiene.
      <a href="http://www.ietf.org/rfc/rfc1766.txt" hreflang="en" title="Request for Comments 1766">RFC1766</a>

Otras premisas que se puede adoptar para brindarle al usuario información de una forma que pueda comprender explota facilidades tecnicas que aportan los CSS en su revisión 2, como por ejemplo:

  • Las propiedades auditivas se utilizan para entregar información a usuarios que utilizan lectores de voz de manera parecida al tipo de letra que proporciona información visual. es decir utilizar las voces para recalcar enfasis, distinguir títulos de párrafos, enfatizas puntuación, etc.
  • Se puede tambien diseñar hojas de estilo para mostrar documentos en distintos dispositivos, a través de la regla @media, por ejemplo para impresos, para braille, sintetizadores de voz, etc. Existen muchos tipos de media configurable en las CSS como ser aural para sintetizadores de voz, braille para este tipo de dispositivos tactiles, print para el estilo de impresión. handheld para dispositivos portátiles, tv para televisión, etc. Ejemplo:

    @media print { h1 { color: #FF0000; }}
    @media screen { h1 { color: #000000; }}

12. Diferenciar y transmitir información acerca de la composición de los documentos (13.9)

Un documento puede representar más de una página, puede ser un libro que esté dividido en capítulos, o puede ser un libro que sea parte de una colección también por ello, y como no podemos prever en donde ingresarán los usuarios a nuestras páginas debemos agregar a nuestro contenido información que nos permita presentarlo como un paquete coherente.

Se puede usar el metadato link para agregar este tipo de información en las páginas. ayuda a describir la estructura de navegación que le proponemos al usuario con respecto a un documento en particular. Por ejemplo si nuestros usuarios ingresaron a la página por un buscador y cayeron en el capítulo 7 del libro, ésta página podría tener la siguiente meta información

<head>
<title>Chapter 7</title>
<link rel="Index" href="index.html">
<link rel="Next" href="chapter8.html">
<link rel="Prev" href="chapter6.html">
</head>

También podemos utilizar documentos empaquetados para que puedan ser descargados y leídos sin conexión, se utiliza para ello programas de compresión como ser zip, tar, rar, etc.

13. Permitir saltar sobre un ASCII art de varias líneas. (13.10)

Siempre antes que usar ASCII art (dibujos hechos a base de combinación de caracteres), es preferible utilizar imágenes, ya que a estas se le puede incluir información a través de la etiqueta alt, pero puede darse que la finalidad sera mostrar el ASCII, entonces en ese caso se tiene que brindar un link (anchor) para que el usuario pueda saltar el dibujo y en caso que el dibujo proporcione información que enriquezca el contenido, se puede usar el atributo longdesc para brindar una descripción más detallada del gráfico. Por ejemplo:

<a href="#salto">Saltar ASCII art</a>

        ,,
  ___(  )___
 /            \
/\/\/\||/\/\/\
        ^^

<a name="salto">Contínua texto despues del dibujo.</a>

14. Incluir caracteres por defecto en los cuadros de edición y áreas de texto de los formularios. (10.4)

Esto se pide hasta que las aplicaciones de usuario puedan renderizar correctamente los campos vacíos. Sobre todo el tipo textarea que es basicamente un campo de texto multilínea y necesita de una frase para poder ser interpretado correctamente, como se ve en el código:

<form action="">
<textarea name="comentario" rows="20" cols="80">Ingrese aquí su comentario</textarea>
<input type="submit" value="Enviar" / >
</form>

15. Incluir enlaces de texto redundantes para las zonas activas de los mapas de imágenes (1.5)

Aquí nos encontramos con otra pauta estilo: "hasta que las aplicaciones de usuario…."

Toda aquella información no textual (imágenes, applets, sonidos, presentaciones multimedia, etc.) deberán tener información alternativa que cumpla la función que transmitir los datos equivalentes en formato textual. (a través de alt y longdesc)

Cuando incluimos en una página un mapa de imagen client.-side también deberemos brindar esa información en modo textual, esto se logra mediante la incorporación de enlaces de texto redundantes para cada parte del mapa. Esto se hace a través del tag object que se debería mostrar cuando no se puede mostrar el mapa de imagen.

<object data="imagen1.jpg" type="image/gif" usemap="#map1">
<map name="map1">
[<a href="index.html" shape="rect" coords="0,10,16,25">Índice</a>]
[<a href="pagina1.html" shape="rect" coords="10,20,26,35">Página 1 </a>]
[<a href="pagina2.html" shape="rect" coords="24,30,50,60">Página 2 </a>]
</map>
</object>

16. Proporcione resúmenes de las tablas (5.5)
17 y abreviaturas para las etiquetas de encabezamiento. (5.6)

Proporcione un título mediante el tag caption que se ubica en la estructura de la tabla y sirve para describirla como se observa en el ejemplo:


<table>
  <caption>Acrónimos de uso común en tecnología</caption>
  <thead>
    <tr>
      <th>Siglas</th>
      <th>Significado</th>
    </tr>
  </thead>
  tbody>
    <tr>
      <td>P2P</td>
      <td>Peer to peer</td>
    </tr>
    <tr>
      <td>WAP</td>
    <td>Wireless Application Protocol</td>
    </tr>
    <tr>
      <td>LDAP</td>
      <td>Lightweight Directory Access Protocol</td>
    </tr>
  </tbody>
</table>

También se puede utilizar el tatributo title del tag table para una descripción de pocas palabras .

El atributo summary ofrece un resumen de las relaciones entre celdas por ejemplo un valor para la tabla anterior sería:

summary="tabla que presenta las siglas de un acrónimo y su significado"

Es particularmente útil cuando presentamos tablas de doble entrada También puede servir para incorporar la tabla dentro del contexto del documento.

18.Proporcionar texto lineal alternativo para todas las tablas que maquetan texto en paralelo, en columnas de palabras. (10.3)

Cuando se utilizan las tablas para maquetar información es muy facil la lectura de las mismas pudiendo ver la página en frente, del monitor, pero por ejemplo los lectores de voz viejos tiene problemas para interpretar columna por columna y hacen una lectura lineal, esto conlleva a una interpretación erronea de la información. Cuando las tablas no son de maquetación sino que contienen datos la información también puede desorganizarse y tornarse incomprensible.

Entonces para especificar un orden de recorrido de las columnas se utiliza el atributo dir, el cual especifica una secuencia de recorrido de las columnas, esto puede cambiar con el idioma de la página que especifica un sentido de lectura. Los valores del atributo dir son rtl (right to left) o ltr (left to right)

19. Cree un estilo de presentación que sea coherente en todas las páginas (14.3)

Un mismo look & feel a través de todo el sitio le permite al usuario saber que ptodavia se encuentra en el mismo sitio, que las estructuras se mantienen de página en página para su familiarización, comodidad y rápido movimiento entre las páginas.

Por otra parte tenemos recomendaciones sobre el uso de las CSS, si bien tienen gran potencialidad, también pueden ser peligrosas por su naturaleza diversificada, para ello tenemos que tenerlas bajo nuestro control, estos 3 ítems pueden ayudarnos con este tema:

  • Utilizar pocas hojas de estilo, documentarlas y mantener la estructura actializada.
  • Evitar las hojas de estilo incrustadas en las páginas si los estilos se van a repetir para otras páginas.
  • La estructura de classes, ids y elementos debe ser coherente, y repetible a través de las hojas de estilo utilizadas.

Uff, fue largo, pero valió la pena.

Hasta la próxima