Pasos a Realizar

Paso 21: Verificar la accesibilidad

Este paso no trata de mostrar cómo realizar un análisis de la accesibilidad del sito web. No será necesario hacer una comprobación de la accesibilidad de forma profesional, pero hay que verificar si se ha conseguido el objetivo de hacer una bitácora accesible.

Siguiendo una serie de pasos de verificación rápidos y sencillos, se puede hacer un análisis sobre accesibilidad antes de colocar los contenidos a disposición de todos.


Verificar el Código Fuente



Comprobar que nuestro blog se ajusta a las recomendaciones de W3C sobre HTML. Este procedimiento es completamente fiable, ya que la verificación del código puede ser completamente realizada por una herramienta automática


imagen del la herramienta de validadción del consorcio W3C
Herramienta de validación del W3C. Basta con poner la dirección Web de nuestro blog y, de forma automática, el validador presentará los resultados.


La validación del código HTML hay que hacerla para cada página del blog.


No hay que alarmarse por la cantidad de errores en los códigos que aparece. La mayoría de ellos no tienen nada que ver el contenido del trabajo, sino que se deben al código que introduce el gestor de Blogger de forma automática.  Mientras que no suceda nada raro y alarmante al validar el blog la cosa va bien.


Verificar el Código de las Hojas de Estilos



Comprobar que el código de las hoja de estilo de nuestro blog, también están ajustándose a las recomendaciones de W3C para CSS.


imagen del la herramienta de validadción del código de hojas de estilo Herramienta de validación de las CSS.  Basta con poner la dirección Web de nuestro blog y, de forma automática, el validador presentará los resultados.

El código de la hoja de estilo es analizado tanto si ésta se encuentra en un archivo propio, como si está dentro de la página Web norma. Si hay varias hoja de estilo las aplicadas, habrá que realizar un análisis para cada una de ellas.

 No hay que alarmarse por la cantidad de errores en los códigos que aparece. La mayoría de ellos no tienen nada que ver el contenido del trabajo, sino que se deben al código que introduce el gestor de Blogger de forma automática.


Análisis Automático de los Criterios de Accesibilidad



En este tercer paso se realiza un análisis automático de los criterios de accesibilidad promovidos por W3C en sus WCAG 1.0, elaboradas por grupo WAI. El análisis automático nos permite conocer si hemos cometido errores que se pueden detectar de esta forma y nos recomienda la verificación de otros criterios de forma personal.


imagen del analizadro de contenidos TAW
Para ello se puede utilizar la herramienta conocida con el nombre TAW (Test de Accesibilidad Web)

Se debe realizar el análisis de todas las páginas del blog.

Como muestra la figura en la parte superior derecha, muestra un listado general de errores en las diferentes prioridades de la WCAG 1.0.



imagen del analizadro de contenidos HERA
Otro revisor automático de los criterios de accesibilidad es el HERA.

También hay que realizar el análisis de todas las páginas del blog.

Muestra un resumen de los errores en las diferentes prioridades de la WCAG 1.0.

Una observación importante es que el análisis de la accesibilidad no se puede hacer al 100% de forma automática. Hay muchos criterios cuya revisión tenemos que realizarla de forma personal o manual.


Análisis del Contraste de Color



En el Paso 7 (El uso de los colores), se ha hablado del uso de los colores, W3C ha promovido un algoritmo, muy exigente, para verificar el contraste de colores


imagen que muestra el uso de la herramietna El Analizador de Contraste de Color (en inglés "Colour contrast analyser" CCA), desarrollada por Accessible Information Solutions de NILS, en Australia.

"Se considera que dos colores ofrecen buena visibilidad de color si la diferencia en brillo y la diferencia en color entre ambos es mayor que un intervalo dado." El intervalo que sugiere el W3C es > 125 para el brillo de color y > 500 para la diferencia de color.


Imagen del detalle de selecion del color Los controles de Selección de Color se dividen en dos secciones (primer plano y fondo) y cada una posee tres formas para seleccionar un color con el que probar.



Análisis del blog sin Hojas de Estilos



Al visualizar el sito web (blog) quitando las hojas de estilo se comprueba que todo el contenido de las páginas se comunica correctamente sin la hoja de estilo.


imagen del blog sin con las hojas de estilo desactivadas
La Barra de Herramientas de Accesibilidad Web (AIS) se ha desarrollado para facilitar el examen manual de diversos aspectos de la accesibilidad de las páginas Web usando el navegador web Internet Explorer.

Se instala y se pasa la herramienta AIS desactivando las Hojas de Estilo (CSS) y se verifica que todo el contenido de las páginas del blog se comunica correctamente sin la hoja de estilos.


Análisis de los textos alternativos



Deshabilitar las imágenes en un navegador y comprobar si los textos alternativos están puestos correctamente y son comprensibles. Se puede realizar a través de la herramienta AIS y con el navegador Opera.

imagen del navegador Internet explorer con la herramienta AIS sin imágenes

La herramienta AIS en el navegador Internet Explorer tiene la opción de desactivar las imágenes. Si no se encuentra la etiqueta alt dará un mensaje de error al analiar la página en busca del texto alternativo. En su caso mostrará, si existe, el texto alternativo que haya aplicado el autor.




imagen del navegador opera sin imágenes
El Navegador web Opera facilita una amplia gama de posibilidades para la visualización de las páginas Web. Por defecto tiene seleccionada la opción de mostrar todas las imágenes que presenta la página y ofrece la posibilidad de no mostrar ninguna.  Se dispone de un acceso a las funciones de carga de imágenes y modo de presentación de la hoja de estilos. En su caso mostrará, si existe, el texto alternativo que haya aplicado el autor.


