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.

Paso 11: Tablas Accesibles

Las tablas no son muy comunes en los cuadernos de bitácora, sin embargo de vez en cuando son imprescindibles para cosas tan sencillas como calendarios o para informar de los resultados de pruebas en general. Por ello, hemos de informar correctamente del contenido de las celdas para que que las personas que estén accediendo a ellas a través de lectores de pantalla no tengan problemas. Así, seguiremos las siguientes pautas:

1. Dar un título accesible a nuestra tabla. Insertaremos el título de la tabla dentro de la etiqueta <CAPTION> entre las etiquetas de <TABLE> y el primer <TR>:
        <table border="1" width="30%">
     <caption>Marzo 2011</caption>
     <tr>
2. Proporcionar un breve resumen de la información contenida en la tabla mediante la etiqueta <SUMMARY>:
     <table border="1" width="30%" summary="Calendario mensual con la hora de la clase diaria.">
3. Establecer encabezamientos. Mediante el tag <TH> (table header) podremos establecer la cabecera informativa de la columna:
   <th abbr="Lunes">Lu</th>

De esta forma nos quedaría una tabla similar a la siguiente:

 <table align="center" border="1" width="30%" summary="Calendario mensual con la hora de la clase diaria.">
  <caption>Marzo 2011</caption>
  <tr>
  <th abbr="Lunes">Lu</th>
  <th abbr="Martes">Ma</th>
  <th abbr="Miercoles">Mi</th>
  <th abbr="Jueves">Ju</th>
  <th abbr="Viernes">Vi</th>
  <th abbr="Sábado">Sa</th>
  <th abbr="Domingo">Do</th>
  </tr>
  <tr>
  <td>--</td>
  <td>--</td>
  <td>--</td>
  <td>20:00</td>
  <td>--</td>
  <td>--</td>
  <td>--</td>
  </tr>
  </table>

Y el resultado sería el siguiente:

Marzo 2011

Lu	Ma	Mi	Ju	Vi	Sa	Do
--	--	--	20:00	--	--	--

Paso 10: Acrónimos y Abreviaturas

Los acrónimos son el pan nuestro de cada día, sin embargo se tornan en un problema cuando nos vemos obligados a insertar uno tras otro y en lenguas distintas al castellano. Por ello, surgió la etiqueta <ACRONYM> que pone fin a estos problemas:

<acronym title="World Wide Web Consortium" lang="en">W3C</acronym>

W3C

En algunos navegadores, aparece adornado con una línea punteada, para extenderla al resto de los navegadores podemos, crear el estilo siguiente:

acronym {border-bottom: 1px dotted #000000;}

Existe también otra etiqueta para abreviaturas <ABBR> pero debido a la confusión entre acrónimo y abreviatura, cada vez se tiende a utilizar más la etiqueta de acrónimo.

Paso 9: Atajos del teclado

En caso de que queramos establecer unas teclas de acceso lo primero que hemos de hacer es informar al usuario de la existencia de las mismas y de cuáles son ya que no todos los blogs las tienen ni están normalizadas. Una vez hecho esto podemos personalizarlas a nuestro gusto. Sin embargo, hay tres atajos del teclado que podría decirse que están más o menos normalizados:

1. ALT+1: Página de Inicio. Insertaremos el código siguiente:
   
   <a href="http://pagina.inicio.blog" accesskey="1"><$BlogTitle$></a>
2. ALT+2: Salto de la Barra de Navegación al cuerpo del blog. Insertaremos el código siguiente para hacer uso del código que generamos en el Paso 5:
   
   <a href="#SaltoBarra" accesskey="2">Saltar barra de navegación</a>
3. ALT+3: Formulario de Contacto. Insertaremos el código siguiente, teniendo en cuenta que hará uso de su propia cuenta de correo electrónico:
   
   <a href="mailto:web@mail.com" accesskey="9">Mándame un Correo Electrónico</a>

Paso 8: Hipervínculos

Los hipervínculos, además de lo anteriormente dicho sobre su normalización, deben tener una normalización semántica. Para ello, tenemos dos opciones principales:

1. Insertar la expresión Pincha / Pulsa aquí.
2. En el hipervínculo introducir la etiqueta <TITLE> que en la mayoría de los navegadores también actúa como texto alternativo, y que proporciona información complementaria. En ocasiones, no nos interesará que este contenga información alguna, en ese caso no lo omitiremos, pondremos <TITLE=""> sin un espacio entre las comillas.
3. En el hipervínculo introducir la etiqueta <ALT> que contiene el texto que será leído por los lectores de pantalla o los navegadores por voz. En IE se leera este campo en ausencia del de <TITLE>.

En muchos casos, podremos optar y será lo más conveniente, por las tres opciones.

Por otra parte y por obvio que nos parezca, no debemos abrir nuevas ventanas ya que la persona que esté navegando con lectores de pantalla o navegadores por voz se verán desorientados. Así, debemos eliminar  del código siguiente:

    <a href="http://web-design-1-practica.blogspot.com" alt="Acceso directo al Blog Cuaderno de Bitácora DPT-1" title="Cuaderno de Bitácora DPT-1" target="_blank">Mi blog</a>

la etiqueta target="_blank":

<a href="http://web-design-1-practica.blogspot.com" alt="Acceso directo al Blog Cuaderno de Bitácora DPT-1" title="Cuaderno de Bitácora DPT-1">Mi blog</a>

Quedando como resultado final el hipervínculo siguiente:

Mi blog

Paso 7: Vínculos en Javascript

Javascript puede resultar problemático en lo que se refiere a accesibilidad ya que algunos usuarios no utilizan este lenguaje por distintos motivos. Por ello, los hipervínculos que se ejecuten en este lenguaje son problemáticos. Así deberemos modificar los pseudo-hipervínculos de la manera siguiente:
   <a href="javascript:OpenComments
   (<$MTEntryID$>)">Comentarios(<$MTEntryCommentCount$>)
   </a>
Sustituyéndolo por:
   <a href="<$MTCGIPath$>mt-comments.cgi?entry-id=<$MTEntryID$>"
   onclick="OpenComments(<$MTEntryID$>); return
   false">Comentarios(<$MTEntryCommentCount$>)
   </a>

Paso 6: El Uso de los colores

Los colores y su efecto es muy estudiado en ámbitos como la Moda, el Marketing y tantos otros. Sin embargo, en el diseño web a veces podemos dejarlo de lado. No entraremos en profundidad en él ya que se han escrito ya varias colecciones de libros sobre el tema, pero no podemos dejar de hacer hincapié en los siguientes puntos:

1. Hipervínculos. Han de estar normalizados y fácilmente identificables. En otras palabras, subrayados y el color azul. De otra forma, las personas con dificultades para distinguir los colores no podrán navegar con facilidad por nuestro sitio web. Para ello, crearemos un estilo apropiado como el siguiente:
   Vínculos no visitados:
         a {color:#333FF;
        text-decoration:underline;
        font-weight:bold;
   Vínculos que se activan al pasar el pulsador por encima:
         a:hover {background-color:yellow;}
   Vínculos que ya hemos utilizado, tenemos dos propiedades:
         a:visited {color:red;
                background-color:yellow;}
   
2. Blinking. Según la W3C, "until user agents allow users to control blinking, avoid causing content to blink (i.e., change presentation at a regular rate, such as turning on and off). [Priority 2]". En otras palabras, hasta que los navegadores permitan que los usuarios controlen el parpadeo o blinking de los elementos de una página web, evítelos ya que pueden resulta perniciosos para algunas personas. (Véase http://www.w3.org/TR/WAI-WEBCONTENT/#tech-avoid-blinking y las técnicas en http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/#tech-avoid-blinking)

Paso 5: Elegir una plantilla prediseñada

A la hora de diseñar un blog hay que tener en cuenta que puede visualizarse con distintos navegadores: Internet Explorer, Mozilla y Opera, entre otros. Sin embargo, no hay que olvidar que también ha de ser accesible y por ello ha de presentar el menor número de incompatibilidades posible mediante: los lectores de pantalla (JAWS), los navegadores de sólo texto (LYNXS) o dispositivos de salida braille.
Por ello y basándonos en una plantilla de diseño que sea compatible con lo antes dicho, en principio disponemos de cuatro opciones principales:

1. Una plantilla con el menú de navegación vertical, en el extremo derecho de la pantalla. En el código fuente, el contenido principal  estará colocado antes que el menú de navegación. Es la opción más directa y sencilla.
2. Una plantilla con el menú de navegación vertical, en el extremo izquierdo de la pantalla. En el código fuente tendremos que seleccionar todo el código entre las etiquetas <!-Begin #sidebar -> y <!-End #sidebar ->, cortarlo y pegarlo detrás del contenido principal situado entre las etiquetas <!-Begin #main -> y <!-End #main ->. De esta forma, no habrá problema para los lectores de pantalla y los navegadores que no interpretan las hojas de estilo, ya que siguen el orden del código.
3. Una plantilla con una barra de navegación colocada antes del cuerpo de la entrada. Tendremos que establecer un marcador que permita el salto de a la barra en cuestión. Para ello, proponemos el método siguiente:
• Crear un estilo en la CSS que permita ocultar texto: .ocultar {display:none;}
• Definimos el enlace que dirija al menú como oculto. P.e. <p class="ocultar"><a href="#contenido">Salto a Menú</a>
• Posteriormente, introducimos un vínculo interno contenido al comienzo del contenido principal.
4. Una opción sencilla y alternativa a la anterior, dirigida a aquellos que utilizan sólo el teclado, es la de simplemente ocultar el salto a la barra de navegación otorgándole el mísmo color que el color de fondo, estableciendo un estilo para ello: .letratransparente {font-color:#FFFFFF;}
5. Una plantilla con tablas. En caso de que maquetemos la página mediante una tabla tendremos que: 
• Insertar una imagen vacía en la celda superior izquierda.
• Indicar en el tag de cada fila de la tabla la existencia de dicha imagen y su función:
  <table>
  <tr>
  <!-- Imagen espaciadora en la celda superior izquierda ->
  <td>
  <img src="/images/1.gif" width="1" height="1" alt="">
  </td>
  <!-- Contenido principal en la primera celda, con rowspan=2 ->
  <td valign="top" align="left" rowspan="2">
  .....CUERPO DEL BLOG.....
  </td>
  </tr>
  <tr>
  <td valign="top" align="left" width="25%">
  .....BARRA DE NAVEGACIÓN.....
  </td>
  </tr>
  </table>

Paso 4: Ayudas adicionales a la navegación

La etiqueta <LINK> nos permitirá introducir accesos rápidos a dístintas páginas que podemos configurar según queramos. W3C establece los siguientes criterios:

El elemento LINK indica una relación entre el documento y otro objeto. Un documento puede tener un número indeterminado de elementos LINK. Aunque no necesita una etiqueta de cierre por estar vacío, necesita tener los mismos atributos que el elemento ancla. Sus atributos más importantes son:

• REL: define la relación definida por el link.
• REV: define la relación inversa. Un link desde el documento A al documento B con una relación REV, invierte la relación establecida en REL.
• HREF: vincula un objeto mediante la notación URI.

Sin embargo, en Blogger sólo podremos utilizar el link que nos da un acceso rápido a la página principal; en el caso de este blog:

<link title='Página Principal' rel='home' href='http://web-design-1-practica.blogspot.com/' />

Paso 3: Metadatos

Se han escrito libros sobre estos campos que son los que permitirán a un sitio web empezar a escalar puestos en los rangos de los buscadores sin tener que realizar una inversión previa. Denis Howe en su diccionario online FOLDOC define metadato como:

Datos sobre datos. En proceso de datos, son datos definitorios que proporcionan información o documentación sobre otros datos gestionados por una aplicación o entorno. Los metadatos pueden incluir información descriptiva sobre el contexto, la calidad y la condición, o las características de los datos. Myers de The Metadata Company afirma ser el responsable de la invención de este término en 1969 a pesar de que aparece en el libro "Extension of programming language concepts" publicado en 1968 por Philip R. Bagley.

En una página web, las etiquetas <META> aportan información sobre la página web en cuestión y por ende, sobre el sitio web al que pertenecen.

Las etiquetas <META> más comunes son las siguientes:

1. DESCRIPTION: <meta name="description" content="Este es un blog para el diseño web accesible"/> a través de esta etiqueta introduciremos una descripción de nuestra página web que utilizarán algunos buscadores.
2. KEYWORDS: <meta name="keywords" content="dpt-1, accesibilidad"/> mediante esta etiqueta introduciremos los descriptores que definen el contenido de la página web.
3. CONTENT-TYPE:  <meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8"/> esta etiqueta indica al navegador el tipo de documento que está leyendo. El charset UTF-8 es el más utilizado en los documentos latinos por su compatibilidad con los dígitos definidos por dos caracteres ASCII como la [ñ] y las vocales con tilde.
4. TITLE:   <meta name="title" CONTENT="Cuaderno de Vitácora DPT-1"/> esta etiqueta permite a los buscadores realizar búsquedas por medio del título de la página web. Sin embargo esta etiqueta META está en desuso porque los buscadores, como Google o Yahoo, ya sólo tienen en cuenta la etiqueta <TITLE>.

No debemos olvidar indexar nuestro sitio web ya que si no, quedará perdido en la gran nube de Internet.

Paso 2: Identificación del Idioma

Por lo general, no solemos tener en cuenta el idioma en que nos movemos por internet, simplemente leemos e inmediatamente somos capaces de discernir si lo comprendemos o no. Sin embargo, las personas con discapacidades visuales se sirven de lectores de pantalla que, a no ser que se lo indiquemos mediante una etiqueta al inicio del documento, no sabrán identificarlo y leerán el hipertexto como si se tratase de la lengua para la que están inicialmente configurados. Por ello, hemos de insertar al inicio del modelo de documento HTML y muy próximo a la etiqueta DOCTYPE, el conjunto de etiquetas que definen la lengua en que está escrita el documento que estamos leyendo, en el caso del castellano:

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

De esta forma, le estaremos informando al lector del pantalla que el documento web está en castellano.

---

En caso de que queramos introducir una cita en otra lengua, también podemos añadir la etiqueta LANG. Por ejemplo, 

<$blockquote lang="en"$>The man who does not read books has no  advantage over the man that can not read them.</$blockquote$>

Puede parecer demasiado perfeccionista o incluso altruista, este tipo de medidas. Sin embargo, hemos de recordar que a través de una programación purista, estructurada y documental aumentará la velocidad de acceso al sitio web y de búsqueda en el mismo de los Buscadores por lo que no hemos de tomarlas a la ligera.

Paso 1: Definición de la etiqueta DOCTYPE

El primer parámetro que hemos de definer es la el tipo de documento que pretendemos crear mediante la etiqueta DOCTYPE. Para ello introduciremos el código siguiente en la etiqueta <!DOCTYPE html>:

PUBLIC "-//W3C//DTD XHTML 1.0 Strict/EN" "HTTP://www.w3.org/tr/xhtml1/DTD/XHTML1-strict.dtd"

De esta forma, estableceremos como tipos de códigos aceptados el HTML 4.01 y el XHTML 1.0.