Paso 21: Verificar la accesibilidad

Para finalizar debemos comprobar la accesibilidad de nuestro Blog.

Se realiza el análisis con tres herramientas:

1. http://validator.w3.org

Resultado:71 Errors, 29 warning(s)

2. http://jigsaw.w3.org/css-validator/

Resultado: 2 Errores

3. http://www.tawdis.net/

Resultado:

Prioridad 1 - Automático 1 - Manual 58
Prioridad 2 - Automático 2 - Manual 54

Conclusión: si bien se presentan una gran cantidad de errores, muchos de ellos, la mayoría, son producto del código BLOGGER. Para transformar el blog en accesible 100% habría que buscar cada una de las líneas que marcan las herramientas y adaptarlas.

Sin dudas este trabajo fue una gran experiencia!!!

Paso 20: Encabezados correctos

Es común encontrar páginas con títulos en formato de texto sin respetar los encabezados que vienen por defecto. Se debería utilizar h1, h2, h3, h4, h5, h6. Si se desea algún formato en especial se debe recurrir a la hoja de estilos.

Esto debería ser así ya que las personas que utilizan los lectores de pantallas pueden moverse a través de los títulos si estos están correctamente definidos.

Por ejemplo en la la hoja de estilo de mi blog encontré:

h2 {
margin:1.5em 0 .75em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

Paso 19: Tamaños de fuentes relativos

Se recomienda presentar la fuente con valores relativos, tales como unidades em, porcentaje o palabras clave (este último realmente es un valor absoluto pero con un comportamiento flexible para su interpretación por el navegador). Esto facilita la flexibilidad necesaria al navegador para modificar el tamaño de la fuente y respeta la proporción entre los distintos tamaños que utilizamos para destacar o diferenciar ciertos textos.

Ejemplo 1 (font-size:78%)

Ejemplo 2 (font-size:130%)

Paso 18: Líneas horizontales

Las líneas mediante la etiqueta hr suelen utilizarse para separar secciones de un sitio web. En el caso de querer utilizar una imágen con este objetivo lo adecuado sería hacerlo mediante la hoja de estilo.

Línea tradicional

---

Línea con imágen

---

Paso 17: Mapas de imágenes accesibles

Mapa en una Imágen






Si bien no es recomendable utilizar mapa de imágenes, en el caso de que se haga se debe colocar el atributo Alt en cada zona definida.

Paso 16: Atributo "alt" vacío

En el post anterior comentamos la importancia del atributo ALT.

¿Qué sucede cuando la imágen es una pura decoración? hay que colocar el alt vacío para que el lector lo ignore.

Es muy importante recordar que lo correcto para el "alt" vacío es colocar las comillas seguidas (alt="") y no dejando un espacio entre ellas (alt=""), ya que, entonces, los lectores de pantalla leerán "espacio".

Paso 15: Equivalente textual para imágenes

Al trabajar con imágenes se necesitan utilizar 2 etiquetas:

Alt: para que los lectores puedan transmitir el sentido de esa imágen. En este caso. Foto de tres teclas del teclado formando W3C
Title: para incluir información visual. En este caso: W3C (se puede apreciar pasando el mouse sobre la imágen