Decálogo para hacer sitios web accesibles
Regla 1/10 Imágenes y animaciones:
Use texto alternativo (atributo ALT) para describir la función de los elementos visuales. Ejemplo de Regla 1/10
Regla 2/10 Mapas de imagen:
Use mapas de cliente y texto alternativo para las zonas activas. Ejemplo de Regla 2/10
3/10 Multimedia:
Facilite subtítulos y trascripción de los ficheros de sonido, descripción de los vídeos y versiones alternativas en el caso de usar formatos no accesibles. Ejemplo de Regla 3/10
4/10 Enlaces de hipertexto:
Use frases que tengan sentido cuando se lean fuera de contexto. Por ejemplo, no usar "pincha aquí". Ejemplo de Regla 4/10
5/10 Organización de las páginas:
Use encabezados (H1, H2, H3...), listas y estructura consistente. Use Hojas de Estilos en Cascada (CSS) para maquetación, donde sea posible. Ejemplo de Regla 5/10
6/10 Gráficos de datos:
Resuma o use el atributo (longdesc). Ejemplo de Regla 6/10
Existen diversas opciones para proveer descripciones alternatives para aquellos gráficos que son muy complejos, y para los cuales el atributo alt resultaría insuficiente por si solo.
En éste ejemplo se usa el atributo longdesc para proveer el texto de la descripción del gráfico para aquellas personas que requieran usar los lectores de pantalla. La descripción se encuentra en un archivo separado el cual es desplegado en una ventana nueva cuando el usuario elije escuchar o leer la descripción.
Es importante destacar que el atributo longdesc es usado junto con el atributo alt. El primero contiene el nombre del archivo en el cual se ha escrito la descripción del gráfico, y el segundo atributo alt sirve para identificar la imagen, en este caso el lector de pantalla leerá exactamente el texto que contiene el atributo alt.
Finalmente, en éste ejemplo la descripción textual del gráfico Producción de las Principales Frutas incluye una tabla de datos con las características necesarias para hacerla accesible.
Para
obtener un detalle escrito de la informaión que surge de la lectura
del gráfico, llame al siguiente enlace: descripcion.htm.
Como
se escucha con el lector de pantalla JAWS un ejemplo similar a este(inglés):
Descripción. Este ejemplo fue extraído del sitio web de la Universidad de Texas.
Código utilizado en este ejemplo:
a) para incluir el gráfico
<div><img src="grafico_de_produccion_de_ frutas.jpg" alt="Produccion de las principales frutas" longdesc="descripcion.htm"></div>
b)Para llamar al archivo de descripción
<img src="imagenes/texto_ico.jpg" width="24" height="24" alt="Informe escrito" />
Para obtener un detalle escrito de la informaión que surge de la lectura del gráfico, llame al siguiente enlace: <a href="descripcion.htm" >descripcion.htm</a>.
