Cuando terminé la primera parte de la Guía, allá por junio del 2002 prometí hacer la segunda parte, pero quería esperar la aparición de las Web Content Accessibility Guidelines 2.0 que por ahora son un borrador. Finalmente decidí no esperar más y armarme de valor para armar mi guía casera para las pautas de prioridad 2 correspondientes a las Web Content Accessibility Guidelines 1.0. Asi que allá vamos.

Pautas de accesibilidad para la prioridad x

Contraste para las imágenes

Las combinaciones de colores en las imágenes deben poseer el suficiente contraste para que puedan ser percibidas por personas con deficiencias de percepción de color o en pantallas en blanco y negro.

Usar marcadores en vez de imágenes para transmitir la información

En vez de presentar información en formato imagen, se trata de hacerlo con texto y resolver el diseño con hojas de estilo, mejor aún en el caso de que existiera un lenguaje acorde para transmitir la información se debe emplear éste, es decir una fórmula matemática en vez de presentarse como una imagen para que no pierda su formato, podría ser representada utilizando MathML.

Documentos validados por las gramáticas formales publicadas.

Crear un documento que sea válido tiene que ver con el DOCTYPE del documento. EL DOCTYPE es la primera línea de texto que figura en el código del archivo y sirve para indentificar y validad la estructura del mismo contra estándares prefijados, por ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Indica que el documento que lo contiene está hecho conforme a los estándares de HTML 4.01 que se valida contra la DTD loose.dtd, la cual contiene la semántica de la especificación y se encuentra hosteada en el W3CSi la declaración del DOCTYPE es correcta, permite al navegador del usuario conocer e interpretar la estructura del documento. El W3C cuenta con un servicio de validación.

Uso de las hojas de estilo (CSS) para controlar la maquetación y la presentación.

Es aconsejable usar CSS para diseñar los contenidos en vez de usar imágenes ya que de esta forma los contenidos estarán disponibles para más usuarios, sobre todo aquellos que no utilizan los dispositivos estándares para acceder a la web. Por ejemplo, CSS puede manejar las sangrías, el centrado del texto, los espaciados entre letras y palabras, la dirección del texto, etc. Entonces: En vez de
definir en el HTML.

<div align="center"><h1>Titulo 1</h1></div>

Lo hacemos en nuestra hoja de estilo:

h1 { text-align: center;}

A través de las hojas de estilo se puede controlar la posición visual de los elementos de un documento independientemente del lugar que ocupen dentro del documento, esto se logra utilizando las propiedades: "floa"", "position", "top", "right", "bottom" y "left". El lugar que ocupen dentro del documento debería responder al orden en el que se mostrarían los elementos sin la hoja de estilo y con ella se pueden posicionar los elementos de acuerdo a cualquier tipo de diseño visual.

El uso de hojas de estilo permite que los usuarios definan sus propios estilos y a través de facilidades que ofrecen los navegadores los impongan a los del autor, de esta forma pueden tener control total sobre contraste de colores o tamaños de letras para navegar los sitios con comodidad.

Usar unidades de medida relativas para los elementos de un documento

Esta pauta indica que se deberían usar medidas relativas ("em" o % en vez de "px")y porcentajes para definir los elementos y posiciones dentro de un documento, en vez de medidas absolutas. (Si ya se que yo no lo cumplo, pero es más que nada por desconocimiento de cómo funcionan las medidas relativas en distintos ambientes prometo migrar en cuanto lo tenga bien estudiado). Por ejemplo: En vez de utilizar px o pt:

<STYLE type="text/css">
	h1 { font-size: 11px; }
</STYLE>

Usamos medidas relativas para el tamaño de la letra: 

<STYLE type="text/css">
h1 { font-size: 10em; }
</STYLE>

Los elementos de encabezado deben transmitir la estructura lógica de acuerdo con la especificación.

HTML nos da la posibilidad de estructurar contenidos claramente a través del uso de las etiquetas de encabezamiento (h1, h2, h3, h4, h5 y h6) los cuales deberían guardar un orden lógico (primero h1, luego h2 y así sucesivamente) no debiendo saltarse ninguno de estos niveles.

También hay que considerar que no está bien utilizar los encabezados para algún tipo de efecto de diseño que no sea el de mostrar un encabezado, por ejemplo no usar h1 para agrandar un texto que llame la atención al usuario. Un ejemplo del buen uso de las etiquetas de encabezamiento sería: 

<h1>Título del libro</h1>
<h2>Título del capítulo</h2>
<h3>Título de la sección</h3>