Tanto en Internet Explorrer con AIS, como en Opera, una vez seleccionado la opción de eliminar la carga de imágenes, la página es representada con el texto alternativo que se ha aplicado, como es el caso del logotipo. Las imágenes que sólo están de adorno no muestran el texto ya que no tienen ninguna información añadida.


Comprobar el blog en distintos navegadores



Imagen del blog mostrado en una tableta con un navegador SafariEl blog debe ser comprobado en distintos navegadores web (como Firefox, Internet Explorer, Opera, Safari, u otros) ajustando el navegador o sistema operativo para realizar las comprobaciones de los puntos anteriores.

También es preciso ver y analizar el comportamiento del sitio web en otros dispositivos como tabletas, teléfonos móviles de última generación, etc. Es este caso se muestra el blog representado en un tablet y con el navegador Safari.







Paso 20: Encabezados correctos

Los encabezados se consideran elementos básicos en la navegación y deben  seguir una estructura jerárquica, según el nivel de profundidad sin que se produzcan saltos en los niveles identificados y sin incluir encabezados vacíos.

Los artículos con un volumen de información elevado suelen dividirse en una serie de capítulos, apartados, secciones y párrafos. Estos trozos semánticos de información constituyen la estructura de la página que es usada para navegar por los usuarios de lectores de pantalla. De este modo, pueden acceder de forma más sencilla a la información que necesitan sin tener que esperar a que les lean todo el artículo.

Una página de una bitácora tiene un esquema por niveles que podríamos describir así:
  1. El nivel superior será el propio título de la bitácora.
  2. El segundo nivel sería cada uno de los días en los que colocamos "posts".
  3. El tercer nivel lo ocuparía el título de cada uno de los "post" de cada día.
  4. En el cuarto nivel estaría la sección de "cometarios" para cada "post".

En Blogger, la plantilla principal define en su hoja de estilo la forma en que se presentarán los encabezados y en el cuerpo del contenido a que textos se aplican.

Debemos, por lo tanto, utilizar las etiquetas de encabezado y hacerlo de forma correcta.

¿Cómo hacerlo?



En Blogger al estar situados en el editor del artículo,en su menú se encuentra la opción "Formato", que es un desplegable donde se encuentran los estilos del texto, por defecto se encuentra "Normal". Las opciones que aparecen en el desplegable y se les define para cada formato las siguientes etiquetas:


Tabla que muestra las etiquetas corrrespondientes a los encabezados de los artículos en Blogger
Formato en Blogger Etiquetas HTML

Encabezado

<h2>Encabezado</h2>

Subencabezado

<h3>Subencabezado</h3>

Encabezado Secundario

<h4>Encabezado Secundario</h4>
Normal Normal<br />


Comprobando el código HTML para el título de un artículo o post de este blog, se observa que la hoja de estilos de Blogger ha definido lo siguiente:



<h3 class='post-title entry-title'> Paso 10: Atajos de teclado </h3>

Y siguiendo con las instrucciones anteriores para los encabezados usados en los post de este blog, se usa el formato "Encabezado Secundario".

<h4>&#191;Cómo hacerlo?</h4>




Paso 19: Tamaños de fuente relativos

Esta característica de accesibilidad es indiferente para los navegadores sólo texto, siempre lo mostrarán con el mismo tamaño, y para los lectores de pantalla que se limitan a leer y presentar el contenido de forma oral.

El empleo de las unidades relativas permite redimensionar el texto, lo que facilita el acceso a la información a usuarios con problemas visuales y en general a todos los usuarios, de tal forma que puedan adaptar el tamaño de la fuente a sus preferencias o necesidad


¿Cómo hacerlo?



En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Personalizar”, se abre el editor de la plantilla que Blogger nos facilita para poder seleccionar el tamaño de texto y fondo de todos los elementos que aparecen en el blog seleccionamos  "Avanzado".


imagen con el texto en tamaño más grande imagen con el texto en tamaño normal










En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Editor HTML”. Buscamos la etiqueta  body o el código de los atajos del teclado visto en el Pso 10 (<!-- Atajos de teclado --> ) y colocamos a continuación el siguiene código:



 <!-- Aumentar y disminuir tamaño del texto -->
<script type='text/javascript'>
//<![CDATA[
var tgs = new Array( 'div','td','tr');
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
//]]>
</script>
/* */


Ahora podemos obtar por dos opciones.
  1. Sería añadir en la parte "Diseño" un elemento gadget "HTML/Javascript" con el título "Tamaño del texto".
  2. Y otra opción sería colocarlo dentro de cada artículo o alguna parte del propio código HTML.
En los dos casos hay que insertar en su interior el código siguiente:

  <a href="javascript:ts('body',1)">Aumentar</a> | <a href="javascript:ts('body',-1)">Disminuri</a>

Si no queremos que aparezca texto como: Aumentr | Disminuir. Podemos sustituir esto por imágenes. Este sería el código:

<a href="javascript:ts('body',1)"><img src="URL DE LA IMAGEN DE AUMENTAR TAMAÑO"/></a><a href="javascript:ts('body',-1)"><img src="URL DE LA IMAGEN DE DISMINUIR TAMAÑO"/></a>



Nota:
Antes de salvar los cambios con “Guardar Plantilla”, será conveniente comprobar que no existe ningún error para ello pulsar “Vista Previa”.



Paso 18: Líneas horizontales

Suponga que quiere una división entre sus apuntes. Las líneas horizontales regulares creadas con la etiqueta hr  pueden ser aburridas, con lo que se puede utilizar una imagen como alternativa.

Para las líneas horizontales que permiten separar el contenido, se utiliza el mismo criterio que en el de las imágenes decorativas,  puede hacerse más accesible con la adición de un texto alt apropiado.

