Paso21: Validación de accesibilidad

Como paso final es recomendable hacer uso de un validador como el del w3C, en el cuál obtenemos una cifra y un completo análisis de errores o warnings que puede tener nuestro desarrollo. Algunos de los errores son de Blogger pero la mayoría de nuestras entradas, en el caso de este blog al hacer la primer revisión encontré "105 errores", después de este escandaloso resultado y revisar un poco sobre los fallos, actualmente tiene un resultado de "86 errores" en http://validator.w3.org 2 errores en http://jigsaw.w3.org y en orden de prioridades 65, 72 y 21 en http://www.tawdis.net.

Después de leer el resultado del validador, veo que muchos de los supuestos errores son por ejemplo espacios en etiquetas o cierres de las mismas que no deberían ser, a lo largo del blog para que el texto que les quería mostrar no se convirtiera en HMTL intencionalmente dejaba espacios o etiquetas sin cerrar. Así que me tranquiliza en algo saber que el margen de error no es tan alto como parece.

Esta fue una muy interesante práctica y la recopilación queda abierta en la web para que sea multiplicadora de estas buenas prácticas y de cierta forma pueda ser una herramienta útil por una web accesible.

John Milton Zárate

Paso20: Encabezados correctos

Los encabezados son las etiquetas "h1" "h2" "h3" "h4" "h5" "h6", se otorga "h1" al primer título, el de más jerarquía y así sucesivamente. Blogger organiza muy bien los encabezados por cada post, pero de nosotros depende mantener el orden con el que se inicia. El siguiente ejemplo es parte del código tomado del post inmediatamente anterior este.

...

< div id="header">< div>
< h1 id="blog-title">


< div id="main">< div id="main2">< div id="main3">
< h2 class="date-header">martes 22 de marzo de 2011
< h3 class="post-title">
...

Paso19: Tamaños de fuente relativos

Es importante diseñar las hojas de estilo teniendo en cuenta los tamaños de las fuentes en porcentaje y no en tamaño fijo. Esto debido a que muchos navegadores o dispositivos de salida difieren en la forma de mostrar los archivos. Para ello en los estilos el "font-size" debe estar en porcentaje. A continuación un ejemplo de ello:

Texto al 180%

Texto al 150%

Texto al 120%

Texto al 100%

Texto al 60%

Paso18: Líneas separadoras

Las líneas separadoras son muy necesarias en algunas páginas web como los blog, algunas personas por cambiar el diseño insertan imágenes en vez de las típicas líneas insertan imágenes. Esto no tiene problema desde que se haga de manera accesible, lo que se puede lograr con una etiqueta "alt".

Por ejemplo para poner la siguiente imagen desde la hoja de estilos el código sería:

div.hr {display:none}
/*/*/a{}
div.hr{
display: block;
height: 10 px;
background-image: url(http://ticrobot.com/static/media/cms_page_media/20/Linea
SeparadoraHome.gif);
background-repeat: no-repeat;
background-position: center center;
margin: 1em 0 1em 0;
}
hr {display: none}

Paso17: Zonas activas en una imagen

Una mapa de imágenes puede ser expandir las opciones para aprovechar una imagen, de esta forma se puede agregar mas información a un sola imagen o separar contenidos de acuerdo a su contenido.

Para este ejemplo he puesto en una fotografía mis dos carros, cada lado de la fotografía conduce a una foto completa del mismo y además en el "alt" dice el modelo de cada uno.

Paso16: Atributo "alt" vacio

En ocasiones donde la imagen sea solo relleno y no aporte ninguna información al contenido de la página, solo en esos casos se debe utilizar el atributo "alt" vacío, sin espacios ya que un lector de pantalla lo leería, en cambio al no encontrar nada este interpreta que la imagen no es relevante y sigue con su lectura, para ello se utiliza dentro de "img" la etiqueta alt="" dejando las comillas dobles sin información entre ellas.

La siguiente imagen es un ejemplo de ello, la cual puede ser un marco para utilizar en una composición de una invitación de grado:

Paso15: Texto alternativo en las imágenes

En las imágenes existe un atributo llamado "alt", en esta etiqueta se puede adicionar información de texto para describir la imagen y así apoyar la función de los lectores de pantalla ya que es la única forma que obtengan alguna información de estas.

La etiqueta se usa dentro de "img", solo se debe poner texto plano, no se debe escribir allí el nombre del archivo ni tampoco textos sin sentido. A continuación una fotografía personal utilizando texto alternativo.