Listas e ítems de las listas marcados correctamente

Las listas se utilizan para facilitar la estructuración de la información dentro de un documento, esta información puede no tener un orden determinado, para lo cual usamos viñetas para mostrarla o pueden responder a un orden, por ejemplo una receta de cocina, en ese caso utilizamos números. Este tipo de recurso, además puede contener niveles y subniveles de información, su visualización se facilita a través de listas anidadas, con hojas de estilo se podrá usar en un futuro el elemento before, el cual inserta un contenido x antes del contenido real del elemento.

Les dejo el ejemplo que encontré en el documento con las técnicas del W3C, yo no lo pude hacer andar, igualmente hasta que los navegadores no interpreten este tipo de elementos no se podrán implementar con éxito en los desarrollos web:

<STYLE type="text/css">UL, OL { counter-reset: item }LI { display: block }LI:before { content: counters(item, "."); counter-increment: item }</STYLE>

Este pedazo de código servirá para cuando anidemos listas, los subniveles de las mismas se formen mediante números compuestos por ejemplo el primer nivel será 1, el segundo 1.1, el tercero 1.1.1 y así sucesivamente, ya que así entregan mayor información que las listas anidadas con números simples, que son los que vienen por defecto en el código. Como esto aún no se arma en forma automática, lo que hay que hacer es especificar el nivel de anidamiento mediante información contextual, ¿Cómo? Vamos a utilizar de ejemplo las listas que arma el W3 en sus especificaciones, es un poco retorcido pero muy efectivo, en la hoja de estilo le indican que no muestre los números de las listas que vienen por defecto y los agrega a mano, de esta manera la comprensión de las listas se enriquece tanto para los usuarios que lo visualizan en pantalla como aquellos que acceder a la infomacióna través de un lector de pantalla.

Por el lado del CSS: 

<STYLE type="text/css">
  OL {list-style-type: none}
</STYLE>

Por el lado del HTML:

<ul><li>1 Document structure and metadata<li><ul><li>1.1 Metadata</li><li>1.2 Structural grouping</li></ul> </ul>

No usar los tags de citas para formatear textos

Este punto refiere a la correcta utilización de los tags BLOCKQUOTE y Q. El tag Q se utiliza para citas cortas y el efecto visual es el de imprimir las comillas dobles al texto que anida. El tag BLOCKQUOTE sirve para anidar citas en bloque, se usa para diferenciar párrafos que son citas de párrafos comunes. El efecto visual que imprime este tags es que indenta los textos que contiene.

Asegurar que los contenidos dinámicos sean accesibles

Esta pauta se refiere a darte al usuario control sobre los eventos que suceden o pueden sucederse dentro de la página, entonces hasta que los programas que utilizan nuestros usuarios para acceder a una página web permitan este control, se recomienda evitar:

  1. El parpadeo del contenido.
  2. Los movimientos en las páginas.
  3. Actualizaciones automáticas de las páginas.
  4. Redirecciones automáticas (éstas se recomienda hacerlas para que se ejecuten desde el servidor y no desde la página web)
  5. Nuevas ventanas (pop ups) o cambiar el foco de la ventana actual sin permiso del usuario.

Utilizar tecnologías W3C

basicamente utilización de HTML, XHTML, CSS, etc…

Evitar características desaconsejadas por las tecnologías W3C.

En referencia a este punto, podemos señalar que hay que tener cuidado al utilizar tecnologías W3C en relación a versiones que pueden estar obsoletas por ejemplo, en HTML 4.0 el tag FONT ya no se usa más en su lugar su función se realiza desde la hoja de estilos. Otro ejemplo puede ser la utilización de una fuente que no sea estándar en las máquinas de los usuarios.

Dividir los bloques largos de información en grupos más manejables.

Este punto se materializa en las siguientes acciones:
Utilizar el tag FIELDSET para agrupar controles de formulario en
unidades semánticas y describirlas con el tag LEGEND. También se
recomienta el uso de LABEL y TABINDEX para completar la accesibil idad del formulario tal como se puede ver en el siguiente cuadro.

No recomendado

<form action="" method="post">   <input type="text" id="nombre" tabindex="1"><input type="text" id="apellido" tabindex="2"><input type="text" id="empresa" tabindex="3"></form>

Recomendado