<img src="/imagenes/LineaDecorativa.jpg" alt="--" title="">

En el atributo alt es suficiente con poner 2 ó 3 guiones, un lector de pantalla leerá para cada guión la palabra "guión". Esta solución no plantea problemas de accesibilidad, está en contra con la semántica propia del lenguaje de marcado de hipertexto. La solución más correcta será vía hoja de estilo.

Los resultados serán:
  • Todos los navegadores visuales modernos mostrarán la imagen en lugar de la línea horizontal plana normal.
  • Algunos navegadores antiguos, como Nestcape 4, mostrarán una línea horizontal normal.
  • Los navegadores sólo texto siempre ignoran la hoja de estilo, por lo que mostrarán una regla horizontal formada por guiones normales o de subrayado.

¿Cómo hacerlo?


Usamos una etiqueta div sencilla para mostrar la imagen. En nuestro artículo colocaremos el siguiente código en el editor de HTML.

/* Línea como imágen
----------------------------------------------- */
<div style="height:40px;background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGcCbMWe9d3awGmdUBo4w5tej3ZayWxtAnKLGqxgpYFcuyU7nF1tbXa8gwDYcZEPAe5JfNnbyi9PdjqmFHzKEQxeQBXldViJkS99yjTm1Dh0LX6V5TwWEcAFa51ZriarxDe4wZP3vkmHo/s400/lineas_divisorias_03.jpg) no-repeat scroll center;">
<hr style="display:none;" />
</div>

La url es la dirección de la imágen que vamos a poner como viñeta en la lista.




Paso 17: Mapas de imagen accesibles

Los mapas de imágen nos pueden ofrecer mucha información aunque de vez en cuando puede resultar difícil mostrar dicha información de una forma alternativa. Un mapa de imagen es una imagen en la que determinadas zonas (áreas) son enlaces. Existen dos tipos de mapas de imágenes:
  1. Los mapas de imagen de cliente: toda la información necesaria está contenida en la página y por tanto el navegador es capaz de realizar la acción.
  2. Los mapas de imágenes de servidor: en ellos, el navegador envía la posición del ratón al servidor y es el servidor el que evalúa y realiza la acción.


¿Cómo hacerlo?



En Blogger al estar situados en el editor del artículo y insertamos la imagen a través del botón "Insertar Imagen"

Un mapa de imagen en el cliente se define con la etiqueta map y cada una de las zonas activas se define con la etiqueta area. La etiqueta area posee los atributos shape coords (su valor depende del valor de shape), que se emplean para definir la forma geométrica de la zona activa, y el atributo href, que se emplea para indicar la acción asociada:

  • shape="default": define la acción por defecto para toda la imagen.
  • shape="rect": define una región rectangular; el atributo coords contiene las coordenadas de la esquina superior izquierda y de la esquina inferior derecha del rectángulo.
  • shape="circle": define una región circular; el atributo coords contiene las coordenadas del centro del círculo y del radio.
  • shape="poly": define una región poligonal; el atributo coords contiene las coordenadas de cada uno de los puntos que forman el polígono; el último punto tiene que coincidir con el primero para que el polígono se cierre.




<img src="201204210012_p01wesp0.jpg" alt="Seleccione Comunidad o Ciudad Autónoma para más detalle" title="Seleccione Comunidad o Ciudad Autónoma para más detalle" usemap="#map" id="mapa_espanha" />
<map name="map" id="map">
<area href="#maps " coords="184,233,190,237" shape="poly" alt="Andalucía" title="Andalucía" >
<area href="#maps " coords="341,71,341,76 shape="poly" alt="Aragón" title="Aragón" >
<area href="#maps " coords="2,299,26,275" shape="poly" alt="Canarias" title="Canarias" >
<area href="#maps " coords="253,57,267,53" shape="poly" alt="Cantabria" title="Cantabria" >
<area href="#maps " coords="291,167,286,161" shape="poly" alt="Castilla-La Mancha" title="Castilla-La Mancha" >
<area href="#maps " coords="196,75,208,71" shape="poly" alt="Castilla y León" title="Castilla y León" >
<area href="#maps " coords="382,88,377,74" shape="poly" alt="Cataluña" title="Cataluña" >
<area href="#maps " coords="221,309,251,332" shape="rect" alt="Ciudad de Ceuta" title="Ciudad de Ceuta" >
<area href="#maps " coords="283,324,313,345" shape="rect" alt="Ciudad de Melilla" title="Ciudad de Melilla" >
<area href="#maps " coords="252,161,259,150" shape="poly" alt="Comunidad de Madrid" title="Comunidad de Madrid" >
<area href="#maps " coords="317,59,310" shape="poly" alt="Comunidad Foral de Navarra" title="Comunidad Foral de Navarra" >
<area href="#maps " coords="361,142,359,148" shape="poly" alt="Comunitat Valenciana" title="Comunitat Valenciana" >
<area href="#maps " coords="186,162,193,163" shape="poly" alt="Extremadura" title="Extremadura" >
<area href="#maps " coords="136,59,147,56" shape="poly" alt="Galicia" title="Galicia" >
<area href="#maps " coords="392,190,391,204" shape="poly" alt="Illes Balears" title="Illes Balears" >
<area href="#maps " coords="288,101,294,101" shape="poly" alt="La Rioja" title="La Rioja" >
<area href="#maps " coords="280,63,291,55" shape="poly" alt="País Vasco" title="País Vasco" >
<area href="#maps " coords="190,50,207,49" shape="poly" alt="Principado de Asturias" title="Principado de Asturias" >
<area #maps " coords="309,236,316,231" shape="poly" alt="Región de Murcia" title="Región de Murcia" >
</map>


