Verificar la accesibilidad

Para finalizar nuestra tarea debemos verificar la accesibilidad de nuestro blog, para ello emplearemos diversas herramientas:

Con la primera herramienta  verificamos el código fuente de nuestra bitácora, cuyo resultado lo podemos ver en este informe.

Con la siguiente herramienta verificamos la hoja de estilo: el resultado obtenido lo podemos ver en este informe.

El análisis del contraste del color fue realizado en un post anterior llamado "El uso de los colores"

La última herramienta que hemos utilizado es la barra de accesibilidad desarrollada por el equipo AIS y podemos ver en las siguientes imágenes el aspecto de nuestra bitácora sin estilos:

Encabezados correctos

A lo largo de estos post hemos visto diferentes formas de facilitar y mejorar la accesibilidad web. Uno de esos atajos se realizaba mediante la asignación de una función a una tecla determinada.
El paso que desribimos en este post es otra forma de "atajo".
Codificando los encabezados según niveles se facilta la interpretación de los mismos por los lectores de pantalla, quedando de la siguiente manera:

<h1> título de la bitácora.
<h2> fecha de cada post.
<h3> título del post.
<h4> comentario de cada post.

En el código de este blog ya estaba establecida esta codificación por la plantilla, pero comprobamos que es así:

Tamaños de fuente relativos

Si queremos facilitar la lectura de este blog por cualquier persona que así desee hacerlo deberemos emplear tamaños de letra reltivos para facilitar la adaptación del tamaño de letra a las necesidades de nuestros lectores. En el caso de que utilizáramos tamaños de letra absolutos estaríamos vetando la posibilidad de que una persona con discapacidad visual pueda adaptarla según sus necesidades.

Blogger nos ofrece la posibilidad de variar el tamapaño de letra de nuestros post en cada entrada. Podemos poner la letra muy grande o muy pequeña.
El tamaño que se está empleando normalmente es el normal, pero como hemos podido ver cambiarlo es una tarea sencilla.

Lineas horizontales

Tras introducir en la plantilla de estilo los cambios pertinentes hemos conseguido establecer una barra de separación al finalizar el post con el simple hecho de incluir el código establecido:
<div class="hr">
</div>
<hr/>

Imagen de prueba de barra horizontal:

---

Mapas de imagen accesibles

Los mapas de imágen nos pueden ofrecer mucha información aunque de vez en cuando puede resultar difícil mostrar dicha información de una forma alternativa.
Para ello, lo primero que se ha hecho en este blog es definir el mapa con el atributo "usemap" de esta forma el mapa será controlado por el usuario y no por el servidor.
El segundo paso que se ha realizado ha sido etiquetar los enlaces (Madrid, Valencia, Barcelona)

Atributo "alt" vacío

De vez en cuando querremos poner imágenes decorativas en nuestro blog que carecen de contenido. Para ello utilizaremos el atributo "alt" del que hemos hablado en el post anterior pero sin añadir una etiqueta de contenido al mismo, de esta manera, los lectores de pantalla obviarán esta información y no ensuciarán la lectura del texto.

Equivalente textual para imágenes

El atributo "alt" nos va a dar el significado de las imágenes que utilicemos en nuestro blog. Las personas que utilicen lectores de pantalla podrán conocer el contenido de la imagen en función de la etiqueta que le demos a la misma.