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

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

Para trabajar dentro de las normas de accesibilidad, deberás evitar el uso de tablas.
La barrerra que crean las tablas se debe a que los lectores de pantalla leen línea a línea y cuando la información contenida en una celda ocupa más de una línea la confusión puede llegar a ser total, a menos que se sigan las pautas de accesibilidad indicando el tipo de elemento que contiene la celda y su relación con otros elementos(Véase ejemplo de tabla accesible) Para posicionar texto e imágenes será apropiado usar Hojas de Estilo y las tablas solo las usarás para presentar datos que organizándolos de otra manera sería difícil de intepretar.
En este caso deberíamos tener en cuenta lo siguiente:
1-Declara los encabezados de la tabla.
2-Utiliza abreviaturas y acrónimos para facilitar la navegación de los lectores de pantalla.
3-Incluye un resumen del contenido de la misma mediante el atributo "summary".

Una tabla accesible:

Asistentes al acto.
ASISTENTES Profesionales Usuarios
Mujeres 80 m/p 20 m/u
Hombres 70 h/p 26 h/u


El código de este ejemplo es el siguiente:

<table width="80%" border="1" cellspacing="0" cellpadding="4" align="center" summary="Tabla de distribución de los asistentes al acto distribuidos por sexo (hombres, mujeres) y por relación con el mismo (profesionales asistentes).">
<caption><span class= "negrita">Asistentes al acto.</span>
</caption>
<tr class="cabecera">
<th id="t1" abbr="Asist" <span class= "negrita">ASISTENTES</span></th>
<th id="t2" abbr="Prof"><b>Profesionales</b></th>
<th id="t3" abbr="Usus"><b>Usuarios</b></th>
</tr>
<tr>
<td headers="t1" class="cabecera"><span class= "negrita">Mujeres</span></td>
<td headers="t2">80 <abbr title="mujeres profesionales">m/p</abbr></td>
<td headers="t3">20 <abbr title="mujeres usuarias">m/u</abbr></td>
</tr>
<tr>
<td headers="t1" class="cabecera"><span class= "negrita">Hombres</span></td>
<td headers="t2">70 <abbr title="hombres profesionales">h/p</abbr></td>
<td headers="t3">26 <abbr title="hombres usuarios">h/u</abbr></td>
</tr>

</table>

En un navegador que alinee la tabla, la información aparecerá así:

ASISTENTES Profesionales Usuarios
Mujeres
80 m/p 20 m/u
Hombres 70 h/p 26 h/u

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