En el detalle del código se puede ver cuál es el texto alternativo empleado para cada zona activa de los mapas de imagen de cliente y, por tanto, comprobar la adecuación de los mismos.

Se han añadido dos cosas:
  • Se ha colocado el atributo alt en la etiqueta img informando a los que no vean la imagen de qué es y para qué sirve.
  • El atributo title proporciona información adicional de forma visual, al pasar el puntero del ratón por la imagen aparecerá un pequeño cuadro emergente junto al puntero.

Paso 16: Atributo «alt» vacío

En determinadas ocasiones las imágenes pueden ser utilizadas como recursos estéticos o para dar formato a la apariencia de nuestra entrada en el blog.

En este caso el atributo alt dentro de la etiqueta img se encontrará vacío, o sea, sin poner texto entre las comillas. Los lectores de pantalla encontrán el atributo y como no contiene nada no dirán nada, así se evita que una imagen pueda de adorno pueda ser identificada en el caso de no encontrar dicho atributo.

Las personas que utilizan navegadores visuales y tienen deshabilitada la carga de imágenes, por el motivo que sea, siempre verán el cuadro de imagen que su navegador muestre por defecto y éste no tendrá texto alternativo.


¿Cómo hacerlo?



En Blogger al estar situados en el editor del artículo y  través del botón "Insertar Imagen" insertamos una imagen decorativa para hacer un borde redondeado a un fondo.




<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4z0H4-mtZuZ1eiI08K7hrFqhnhWZS5JA1Dc9p4u_0CQEeEUZdioOayk9454CaU8bqd110JQuY-Hc4jvNkGozvXcJzsc6ihs1W_6IwiABIlN9KiRVADfbcjbbeYZneH2AjM1UkXOcp4Kk/s1600/esquina.JPG" />

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

Es el elemento de accesibilidad que afecta a mayor número de personas. Con el equivalente textual pueden conocer el contenido de las imágenes y su utilidad.

El equivalente textual de las imágenes se realiza a través del atributo alt dentro de la etiqueta img. Este atributo pretende trasmitir el contenido y la función de la imagen, cuando esta no puede llegar al usuario de forma visual.



¿Cómo hacerlo?



En Blogger al estar situados en el editor del artículo y insertamos la imagen a través del botón "Insertar Imagen"





<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_LM2LAcIyOV9XoeFC1ypcT6oLjQrW6W9_yn2hp9QUQEHjy6juapNAbU2JbhPliK1FfV_lDQdNmkj1XVouOVwumeITjbsMvX05vo2ntfXNbCCiuW38pdlggQT4qT_bOqIm60AD0YcBktM/s200/Foquita.png" /><br />




Tenemos que modificar el código para que nos permita hacerlo accesible para todos. Pensamos qué y para qué está la imagen. Eso es lo que debemos transmitir en el atributo alt y lo tenemos que hacer de la manera más breve y clara que podamos.

Pulsando con el botón derecho del ratón sobre la imagen, aparecerá un menú de edición de la imágen con las opciones de elegir tamaño, alineación, leyenda, propiedades y eliminar. Elegimos "Properties" y aparecerá una ventana para introducir el texto del title y el texto del alt.

Imágen de una cara de bebé


<img alt="Imágen de una cara de bebé" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_LM2LAcIyOV9XoeFC1ypcT6oLjQrW6W9_yn2hp9QUQEHjy6juapNAbU2JbhPliK1FfV_lDQdNmkj1XVouOVwumeITjbsMvX05vo2ntfXNbCCiuW38pdlggQT4qT_bOqIm60AD0YcBktM/s200/Foquita.png" title="Prueba del equivalente textual" /><br />



Se han añadido dos cosas:
  • Se ha colocado el atributo alt en la etiqueta img informando a los que no vean la imagen de qué es y para qué sirve.
  • El atributo title proporciona información adicional de forma visual,al pasar el puntero del ratón por la imagen aparecerá un pequeño cuadro emergente junto al puntero.

Paso 14: Usar listas reales


Las listas, en el código HTML, tienen las siguientes etiquetas para marcarlas:
  • Etiqueta <ul> para las listas aleatorias
Ejemplo uso etiqueta ul
Editor HTML Redactar
<ul>
        <li>Texto 1</li>
        <li>Texto 2</li>
        <li>Texto 3 </li>
</ul>
  • Texto 1
  • Texto 2
  • Texto 3

  • Etiqueta <ol> para las ordenadas.
Ejemplo uso etiqueta ol
Editor HTML Redactar
<ol>
        <li>Texto 1</li>
        <li>Texto 2</li>
        <li>Texto 3 </li>
</ol>
  1. Texto 1
  2. Texto 2
  3. Texto 3


Si deseamos crear una lista más divertida donde usamos una imágen como indicador de la lista, podremos escribir nuestra lista usando marcadores de lista apropiados:


¿Cómo hacerlo?



En Blogger al estar situados en el editor del artículo, seleccionamamos las filas que deseamos crear como listas y pulsando el botón “Listas numeradas” o "Listas con viñetas".

Pero si se quiere colocar una imágen los pasos serían los siguiente4s.En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Editor HTML”. Despues de las definiciones de las constantes, justo antes de la etiqueta ]]></b:skin> sdefine la nueva constane  menuLista.  Deberá quedar como las siguientes líneas de código:



/* Imagne de la lista
----------------------------------------------- */
#menuLista{
  list-style-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ogYVnnos0MHFOYjmyfoWdS5jKuAuwUn98LYQ-q4EC98u18X2cLcSuuIKfWSvBae0dAH_a-8prFQ36SOdakx2Ftqju6en3QfOPHq0s-khXvPeObPqmTpN_eHJ2riZ1n6LWvAjdrveXUw/s1600/icono_lista_II.png");