<form action="" method="post"><fieldset><legend>datos personales</legend><label for="nombre">nombre: <input type="text" id="nombre" tabindex="1"></label> <label for="apellido">apellido: <input type="text" id="apellido" tabindex="2"> </label> </fieldset>   <fieldset> <legend>datos laborales</legend><label for="empresa">empresa: <input type="text" id="empresa" tabindex="3"> </label></fieldset></form>

Otras acciones dentro del mismo concepto son:

  1. Usar el tag OPTGROUP para organizar listas de opciones de menú en los formularios.
  2. Usar tablas para datos tabulares, describirlas con CAPTION, agrupar filas y columnas con THEAD,
  3. TBODY, TFOOT y COLGROUP.
  4. Anidar listas con UL, OL y DL.
  5. Usar H1 - H6 para estructurar documentos y separar tramos largos de texto.
  6. Separar los párrafos con el tag P.

Identificar el objetivo de cada enlace.

El texto que contiene el enlace debe ser significativo y corto, para que pueda ser identificado univocamente fuera de su contexto, por ejemplo cuando un lector de pantalla ennumera solamente los enlaces que puede legar a tener una página. No deben usarse frases del estilo: "Haz click aqui" o "Información del producto" ya que solas no brindan mucha ayuda. También se puede enriquecer la información del enlace con el atributo title del tag A que permite agregar mayores datos que se verán cuando el usuario pase el mouse sobre el enlace, como en el texto alternativo de las imágenes. Un ejemplo de su uso sería:

<a href="aquivalaurl.html" title="descripción extendida">Aqui va el texto del  enlace</a>

Utilizar los metadatos para agregar información de tipo semántica al sitio

Los metadatos son datos estructurados que describen la información sobre un recurso, más claramente son "datos sobre los datos" y sirven para describir los recursos de forma tal que sean más facilmente localizables. ¿Cuales son los metadatos que me provee el lenguaje HTML
para describir mis recursos?:

  • TITLE (título del recurso)
  • ADDRESS se usa para dar información de contacto
  • META este tag especifica una serie de metadatos que pueden ser utilizados para la descripción de un recurso, tales como palabras clave, descripción, fecha, datos del autor, de copyrigth, etc. También se pueden incluir otros estándares que amplían estos metadatos, como por ejemplo Dublin Core.
  • LINK este tag ayuda a describir los mecanismos y organización de la navegación del documento y adjuntar documentos, como por ejemplo distintos tipos de hojas de estilo que ayuden a la comprension de la información dependiendo del contexto en el que es visualizada.

Brindar información adicional sobre la estructura del sitio

No hay mucho para destacar aquí salvo la importancia de contar con un mapa del sitio que simplifique en un vistazo la estructura del sitio a nuestros visitantes.

Usar los mecanismos de navegación de forma coherente.

Este punto destaca la importancia de mantener un estilo y ser consecuente con el mismo, colocar los elementos de navegación al alcance del usuario y siempre en los mismos espacios, es decir las páginas deben contar con una estructura simple y ordenada, que se repita a lo largo
de todo el sitio, las barras de navegación, los contenidos, la publicidad, etc, las opciones de búsqueda deben situarse en el mismo lugar siempre.

Y si sen usan…

Ahora, si todo lo que se dijo antes no sirvió, las pautas tienen su parta blanda que incluyen lo que se debería hacer si el autor no pudo con su genio e hizo uso de los elementos prohibidos:

  • Si se usan tablas: no las utilicen para maquetar la info please! Ahora si no pudo aguantarse y la utilizó para maquetar… no usar los marcadores estructurales para realizar un efecto visual de formato por ejemplo TH es un tag que resalta y señala una celda que contiene el encabezamiento de una tabla y no debe ser usado para reslatar otra cosa que no sea eso.
  • Si se usan frames: hay que describir la función de cada uno de los frames que se muestran, sobre todo 12.2 Describa el propósito de los marcos y cómo éstos se relacionan entre sí, si no resulta obvio solamente con el título del marco.
  • Si se usan formularios: las etiquetas deben estar colocadas adecuadamente y asociadas explícitamente con sus controles.
  • Si se usan applets y/o scripts: la manipulación de los eventos debe ser independiente del dispositivo, o sea algun script que para su correcto funcionamiento dependa del mouse mostrará serias complicaciones al momento de ser ejecutado en un contexto donde este elemento no esté presente, por ejemplo el caso de algunas personas con problemas motores. Olvidemosnos de los movimientos en las páginas.

Bueno y hasta acá la prioridad 2 que tardó mucho tiempo en llegar y resultó más larga de lo que imaginaba.

Hasta la próxima

Enlaces relacionados: