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

Paso 14: Usar lista reales

Al crear listas hay códigos especiales que se utilizan:
ul para las listas aleatorias
ol para las ordenadas

En ocaciones para mejorar la estética de las listas se incorporan imágenes para anticipar cada punto. Lo correcto es añadirlas mediante en la hoja de estilo y no como imágenes con la etiqueta IMG SRC

Ejemplo correcto:

• A
• B

Solo se utilizó las etiquetas ul y li. La imágen fue incorporada en la hoja de estilo de la plantilla.

Paso 13: Tablas accesibles

Al crear una tabla hay que tener presentes algunas cuestiones necesarias para que los lectores de pantallas puedan brindar al usuario la información necesaria. Un uso correcto indica que las tablas no se utilicen para maquetear las páginas, para esto deben usarse las etiquetas DIV. El uso apropiado es para presentar datos. Entre otras deberían emplearse las etiquetas:summary, caption y th.

Título de la Tabla

C UNO	C DOS
C UNO	C DOS

Paso 12: Acrónimos

Es común utilizar abreviaturas en un texto, en el cual la primera vez que aparece se coloca entre paréntesis su significado. En las otras apariciones es recomendable utilizar la etiqueta acronym. Empleando esta etiqueta los lectores de pantalla pueden interpretarlo, además si colocamos el cursor sobre la palabra nos aparece su significado.

Por ejemplo: UNED

Paso 11: No abrir nuevas ventanas

En cuanto al código HTML, no utilizar el target="_blank". Esto es debido a que genera un desconcierto para los lectores de pantalla, perjudicando a los usuarios de los mismos.

Paso 10: Atajos de teclado

Los atajos de teclados son útiles para ir a algún lugar de nuestro sitio sin necesidad de utilizar el mouse. Es muy útil para personas con dificultades motrices en las manos.

En nuestro caso agregamos en el body:


"a href="<$BlogTitle$>" accesskey="1"><$BlogTitle$>/a"

Esto permite que con la combinación de la tecla ALT + 1 se seleccione el título del blog.

Paso 9: Vínculos correctos y con títulos

En el código HTML debe debe colocarse la etiqueta title con el título del link para añadir información al usuario.

Este es un ejemplo de uso correcto en nuestro blog:

"a href="http://www.vischeck.com/vischeck/" title="Vischeck - Sitio para comprobar el color"> http://www.vischeck.com/vischeck/"

Además debe tener sentido donde se coloca el hipervínculo ya que los lectores suelen ordenar las palabras que son links

Paso 8: Vínculos reales

No se recomienda utilizar javascript para establecer vínculos en una web por diferentes motivos: seguridad, google no los indexa, etc.

En nuestro caso particular Blogger no utiliza está tecnica para los enlaces, en caso de versiones más viejas hay que verificar. En nuestro caso no se encontró en el código.

Paso 7: El uso de colores

El blog no debe transmitir información exclusiva con el color. Un ejemplo erróneo podría establecer categoría con colores en vez de identificaciones textuales.

Además realicé la comprobación de colores desde el sitio: http://www.vischeck.com/vischeck/ y se puede ver el contenido perfectamente.

Paso 6: Colocar primero el contenido principal

Una de las buenas prácticas de diseño indica que los menús deben colocarse a la derecha dejando como primera instancia al contenido en si.

Esto facilita la organización para que los usuarios de lectores de pantalla lleguen más fácil a la información que interesa y no pasar siempre por el menú.

En este caso podrán observar que en la elección de la plantilla seleccioné una con menú a la derecha.

Paso 5: Ayudas adicionales a la navegación

En el Html de la plantilla, más específicamente en el HEAD, podemos encontrar la etiqueta LINK. La misma permite direccionar a los CSS y ayuda a los navegante a ir a la página principal y a los posteos anteriores y posteriores.

En este tipo de blog solo se puede agregar:

link rel="Principal" title="¿Cómo hacer un Blog Accesible?" href="<$BlogUrl$>"

Paso 4: Elegir un título significativo

El título de nuestro Blog debe reflejar, como primera agrupación general, cual será la temática a abordar.

Luego en cada agrupación de "nivel 2" debería quedar como título: AGRUPACION GENERAL / AGRUPACIÓN NIVEL 2. Esto permite que rápidamente al estar sobre un post se tenga la idea general y particular.

Blogger hace esto en forma automática.

Ejemplo de título de este post: ¿Cómo hacer un Blog Accesible? - Paso 4: Elegir un título significativo

Paso 3: Identificar el idioma

Hay programas que leen las pantallas de los equipos, permitiendo que personas ciegas o con visión disminuida puedan escuchar la informción que se encuentra disponible. Uno de los requisitos que presentan estos programas es el lenguaje en que deben manifestarse.

Esto se puede modificar fácilmente en el Blog desde la segunda línea del mismo.

Por defecto viene en inglés, lang="en", en nuetro caso debe quedar así: lang="es".

Línea original:

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>"

Línea modificada:

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="<$BlogLanguageDirection$>"

Paso 2: Elegir un DOCTYPE

La primera línea del HTML de la plantilla de nuestro Blog debe comenzar con la etiqueta DOCTYPE. Desde esta opción se indica el código HTML utilizado y el lenguaje.

En este blog:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

Paso 1: ¿Para quién es la accesibilidad web?

Sencillamente para todos. Aunque hay personas con ciertas características que se ven más beneficiadas ya que si no se cumplieran las pautas de accesibilidad no podrían acceder a la información.