list-style-type:none;
}


La url es la dirección de la imágen que vamos a poner como viñeta en la lista.
En nuestro artículo insertamos la nueva variable definida en el editor de HTML.


 <ul id="menuLista">
<li>Texto 1</li>
<li>Texto 2</li>
<li>Texto 3</li>
</ul>



Nota:
Antes de salvar los cambios con “Guardar Plantilla”, será conveniente comprobar que no existe ningún error para ello pulsar “Vista Previa”.

Paso 13: Tablas accesibles

Los lectores de pantalla leen el contenido de las tablas en el orden literal que aparece en el código, siendo este su orden lógico, así pues, el usuario de este tipio de herramientas puede perderse en el contenido de la tabla pues lee fila a fila, sin reaccionar el  título de la columna.

Hay dos usos básicos de las tablas en la Web: como tablas de datos y como tablas de maquetación. La finalidad de las tablas de maquetación es para dar forma a la representación, las tablas de datos lo que hacen es presentar información por parrilla.

En este blog he introducido una tabla de maquetación con una sola celda y color de fondo diferente al color de fondo de la página,  para mostrar al usuario que es línea de código lo que se encuentra en el interior. Un ejemplo se muestra en el Paso 5 de este blog y que se muestra a continuación.

<!-- Ayuda a la Navegación -->
<link href='http://blog-accesible.blogspot.com.es/' rel='principal' title='Página principal' />


La tabla de datos es la forma de presentar datos por pantalla en este blog, añadiendo un título en la parte superior. Un ejemplo se muestra en el Paso 9 de este blog y que se muestra  a continuación.

Ejemplos de vínculos con texto bien definidos
Frases que proporcionan los vínculos El navegador muestra la lista de vínculos
Si quieres conocer mi currículum pincha aquí mi currículum
Desde aquí puedes acceder a las fotos de mi familia mi familia
Mis aficiones favoritas las encontrarás aquí Mis aficiones

El marcado HTML es el apropiado y colocado en su sitio para que los lectores de pantalla nevegen por la tabla. Los usuarios pueden ir de celda en celda y el lector les dirá la fila y comuna en que se están encontrando.



¿Cómo hacerlo?




Para que los usuarios pueden ir de celda en celda y el lector les diga la fila y comuna en que se están encontrando, se usa el el atributo “scope”, ya que esta tabla de datos es simple.

<table border="1" cellpadding="10" summary="Esta tabla de datos es un ejemplo de inserción de tablas accesibles. Es una tabla sencilla de datos con el uso de la etiqueta scope">
<caption style="font-size: 120%; font-style: bold;">Ejemplos de vínculos con texto bien definidos</caption>
<tbody>
<tr>
<th scope="col"> Frases que proporcionan los vínculos</th>
<th scope="col"> El navegador muestra la lista de vínculos </th>
</tr>
<tr>
<td>Si quieres conocer mi currículum pincha aquí</td>
<td >mi currículum</td>
</tr>
<tr>
<td>Desde aquí puedes acceder a las fotos de mi familia</td>
<td>mi familia</td>
</tr>
<tr>
<td>Mis aficiones favoritas las encontrarás aquí</td>
<td>Mis aficiones</td>
</tr>
</tbody>
</table>

El scope="col” muestra a los lectores de pantallas y a los usuarios que todo lo que está debajo en la columna se refiere al encabezado a continuación de la etiqueta.

En esta tabla no hay encabezados de filas, en el caso de que hubiese se usa la misma etiqueta con row (scope="row") para indicar al lector de pantalla que todo lo que hay a la derecha del encabezado de la fila se refiere a diccho encabezado.

Se ha proporcionado un título a la tabla con la etiqueta caption además de un resumen con la etiqueta summary para incrementar la comprensión.

<table border="1" cellpadding="10" summary="Esta tabla de datos es un ejemplo de inserción de tablas accesibles. Es una tabla sencilla de datos con el uso de la etiqueta scope">
<caption ">Ejemplos de vínculos con texto bien definidos</caption>
....
</table>


Paso 12: Acrónimos


Los acrónimos y abreviaturas son cada vez más usuales en el lenguaje común, no todo el mundo entiende los que se emplean y son tantos que es bien difícil que se conozcan todos.

Se puede colocar entre paréntesis la descripción completa junto al acrónimo: HTML (Hyper Text Markup Language), pero esta forma puede volverse muy tedioso al estar repetido varias veces el acrónimo en el mismo contenido, es por ello que se hace la extensión del acrónimo la primera vez que aparece y el lector lo interpreta cada vez que aparezca.



¿Cómo hacerlo?



Blogger no permite indicar acrónimos o abreviaturas en el título o en el etiquetado de los artículos, puesto que pinta el elemento en vez de interpretarlo

La posibilidad de dar este tipo de información se realiza mediante la etiqueta .En Blogger al estar situados en el editor del artículo y cuando se necesita introducir un acrónimo por primera vez, se coloca el acrónimo propiamente, como ejemplo HTML, y para incluir todo el desarrollo del acrónimo pulsaremos el botón de "HTML" y buscamos la línea donde se encuentra e incluimos la etiqueta acronym como se muestra a continuación.


<acronym lang="en" title="Hyper Text Markup Language"> HTML</acronym>

HTML

Se observará que al pasar el puntero del ratón por el acrónimo, aparecerá un pequeño cuadro emergente junto al puntero.

La etiqueta acronym lleva dos atributos: title, con el que extendemos el texto, y lang, para avisar a los lectores de pantalla y navegadores por voz que está en otro idioma (no lo se coloca cuando la extensión del acrónimo esté en el mismo idioma que el resto del contenido).



Paso 11: No abrir nuevas ventanas


Abrir nueva ventana es abrir una nueva sesión del navegador para que se muestre la página a la que lleva el enlace que se ha seleccionado. Esta forma de proceder desconcierta a muchos usuarios.

Las personas con problemas cognitivos o aquellas que tienen poco hábito de navegar por la Web o las que no ven su pantalla, no saben que acaban de abrir una nueva ventana y si tratan de regresar, descubren que han perdido el hilo de su navegación y lo deberán encontrar entre las páginas abiertas en su ordenador.

La solución pasa por no abrir páginas nuevas y si se abre una nueva, hay que informar al usuario que el enlace se abrirá en una nueva ventana.



¿Cómo hacerlo?




Caso de no abrir ventana


Este blog  muestra los enlaces en la misma ventana, con lo que no se incluye el atributo "target" en el código HTML de los vínculos, existiendo la posibilidad de volver a la pantalla anterior

Caso de abrir una nueva ventana

En este caso se añadiría el atributo target="_blank" para abrir una nueva ventana o sesión en el navegador, y el atributo title para notifcar al usuario que el enlace aparecerá enotra ventana.

PILGRIM, M. 2002. <a href="http://diveintoaccessibility.info/" target="_blank" title="El documento aparecerá en una nueva ventana de su navegador"><i>Dive Into Accessibility</i></a>. [sitio web]. Dive Into Accessibility.<br />


Paso 10: Atajos de teclado

Un atajo de teclado es una combinación en la pulsación de las teclas que para Windows es Alt más un número o letra del teclado y para Macintosh es Control más el correspondiente número o letra. El efecto es que cuando se utiliza el atajo de el navegador enfocará al lugar donde se haya definido. Esto se consigue con el atributo de HTML accesskey.

Es útil para las personas que navegan con el teclado, ya sea porque utilizan lector de pantalla o porque no puedan utilizar el ratón u otro dispositivo apuntador.



¿Cómo hacerlo?



En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Editor HTML”. Buscamos $BlogTitle  normalmente al comienzo de la etiqueta  body. Si no está colocado en una etiqueta <a> le colocaremos una que nos lleve a nuestra página principal de la bitácora. Deberá quedar como las siguientes líneas de código:




<!-- Atajos de teclado -->
<a accesskey='0' href='http://blog-accesible.blogspot.com.es/p/paso-21-verificar-la-accesibilidad.html'/>
<a accesskey='1' href='http://blog-accesible.blogspot.com.es/'/>
<a accesskey='2' href='http://blog-accesible.blogspot.com.es/p/indice.html'/>
 <a accesskey='9' href='mailto:mati@webmati.es'/>



Tecla 0: Página sobre accesibilidad, atajos de teclado y personalización del navegador.
Tecla 1: Página de inicio
Tecla 2: Página del Indide del blog
Tecla 9: Coreo al administrador de blog


Nota:
Antes de salvar los cambios con “Guardar Plantilla”, será conveniente comprobar que no existe ningún error para ello pulsar “Vista Previa”.


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


Los vínculos o enlaces para una página Web es lo más esencial ya que permite realizar una Narrativa Digital a través de los hipervínculos que nos permite realizar. Por lo tanto, es importante que los usuarios conozcan para qué sirven los enlaces en un sitio, o más concretamente, que estén bien definidos.

Hay dos factores a tener en cuenta al realizar un vítulo o enlace en el sitio web:

El primer factor es el texto que se escoge donde insertar el vínculo. Esto es importante, ya que algunos navegadores proporcionan al usuario un listado de los enlaces del sitio visitado. Hay que estar seguros en que texto colocarlo para hacer más comprensible el enlace.

Para entenderlo mejor en las dos siguientes tablas se han colocado las mismas frases, en la primera el texto está más definido y lleva a confusión la lista de enlaces, mientras que en la segunda tabla están mejor definidas.

Ejemplos de vínculos con texto mal definidos
Frases que proporcionan los vínculos El navegador muestra la lista de vínculos
Si quieres conocer mi currículum pincha aquí pincha aquí
Desde aquí puedes acceder a las fotos de mi familia aquí
Mis aficiones favoritas las encontrarás aquí aquí


Este listado carece de utilidad para navegar, ya que desconocemos que hay detrás de "aquí". Ese mismo texto sería más útil con los enlaces colocados en otro lugar


Ejemplos de vínculos con texto bien definidos
Frases que proporcionan los vínculos El navegador muestra la lista de vínculos
Si quieres conocer mi currículum pincha aquí mi currículum
Desde aquí puedes acceder a las fotos de mi familia mi familia
Mis aficiones favoritas las encontrarás aquí Mis aficiones


La diferencia entre una tabla y otra es dónde se ha colocado el enlace.

El segundo factor que hace más comprensible los enlaces es el título y esto se hace en HTML con el atributo title, el cual se coloca con la dirección del enlace.  En el caso de este blog se encuentra el siguen te ejemplo.


PILGRIM, M. 2002. <a href="http://diveintoaccessibility.info/" title="Documento disponible en el sitio web del autor"><i>Dive Into Accessibility</i></a>. [sitio web]. Dive Into Accessibility.<br />


Colocar títulos a los enlaces, hace más comprensibles el uso y destino de los mismos para mucha gente, principalmente para gente con problemas de comprensión, y añade información para el general de los usuarios. Un buen ejemplo seria en el texto usado en los menús de navegación, son los enlaces a otras páginas, que se suele utilizar unas pocas palabras sencillas, con lo que no trasmite la suficiente información y con esta forma de titular se puede ampliar la información.



¿Cómo hacerlo?



En Blogger al estar situados en el editor del artículo y estamos realizando el estilo de la "Entrada", seleccionamamos el texto que deseamos como encargado de llevar el enlace y pulsando el botón “Enlace”, se abre el editor de enlace que Blogger nos facilita para poder cambiar el texto previamente seleccionado e insertar la dirección web, como muestra la figura siguiente, seleccionar "Aceptar" para salvar los cambios.


imagen que muestra la ventana para editor de enlace de Blogger


Con esto lo que se ha conseguido es insertar el enlace a texto deseado, para incluir el título hay que pulsar el botón de "HTML" y buscar la línea donde se encuentra el texto anterior selecionado, e incluir el atributo title con el título después del enlace como se muestra a continuación.


PILGRIM, M. 2002. <a href="http://diveintoaccessibility.info/" title="Documento disponible en el sitio web del autor"><i>Dive Into Accessibility</i></a>. [sitio web]. Dive Into Accessibility.<br />


Pulsando el botón "Actualizar" y comprobar en nuestro el blog el cambio se observará que al pasar el puntero del ratón por el texto que contiene el vínculo o enlace, aparecerá un pequeño cuadro emergente junto al puntero.

Imagen que muestra un ejemplo del uso de la etiqueta title


Paso 8: Vínculos reales


Algunos usuarios de Internet no utilizan JavaScript, ya que son pseudo-vínculos que ejecutan un trozo de código cuando se pincha sobre ellos, por seguridad ante posibles intromisiones en su sistema, o por que los navegadores no lo soportan.

También hay que tener en cuenta que buscadores como Google, no pueden indexar los enlaces en JavaScript, ya que no lo ejecutan.



¿Cómo hacerlo?



Solo hay un elemento javascrpt definido por defecto por el Blogger.
<script type='text/javascript'>


Paso 7: El uso de los colores

La norma general es usar el color de forma segura. La manera de hacerlo es asegurarse de que no trasmitimos información exclusivamente a través del color.

El problema es que entre los visitantes al blog hay personas que no ven los colores o los perciben de forma incorrecta. Si sólo se pone un color como pista estas personas no lo apreciarán.

Los vínculos deben quedar claramente perceptibles para los visitantes y esto puede afectar a todos. La presentación de vínculos exclusivamente mediante el cambio de color puede suponer un problema para algunos usuarios que al pasar sobre ellos el cursor del ratón o al colocar el foco sobre ellos mediante el teclado no perciben este cambio. Un ejemplo lo tenemos aquí:

  1. Este vínculo está subrayado y en azul, que es el comportamiento por defecto.
  2. Este vínculo está coloreado y en negrita, usando estilos de nuestra hoja.
  3. Este vínculo sólo está coloreado, también usando estilos de nuestra hoja.

La primera frase no presenta problemas. Una persona con problemas de visión para los colores, como el daltonismo, verá el color azul y tiene más pistas mediante el subrayado. La segunda frase pierde el color rojo, pero sigue dando una pista con la letra negrita que resalta en el texto. Sin embargo, la tercera frase pierde el color rojo y no da ninguna pista del vínculo para quien tenga ceguera para el color rojo.

Otro problema que suele dar el uso de colores es la falta de contraste entre el fondo y la forma. Esto rige tanto para el texto como para las imágenes (sobre todo si éstas contienen texto).


¿Cómo hacerlo?



En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Personalizar”, se abre el editor de la plantilla que Blogger nos facilita para poder seleccionar el color de texto y fondo de todos los elementos que aparecen en el blog seleccionamos  "Avanzado".

El W3C ha recomendado un algoritmo que nos puede ser útil para saber si el contraste de los colores que usamos es el adecuado. En función de ese algoritmo se han desarrollado algunas herramientas que nos pueden ayudar a aplicarlo.

El Analizador de Contraste de Color (en inglés "Colour contrast analyser" CCA), desarrollada por Accessible Information Solutions de NILS, en Australia.

Imagen mostrando el uso de la herramienta analizador de contrase en este blog
>






Paso 6: Colocar primero el contenido principal

Las personas que navegan por la Web con navegadores visuales, direigen la mirada al contenido principal de la página, sin que la colocación de la barra de navegación de la Web visitada afecte para nada. Es indiferente que esté de forma horizontal o vertical, a la derecha o a la izquierda. Pero esto no es indiferente para las personas que navegan con lectores de pantalla, navegadores sólo texto o con dispositivos de salida Braille. Para ellos una barra de navegación colocada antes del contenido principal cada vez que visitan una página del sito Web, en este caso el blog, tendrán que escucharlo otra vez hasta llegar al contenido principal.

Por ello, a la hora de hacer una bitácora accesible, se puede optar por varias  fórmulas, pero en ese caso se opta por una solución más cómoda y sencilla, que es elegir una plantilla prediseñada que muestre el menú de navegación en vertical a la derecha.


¿Cómo hacerlo?



De todas las plantillas que ofrece Blogger se escoge la prediseñada que muestre el menú de navegación en vertical a la derecha y coloca primero el contenido principal.

En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Personalizar”, se abre el editor de la plantilla que Blogger nos facilita para poder seleccionar la posición de los post en el blog seleccionamos  "Diseño".

Imágen del editor de la plantilla

Paso 5: Ayudas adicionales a la navegación

Estas ayudas se realizan con motivo de proporcionar ayuda a los navegantes, dando la posibilidad de ir rápidamente a la página principal, anterior o posterior

La plantilla principal de Blogger no permite controlar la posibilidad de realizar ayudas a la navegación para ir a la página anterior y posterior., la plantilla ya tiene estos vículos con el texto "Entrada más Reciente" y "Entrada antigua".

Nos tendremos que conformar con dar la posibilidad de proporcionar un acceso rápido a la página principal.


¿Cómo hacerlo?



En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Editor HTML”.

 Justo debajo del  <head> introducimos líneas de código como estas:


<!-- Ayuda a la Navegación -->
<link href='http://blog-accesible.blogspot.com.es/' rel='principal' title='Página principal' />


Posibilidad de ir a la pantalla principal con un enalce a esta.


Nota:

Antes de salvar los cambios con “Guardar Plantilla”, será conveniente comprobar que no existe ningún error para ello pulsar “Vista Previa”.

Paso 4: Elegir un título significativo

Toda página Web debe tener un título único y significativo.

Colocar títulos significativos a nuestras páginas beneficia a los navegantes con lectores de pantalla, ya que lo primero que éstos hacen es leer ese título. Pero también a los usuarios de navegadores sólo texto o con dispositivos de lectura Braille, que listan las páginas visitadas utilizando su título. A las personas con dificultades de comprensión también les reporta beneficios, ya que con una sola mirada ubican el contenido de la página entre otras que puedan tener abiertas. Los robots de búsqueda también utilizan el contenido de ese título de página para indexarlas.


¿Cómo hacerlo?



Para la página principal se puede elegir como título el mismo que tiene el blog, pero para el resto sería recomendable elegir un título que identificara su finalidad o contenido.

  • Para la página principal se elige como título el mismo que tiene todo el sitio.Blogger realiza este trabajo por nosotros, ya que para titular la página de inicio utiliza el nombre de nuestra bitácora. nos encontramos la línea del título después de la etiqueta <head>:
    <title>Hacer una Bitácora Accesible en Blogger.com</title>

  • Para el resto se elige un título que identificara su finalidad o contenido. En este caso de este blog, ese elige para el agrupamiento de páginas la combinación del título "Paso * número que corresponde al paso".

Paso 3: Identificar el idioma


El indicar el idioma informa a los navegadores que nos visitan que lenguaje es el usado en los contenidos del blog. Hace que los programas lectores de pantalla que usan las personas ciegas, podrán pronunciar las palabras correctamente al leer en voz alta el contenido del documento.

También los buscadores del tipo Google, que indexan las páginas que exploran por el idioma en que decimos que están escritos.


¿Cómo hacerlo?



En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Editor HTML”. Justo debajo del DOCTYPE encontraremos una línea de código como esta:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
 xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>


Ahora para el idioma español incluimos:

xml:lang="es" lang="es"


quedando la línea como sigue ...

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
 xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr
xml:lang="es" lang="es"'>


Nota:

Antes de salvar los cambios con “Guardar Plantilla”, será conveniente comprobar que no existe ningún error para ello pulsar “Vista Previa”.

Paso 2: Elegir un DOCTYPE


Primero habría que preguntarse ¿Que es el DOCTYPE?
El DOCTYPE es la forma que tiene nuestro sito Web, en este caso el blog, de decirle a cualquier navegador web que realiza la visita, que formato de documento tiene para que éste pueda saber como entenderse, ya que las funciones del navegador dependen de que la página visitada se presente correctamente, identificándose con el DOCTYPE correspondiente a su codificación. Además debe ser el primer elemento que abra un documento, como indica el consorcio W3C, consorcio internacional que se ocupa de normalizar el uso del HTML.


¿Cómo hacerlo?



En Blogger editamos la plantilla principal, seleccionando la solapa "Plantilla" del editor y pulsando el botón “Editor HTML” podemos ver que las primeras líneas de código fuente son:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>

Y debemos añadir ...



<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Nota:

Antes de salvar los cambios con “Guardar Plantilla”, será conveniente comprobar que no existe ningún error para ello pulsar “Vista Previa”.

Paso 1.- ¿Para quién es la accesibilidad Web?

El trabajo en este blog tiene como objetivo que su contenido sea accesible a todas las personas, luego el sitio web se realiza pensando en el diseño para todos.

Esto supone que el grupo de personas al que va dirigida son personas con problemas visuales, personas con dificultades auditivas, personas con dificulatades motrices, personas con problemas o dificultades de aprendizaje, o sea, todos los sectores.

El grupo más evidente es el de personas con ceguera, ellos acceden al contenido a través del oído, mediante lectores de pantalla, o por el tacto, con sus dispositivos de salida Braille, que les leen el contenido en pantalla. Las imágenes, los iconos y demás elementos no textuales carecen de elementos que puedan implementarlos de forma razonable para las personas con ceguera, por lo tanto habrá convertir el contenido visual no textual para que pueda llegar a ellos. 

El grupo de personas que tienen problemas de agudeza visual, necesitan ampliar el contenido de la página Web con los recursos del navegador o mediante programas magnificadores de pantalla. Son capaces de ver el contenido pero, si las letras o imágenes no están correctamente diseñadas para poder ser ampliadas, tendrán problemas para captarlo.

Las personas con ceguera de color (daltonismo), no distinguen determinados cambios en el color, por lo que la información que se transmita mediante cambios de color no los podrá percibir. Otro típico problema con los colores es el contraste, un texto o una imagen que contraste poco con su fondo pueden no ser percibidas.

Las personas con dificultades motrices en sus manos también pueden encontrar problemas para navegar por la web si no se diseña de tal manera que permita la navegación mediante teclado, esto se consigue definiendo atajos de teclado para acceder a los bloques o lugares destacados del contenido de la Web.

Las personas con dificultades auditivas o sordera tendrán problemas con los contenidos sonoros, si estos no van provistos de una alternativa visual.

También las personas con dificultades de aprendizaje o con discapacidades intelectuales encuentran obstáculos para navegar por la Web. Necesitan contenidos claros y ayudas visuales con iconos claros y explícitos de las funciones que cumplen.