sábado, 19 de mayo de 2012

Paso 21: Verificar la accesibilidad

Llegado al punto final de los 21 pasos para la elaboración de un Blog accesible y tras un trabajo verdaderamente laborioso, procedemos a realizar la verificación de todo el proceso y poder realizar la modificación de lo que no sea positivo en el proceso.
Tal y como nos comentó el propio profesor, tras la verificación nos darán un alto número de errores, pero que serán debidos la mayoría al propio sistema de Blogger, por lo que no podremos realizar un Blog totalmente accesible.


  • Para la validación de W3C, utilizamos la página  http://validator.w3.org/, en la cual nos damos cuenta de lo anteriormente indicado. Nos proporciona un altísimo número de errores, que tras su lectura detallada podemos concluir que son errores que ya tiene establecido el propio Blogger.
  • La validación de la hoja de estilos la llevamos a cabo a través de la página http://jigsaw.w3.org/css-validator/, la cual nos proporciona menos errores que la anterior, pero observando errores ya establecidos por Blogger.
  • En tercer lugar, realizamos un análisis automático de los criterios de accesibilidad elaboradas por el grupo WAI. El programa nos muestra una alto número de errores automáticos, siguiendo con las perspectivas anteriormente mostradas.
  • En cuarto y último lugar, utilizaremos la barra de herramientas de accesibilidad desarrollada por el equipo de AIS. Dicha herramienta nos dice que el el contraste y brillo entre los colores utilizados son suficientes para considerarlo accesible. Además, al desactivar la hoja de estilo verificamos que el Blog se comunica sin problemas.



Paso 20: Encabezados correctos

Todos los blogs cuenta con una organización mediante esquema por niveles y que Blogger, en relación a nuestro propio blog, los lleva a cabo de la siguiente forma:

1. El nivel superior será el propio título de la bitácora.

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

2. El segundo nivel sería cada uno de los días en los que colocamos «posts».
/* Headings
----------------------------------------------- */
h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;

3. El tercer nivel lo ocuparía el título de cada uno de los «post» de cada día y el cuarto nivel estaría la sección de «comentarios» para cada «post», que aparecen de forma conjunta en la plantilla:
<Group description="Post Title" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>




Paso 19: Tamaños de fuente relativos

Como tantas veces hemos comentado a lo largo de la elaboración del blog, la principal función es realizar un Blog accesible para aquellas personas con dificultades sensoriales, por tanto, uno de los términos principales que debemos considerar es la propia letra.
La letra debe proporcionar todas cualidades necesaria para que pueda beneficiar a todos nuestros usuarios. De esta forma, Blogger, para ser más accesible, diseña sus blogs a partir de fuentes relativas (en unidades em).
Realizando una búsqueda por el propio código de Blogger,  hemos observado que para nuestra plantilla utiliza los siguientes unidades em:


padding: .6em 1em;

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;

