Web posible!!

República Argentina

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

Cuando trabajas con imágenes en las que quieres trazar zonas sensibles para luego referenciarlas con enlaces a otras páginas, usarás el atributo USEMAP del elemento IMG, agregando texto informativo al que está refernciando ese sector de la imagen. Y proveerás de otras alternativas de acceso a esa información. Suponiendo que tienes una web con una imagen en la que se distinguen tres zonas sensibles podrás agregar texto alternativo para guiar al usuario al enlace correspondiente sobre la imagen y además, darás otra opcíón de acceso por si el usuario, no las detectó. Podrás resolverlo utilizando el siguiente código:

< img src="imagenes/maiz.jpg" usemap="#Map1" title="Historia de las palomitas de máiz" alt="Secuencia del crecimiento de la semilla de maiz" class="maiz"/>

<map name="Map1" id="Map1">
<area shape="rect" coords="5,0,110,92" href="cuadro1.htm" " alt="...todo comienza con una semilla" />
<area shape="rect" coords="118,4,241,89" href="cuadro2.htm" alt="...luego crece una linda planta...." />
<area shape="rect" coords="254,7,317,89" href="cuadro3.htm" alt=".... con su fruto cocinamos ..." />
</map>
Por ejemplo:

Historia de las palomitas de maíz

Secuencia del crecimiento de la semilla de maiz Plantando una semilla de maíz Planta que crece Caja de palomitas de maíz

[ Cuadro 1       |       Cuadro 2   |   Cuadro 3 ]

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

7/10 Scripts, applets y plug-ins:

Ofrezca alternativas accesibles en el caso de que las características activas no lo sean o no tengan apoyo. Ejemplo de Regla 7/10

8 /10 Marcos (Frames):

Etiquete con los atributos (title) o (name). Ejemplo de Regla 8/10

9/10 Tablas:

Realícelas de manera que se puedan leer línea a línea. Incluya un resumen. Evite el uso de tablas para dar formato a las páginas. Ejemplo de Regla 9/10

10/10 Revise su trabajo:

Valide el código HTML.Use herramientas de evaluación y navegadores sólo-texto para verificar la accesibilidad.
Ejemplo de Regla 10/10


100% orgánico
Creative Commons License

Sitio web deseñado conforme al nivel AA de las directrices de accesibilidad para el contenido de la Web 1.0 del W3C-AI. Si encuentras alguna dificultad para acceder a estas páginas, escribe un mensaje al Webmáster a la dirección de correo electrónico Maria Dolores Garcia