Paso 18: Verificación de la Accesibilidad

Es necesario comprobar la accesibilidad de nuestro sitio web y para ello tenemos herramientas como las siguientes:

1. Comprobación de que nuestro código fuente se ajuste a las recomendaciones de W3C: validator.w3.org.
2. Comprobación de que nuestra hoja de estilo se ajuste a las recomendaciones de W3C: jigsaw.w3.org/css-validator/.
3. Comprobación de la accesibilidad del blog: www.tawdis.net.
4. Análisis cromático de la web que verifica el contraste de colores, de manera fácil e intuitiva: http://www.nils.org.au/ais/web/resources/contrast_analyser/versions/es/.
5. Comprobación del funcionamiento del cuaderno de bitácora sin la hoja de estilo: http://www.technosite.es/software.asp.

Otras sugerencias:

• Comprobar los textos alternativos de las imágenes deshabilitando la visualización de las imágenes en el navegador.
• Acceder a la web con un navegador de sólo texto o con un simulador como Lynx Viewer.
• Comprobar el funcionamiento de la herramienta JAWS en nuestra web.
• Navegar por nuestra web con un navegador obsoleto.

Paso 17: Encabezados

Sin entrar en la personalización de los encabezamientos, diremos que existen básicamente seis, H1 - H6, donde la H significa Header. Para una correcta accesibilidad en nuestro blog, debemos normalizar  el uso de los títulos como podría ser el siguiente:

1. <H1>: Título de la bitácora.

   Título 1

2. <H2>: Fechas de los posts.

   Título 2

3. <H3>: Título de los posts.

   Título 3

4. <H4>: Comentarios.

   Título 4

En cualquier caso, lo realmente importante es la normalización de su utilización para no inducir a la confusión.

Paso 16: Tamaños de Fuente Relativos

Siempre que podamos debemos utilizar los tamaños relativos para definir el tamaño de las fuentes en la hoja de estilos. Sin embargo, esto resulta laborioso hasta que encontramos el tamaño deseado. Blogger se sirve de una mezcla entre palabras clave (xx-small, x-small, medium, large, x-large y xx-large) y porcentajes, que resulta accesible.

Paso 15: Líneas Horizontales

Tenemos tres formas principales de introducir una línea que marque una división entre los post:

1. Mediante la etiqueta <HR alt="-" align="left" width="80%">.
   
   

   ---

   
   
2. Insertando una imagen. Por ejemplo,
   
   <img src="/imagenes/lineadecorativa.jpg" height="40" width="320" alt="-" title="">
   
   
   
   
3. Sin embargo, cuando queremos introducir una imagen como la anterior la solución más correcta sería crear un estilo y aplicarlo. Por ejemplo:
   
   div.hr {
   height: 40px;
   background: url(/imagenes/lineadecorativa.jpg) no-repeat scroll center;
   }
   div.hr hr {
   display: none;
   }
   
   Donde el campo Height es equivalente en pixels a la altura de la imagen que vamos a colocar. Introduciremos la línea horizontal mediante el siguiente código:
   
   <div class="hr"><hr alt="-"></div>
   
   

   ---

   
   De esta forma, los navegadores visuales mostrarán la imagen y los lectores de pantalla mostrarán una regla horizontal formada por guiones.

Paso 14: Mapas de Imágenes Accesibles

Los mapas de imágenes son muy utilizados sobre todo en tiendas online. Sin embargo, no resultan accesibles por lo que debemos evitarlos en la medida de lo posible. Cuando debamos hacer uso de los mismos deberemos:

1. Utilizar el atributo <USEMAP> ya que el mapa es controlado por el dispositivo del usuario. Por el contrario, con <ISMAP> lo define como controlado por el servidor. 
2. Introducir el tag <ALT> con el equivalente textual de las imágenes.
3. Introducir el tag <TITLE=""> a la imagen principal y a cada área en caso de que no queramos que aparezca un cuadro emergente en los navegadores visuales.

El producto final sería algo similar a esto:
   <img src="MiMapa.jpg" width="500" height="200" usemap="#map" alt="Navegación por mi bitácora" title="">
 <map name="Map">
 <area shape="rect" coords="203,114,258,129" href="principal.htm" alt="Página Principal" title="">
 </map>

Este sería un ejemplo:

Paso 13: Equivalente Textual para Imágenes

La etiqueta <ALT> nos proporciona un texto alternativo para las imágenes que introducimos en nuestro sitio web, lo cual tiene dos ventajas. En primer lugar, en caso de que no se cargue la imagen presentará el texto alternativo que nosotros hemos introducido. Y en segundo lugar, es vital para todos los usuarios que utilizan lectores de pantalla. Por ejemplo, en esta imagen hemos incluído las dos etiquetas <ALT> y <TITLE>.

De esta forma, ya se han introducido dos campos que introducen información adicional a la imagen, la etiqueta <TITLE> que proporciona información adicional de forma visual; y la etiqueta <ALT>, que nos brinda un texto alternativo. Debemos recordar que no se ha de introducir como texto alternativo en las zonas activas expresiones como "¡Pinche aquí!", por obvio que parezca.

Finalmente matizar que en ocasiones introducimos imágenes puramente decorativas sin significado alguno, o para separar textos u otras imágenes; en otras palabras, imágenes sin significado por sí mismas. En esos casos, no nos interesa introducir texto alternativo, sin embargo, no dejaremos de añadir el campo <ALT> pero vacío y sin espacios en blanco: <ALT="">. Si introdujésemos uno o varios espacios en blanco el lector de pantalla leerá "Espacio".

Paso 12: Listas

Las listas en HTML tienen las siguientes características:

• Pueden ser numeradas <OL> (Ordered List) o no numeradas <UL> (Unordered List). Ambas son jerárquicas.
• En el caso de las <OL>, disponemos del campo <type="$"> donde podremos sustituir el $ por los valores 1, A, a, I y i.
• En el caso de las <UL>, podemos reemplazar los bolitos por imágenes creando un estilo semejante al siguiente:
    ul.menu1 {list-style: url([ruta de la imagen que queremos poner].jpg) disc;}
  Así sólo tendríamos que añadir el tag <CLASS> a la <UL> para aplicar el estilo:
    <ul class="menu1">
    <li>...</li>
    <li>...</li>
    </ul>
  Por ejemplo:
  
  • Elemento 1
  • Elemento 2
• Para que siempre aparezca la misma viñeta independientemente del nivel en que estemos, insertaremos el tag DISC. Si no, NO-REPEAT. Por ejemplo:
  ul.menu2{
   list-style: url(http://www.icex.es/icex/cda/images_icexv3/flecha_n.gif) disc;
  }
  ul.menu3{
   list-style: url(http://www.icex.es/icex/cda/images_icexv3/bullet_flecha.gif) disc;
  }
  Por ejemplo:
  
  • Elemento 1
  • Elemento 1.1
  • Elemento 2
• En el caso de que no queramos que haya viñetas creamos un estilo como el siguiente:
    ul.menu0 {
     list-style: none;
     text-align: left;
    }
  Por ejemplo:
  
  • Elemento 1
  • Elemento 2
• Disponemos también de los campos ALT y TITLE.