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

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

El uso de marcos o frames, supone una barrera de acceso para las personas con deficiencias visuales y para aquellas cuyos navegadores no lo soportan cuando no se usan en forma adecuada.
En el caso de necesitar el uso de marcos en tu web deberás seguir estas pautas de buenas prácticas y tus páginas serán accesibles:
1-Tendrás que ponerle un titulo a tus marcos, de manera que el usuario pueda saber qué contenidos encontrará en cada marco.
2-Describirás la relación entre marcos, con el atributo "longdesc"
3-Ofrecerás, además una versión sin marcos.

El código adecuado para presentar marcos es el siguiente * :

Ver el ejemplo con marcos


<FRAMESET cols="10%,*,10%">

<FRAMESET rows="20%,*">
<FRAME src="promo.html" name="promo" title="promociones" longdesc="frameset-desc.html#promo">
<FRAME src="sitenavbar.html" name="men&uacute;"
title="Barra de navegaci&oacute;n del sitio" longdesc="frameset-desc.html#navbar">

<NOFRAMES>
<p><a href="indnoframes.html" title="Versión sin frames del índice y las promociones.">&Iacute;ndice sin marcos</a></p>
<p><a href="frameset-desc.html#promo" title="Descripción de la relación entre marcos.">Descripci&oacute;n de los marcos.</a></p>
</NOFRAMES>
</FRAMESET>

<FRAME src="story.html" name="noticia" title="Contenido principal - noticia seleccionada"
longdesc="frameset-desc.html#story">

<FRAMESET rows="*,20%">
<FRAME src="headlines.html" name="&iacute;ndice" title="&Iacute;ndice de otros titulares nacionales" longdesc="frameset-desc.html#headlines">
<FRAME src="ad.html" name="publicidad" title="Publicidad" longdesc="frameset-desc.html#publicidad">

<NOFRAMES>
<p><a href="noframes.html" title="Versión sin marcos de la noticia seleccionada.">Contenido sin marcos</a></p>
<p><a href="frameset-desc.html" title="Descripción de la relación entre marcos.">Descripci&oacute;n de los marcos.</a></p>
</NOFRAMES>
</FRAMESET>

 

* Este ejemplo fue extraído del sitio www.inclusiondigital.net


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