.mobile .date-header span {
  padding: 0.1em 10px;
  margin: 0 -10px;

Paso 18: Líneas horizontales

Tras realizar una multitud de cambios y lecturas, he llegado a dar con el código para inserción de las líneas horizontales en la plantilla del Blog. 
El propósito principal de este paso es dar un toque de color y diseño atractivo a nuestras propias entradas, para ello, utilizaremos la siguiente línea horizontal:



De esta forma, hemos tenido que realizar todos los cambios en la hoja de destilo, mediante el siguiente código:

.post-footer {clear:left; line-height:60px; height:5 px; margin-bottom:12px; _margin-top:-4px; /* IE Windows target */ background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmVcpPtroeQH49MQipUZu5gI8xEsd1fbySg-p7IgEiI_5LkK46JnIqaRNF6FXUn4S87ZW_bLl_XC3vULoQakEex70b4EOLnli_pla1pVCDfagjMYo59TA8MFfYPNLSAnSmGaOp3K0AV9g/s1600/orangebar1.gif") no-repeat bottom left;}
  margin: 20px -2px 0;
  padding: 5px 10px;

Paso 17: Mapas de imagen accesibles

Copa de árbol Tronco del árbol Raíces del árbol

En este paso número 17 vamos a llevar a cabo el establecimiento de un mapa de imágenes accesibles, es decir, una imagen que nos portará la información necesaria para poder seguir informándonos a partir de ella.
En la siguiente imagen, hemos querido llevar a cabo las distintas partes de un árbol, por tanto, si queremos sabes cuáles son sus partes bastará con pasar el ratón por encima de ellas, teniendo la posibilidad de ampliar la información a partir de diversos portales a los que te redirecciona. Además, está hecho de tal forma que beneficie a todos los usuarios con dificultades que utilicen lectores de pantalla, etc...



Sin duda alguna, ha sido el paso que más me ha dificultado la tarea del blog, ya que, hasta el último momento, no me aparecía la imagen, dándome error en todos los casos. Finalmente he conseguido su establecimiento de la siguiente forma:

<div align="center">
<span style="color: lime; font-size: medium;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-DtBLeeFvin2yoCX-SK5-tEJxqQuQvQBSQ7hAaZEX6znfbPoEERx393LXl2Xs3x5sk9xF5QR-d_ukWB_orVd4U4PuDyvAKJ5oVPj6gbWRl_RUS-j-I9NlQ7DAQkJPk3S0E4kSIL96xM/s1600/arbol.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="337" ismap="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-DtBLeeFvin2yoCX-SK5-tEJxqQuQvQBSQ7hAaZEX6znfbPoEERx393LXl2Xs3x5sk9xF5QR-d_ukWB_orVd4U4PuDyvAKJ5oVPj6gbWRl_RUS-j-I9NlQ7DAQkJPk3S0E4kSIL96xM/s1600/arbol.jpg" usemap="#arbol.jpg" width="250" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">

<map name="arbol.jpg">
<area alt="Copa de árbol" coords="127,108,-88" href="http://www.mailxmail.com/curso-interpretacion-graficos-todas-edades/dibujo-arbol-copa" shape="CIRCLE" title="Copa del árbol"></area>
<area alt="Tronco del árbol" coords="117,203,145,267" href="http://www.castor.es/tronco.html" shape="RECT" title="Tronco del árbol"></area>
<area alt="Raíces del árbol" coords="16,269,246,332" href="http://es.wikipedia.org/wiki/Ra%C3%ADz_(bot%C3%A1nica)" shape="RECT" title="Raíces del árbol"></area>


Paso 16: Atributo «alt» vacío

En éste paso, nos vamos a centrar en el atributo vacío en "alt", es decir, vamos a llevar a cabo un paso contrario al del post del Paso 15.
Hay veces que ponemos ciertas imágenes con el único fin de decorar la entrada. Este hecho puede dificultar el entendimiento del contenido principal para aquellos usuarios que utilicen lectores de pantallas u otros mecanismos si no realizamos una modificación anterior del atributo "alt".
Por tanto, vamos a insertar la misma imagen del niño utilizando las TIC, pero en éste caso, se va a insertar con una función decorativa.

La modificación que hemos realizado, en este caso, para el atributo "alt" es el siguiente:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ojnVrUZRZkK58UiBOPEmX0d6cDzU8w4ofg8xQ4hYsbWNl7odZ1QO6u7_gOgoHsvwp2s-IAIKj1cYyY7VCD-sJroRpiwNJQo-5Cyp0MdFyX6bwaLQ_XDNteLTdUJgdVyQLCL2KorEdzM/s1600/nino-y-ordenador.jpg" alt="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ojnVrUZRZkK58UiBOPEmX0d6cDzU8w4ofg8xQ4hYsbWNl7odZ1QO6u7_gOgoHsvwp2s-IAIKj1cYyY7VCD-sJroRpiwNJQo-5Cyp0MdFyX6bwaLQ_XDNteLTdUJgdVyQLCL2KorEdzM/s200/nino-y-ordenador.jpg" width="200" /></a></div>
<div>

Paso 15: Equivalente textual para imágenes

En el paso número 15, llega el momento de poner en práctica el conocimiento adquirido sobre el atributo "Alt", considerado como uno de los elementos principales para la accesibilidad en la web.
La función principal que vamos a conseguir, en este caso, con el atribulo "alt" es beneficiar a todos aquellos usuarios con problemas visuales en el momento de interpretar una imagen que aparezcan en un post. Es decir, vamos a realizar una equivalencia textual para imágenes.
Para ello, vamos a insertar una imagen de un niño con un ordenador portátil, habiendo modificado el atributo "alt" para la accesibilidad de los usuarios anteriormente indicados. ¡Fíjate en lo que pasa al pasar el ratón por encima de la imagen!:
De esta forma, hemos realizado una modificación de código de la siguiente forma:


<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZXEjDIX2CNNWdhH-TUBpzoPgHracQzUmWiyFgvX49mf3kfw-z_3C9IQ252bRWyzWcdpxJqsI7a_tv8Tuk0O_AEQ3WIpWwoQljs9u04hiOXzQNxOP92MPcxBqop3OV3ps-TF_bTrv2Y1I/s1600/nino-y-ordenador.jpg" alt="Foto de un niño empezando a utilizar un ordenador portátil" title="Niño utilizando las TIC" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZXEjDIX2CNNWdhH-TUBpzoPgHracQzUmWiyFgvX49mf3kfw-z_3C9IQ252bRWyzWcdpxJqsI7a_tv8Tuk0O_AEQ3WIpWwoQljs9u04hiOXzQNxOP92MPcxBqop3OV3ps-TF_bTrv2Y1I/s320/nino-y-ordenador.jpg" width="320" /></a></div>
<br />