Correcta utilización de los encabezados

Los encabezados establecen una jerarquía entre los niveles de codificación.

En la hoja de estilo de la plantilla general de Blogger se definen los encabezados y los textos a los que se refiere cada uno de ellos.
Modificando las definiciones de las etiquetas de <h1> <h2> <h3>... en la hoja de estilo establecemos las características de cada uno de ellos.
<h1> define las características del titular del blog
<h2> hace referencia a la fecha de cabecera
<h3> a cada una de las entradas
<h4>  a los comentarios a cada uno de los post

al modificar las características de las etiquetas en la hoja de estilo afecta al estilo del blog como podemos ver en la imagen a continuación:

Tamaño de letra relativo

Es posible que las personas que visitan nuestro blog necesite leer el texto con un tamaño de letra mayor o menor en función de sus necesidades físicas, de percepción o del navegador que utilicen.
Para que el tamaño del texto no sea una barrera, podemos utilizar diferentes métodos que se basan en emplear medidas relativas.
Un ejemplo de medida flexible es la unidad em que toma como referencia el tamaño de la letra por defecto del sistema del usuario.
de manera que un parráfo de 1em mostraría el texto al tamaño por defecto del navegador; 1.5em mostraría el párrafo un 50% mayor que el anterior y 0.9em lo mostraría un 90% menor que el tamaño por defecto.

Blogger utiliza palabras clave a las que se le pueden aplicar porcentajes de manera que consigamos textos así de grandes  y así de pequeños  en la propia entrada, para una alteración de tamaño puntual.

También hemos modificado en la plantilla el tamaño relativo del título del blog.

Líneas horizontales

Una forma de separar los posts es utilizar líneas horizontales.
Para ello podríamos utilizar una imagen e identificarla con su correspondiente texto alternativo de manera que sea interpretada por los lectores de pantalla.
Pero también podemos identificar nuestra imagen en la hoja de estilo como una línea horizontal de manera que los navegadores que puedan mostrar la imagen lo harán así y el reto lo interpretarán como una línea horizontal y la mostrarán como corresponde.


Para mostrar un ejemplo, incluímos el siguiente código en la hoja de estilo para identificar la imagen como barra horizontal:

div.hr {
height: 10px;
background: #fff url(http://www.creatingonline.com/webmaster/free_bars/pinkbar2.gif) no-repeat scroll center;
}
div.hr hr {
display: none;
}

Para separar los posts indicaremos colocaremos la línea con el siguiente código:
<div class="hr">
<hr />
</div>



Y el resultado será el siguiente:

---

Mapas de imagen accesibles

A la hora de crear mapas de imagen accesibles debemos plantearnos dos frentes:
por un lado crear mapas de imagen que sean controlados por el navegador del usuario y no por el del servidor, de manera que el mapa se adapte al tipo de navegador o a la resolución del usuario.

Por otro lado, al ser una imagen deberíamos proporcionar texto alternativo a la imagen y a cada una de las zonas sensibles que lo conformen.

Para ilustrarlo vamos a presentar una imagen de los músculos del cuerpo humano en la que indicaremos algunas de sus partes:

Atajos de teclado

Un atajo de teclado es un conjunto de teclas pulsadas a la vez o una secuencia de ellas que ejecutan una orden previamente definida y que optimizan la experiencia de usuario.
Los atajos de teclado pueden ser definido por el diseñador o por el usuario de la página y resultan muy útiles para las personas que utilizan únicamente el teclado.
Para crear los atajos de teclado con HTML utilizamos el atributo <accesskey>.
Hemos creado un acceso directo a la página de inicio de nuestro blog y otro a nuestra cuenta de correo.

• para el atajo de teclado a la página de inicio insertamos
  <a href="http://pagina.inicio.blog" accesskey="1">
  <$BlogTitle$>
  </a>
• para el atajo a nuestra cuenta de correo insertamos:
  <a href="mailto:aizquierd102@alumno.uned.es" accesskey="9">
  email
  </a>
  
  

Pulsa alt + 9 para enviarme un correo

Uso de acrónimos

Hay veces que estamos tan familiarizados con el uso de determinados acrónimos que no nos damos cuenta de que hay personas que no conocen su significado. De cualquier manera conviene siempre detallar en el documento su desarrollo completo.

Normalmente se resuelve indicándolo entre paréntesis la primera vez que se usa en un texto. Pero existe otra forma fácil para el usuario, utilizando la etiqueta <acronym>. Al pasar el ratón sobre el acrónimo aparecerá una tooltip o cuadro emergente con el texto completo para facilitar su lectura.

Es muy habitual que el acrónimo venga de una expresión o nombre en ingles por lo que tenemos que acordarnos de incluir el atributo lang para que los lectores de pantalla sepan utilizar el lenguaje correcto.

Para indicar que estamos ante un acrónimo y que podemos desplegarlo para ver la versión extendida, podemos indicarlo con un subrayado de línea punteada, para ello hemos indicado en la hoja de estilo con el siguiente código:

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


Para comprobar su uso vamos a ponerlo en marcha en los acrónimos que hemos ido introduciendo a lo largo de los post anteriores.

Texto alternativo

A excepción de los navegadores visuales, el resto de navegadores necesitan una indicación a la hora de encontrarse con una imagen en una página web. Necesitan saber qué contiene esa imagen y para qué sirve.
En ocasiones una imagen es puramente descriptiva o ilustrativa del texto, pero en otras ocasiones tiene una función como un enlace, por ejemplo.

El atributo "alt" para imágenes indica el contenido y la función que tiene la imagen correspondiente.
Insertamos la siguiente imagen en nuestro blog con un enlace a la Agencia Estatal de Meteorología para los interesados en conocer el tiempo de mañana.

En la etiqueta <img> colocamos el atributo "alt" junto a la descripción y lo titulamos para indicar la página a la que vamos a acceder.

Para las imágenes puramente decorativas que aparecen en las páginas web y que no aportan información utilizamos el atributo "alt" seguido de comillas pero vacío de contenido, de manera que el lector de pantalla identifique que hay una imagen pero que no sea necesario leer su contenido.

Listas

Vamos a hacer una lista que sea interpretable como tal tanto por los navegadores visuales, como los navegadores de sólo texto, o los lectores de pantalla.

Para ello podemos utilizar la etiquetados tipos de etiquetas:

1. para crear una lista ordenada
2. para una lista aleatoria

En el caso de que queramos personalizar nuestros iconos de la lista aleatoria, debemos definir en nuestra hoja de estilo la imagen que queremos que aparezca en los navegadores visuales encabezando cada elemento de la lista:

ul.menu {
list-style: url(http://www.gifs.cc/anibul17.gif) disc;
}

A continuación introducimos los elementos de la lista

• Manzana
• Naranja
• Fresa

Tablas de datos

Como ejemplo de una tabla de datos voy a presentar una tabla con los pasos que hemos ido dando hasta ahora y el nivel de dificultad que he ido encontrando en cada uno de ellos.

• Lo primero que hemos hecho es titular la tabla con la etiqueta <caption>
• Luego proporcionamos un pequeño resumen del contenido: Pasos dados hasta el momento para la creación del blog accesible y grado de dificultado encontrado.
• E incluímos los datos de la tabla.

Pasos para un blog accesible

Pasos	1	2	3	4	5	6	7	8	9	10	11	12	13
Dificultad	1	1	3	1	4	1	3	1	1	3	1	1	3

Utilizar correctamente los vínculos

No se recomienda el uso de vínculos realizados con javascript porque no es un lenguaje muy utilizado por los usuarios de Internet.

Los editores de blogs no lo usan, así que una vez más Blogger nos ayuda en la creación de nuestro blog accesible.

A la hora de enlazar una página, es importante que prestemos atención al texto desde el que establecemos el vínculo para que no pierda significado.

También es muy recomendable titular el enlace porque añade una información al usuario sobre la página o el documento que se va a abrir.

Ambas recomendaciones ayudan al usuario en la navegación, le informan de lo que va a suceder y le permiten tomar decisiones.

Para titular un enlace utilizamos el atributo “title” tras la URL enlazada.

Y esto ¿cómo lo leerán los diferentes navegadores? Los navegadores visuales con una información emergente (tooltip) que aparece junto al puntero al situarse sobre el texto del enlace, los lectores de pantalla son capaces de leer las tooltip. Y los navegadores de solo texto pueden mostrar un listado de los vínculos y sus títulos.  

Utilización del color

El color es una característica propia del lenguaje visual, necesita de navegadores gráficos y policromáticos para ser percibido. Si dotamos al color de significado corremos el riesgo de que tanto las personas con deficiencias visuales, como las que utilizan dispositivos monocromos, o los lectores de pantalla no sean capaces de comprender el significado de nuestra página.

Debemos buscar alternativas de manera que el color no sea la única vía de transmisión de una información.

Es cierto que utilizar un código de color que proporcione un significado extra al texto resulta un recurso muy útil y cómodo para el diseñador. No se trata de que renunciemos a su uso, sino que seamos conscientes de que resulta poco útil para una gran cantidad de usuarios y que debemos utilizar códigos alternativos para transmitir la misma información.

Junto a los métodos alternativos de transmisión de la información, (esencial para los lectores de pantalla o los dispositivos monocromáticos) existen otras recomendaciones sobre la utilización del color para las personas con baja visión o con ceguera al color.

• Utilizar un contraste correcto entre el color del texto o forma y el del fondo: se considera que dos colores ofrecen buena visibilidad de color si la diferencia en brillo y color entre ambos es mayor que un intervalo dado. La W3C establece el intervalo > 125 para el brillo de color y > 500 para la diferencia de color.
  
  Una persona con ceguera al color no es capaz de distinguir la figura que aparece en la siguiente imagen:
  
  

  

  
  
  
  En esta frase aparecen palabras en colores diferentes que podrían pasar desapercibidas si hacemos una utilización incorrecta del color
  
  
  Existen herramientas a nuestra disposición para analizar si el contraste que estamos utilizando es visible para la mayoría de las personas con problemas visuales. En esta dirección podemos descargarnos un analizador del contraste de color: http://www.visionaustralia.org.au/info.aspx?page=959"
  existen otros analizadores de color que revisan el contraste de un página introduciendo su URL pero no sé si serán tan fiables, porque analizan únicamente los colores definidos en la hoja de estilo. Uno de ellos es Check my colours
• Permitir a los usuarios configurar los colores para los textos, figuras y fondos utilizando texto real y no integrado en las imágenes.
• Utilizar hojas de estilo que puedan ser definidas por el usuario.

Ubicación del contenido en la página

Cada tipo de lenguaje (en su sentido más extenso, entendido como forma de comunicación) dispone de diferentes recursos para marcar la relevancia de cada información. El lenguaje oral y el musical, por ejemplo cuentan con el volumen, el ritmo o los silencios, el gráfico con los espacios, la ubicación, forma o color, el texto escrito puede recurrir al tamaño, tipografías y color etc.

En una página web o en un blog es esencial encontrar rápidamente la información relevante. Y en una web accesible tenemos que buscar la manera de que esa información se localice con la misma eficacia y rapidez cualquiera que sea el tipo de navegador que lea nuestra información.

Para los navegadores sólo texto y los lectores de pantalla, donde el orden de lectura izquierda-derecha/arriba-abajo es esencial, debemos colocar nuestro contenido de manera que se identifique claramente el contenido principal de la página.
En ellos la ubicación de la barra de navegación puede entorpecer la lectura. Para resolverlo tenemos dos opciones:

1. Ubicar la barra de navegación detrás del contenido principal, de manera que éste sea lo primero que lea el navegador.
   - Utilizando una plantilla en la que la barra del menú vertical de navegación esté a la derecha del contenido. Aquí tanto Blogger como la mayoría de los editores nos ayudan proporcionando modelos de plantillas diferentes.
   - Modificando el código de la plantilla para ubicar la barra de navegación detrás del contenido en la plantilla que hayamos elegido.
   Para modificar este código tendremos que situar el texto de la barra de navegación enmarcado por el siguiente código:
   
   <!-- Begin #sidebar -->texto de la barra de menú <!-- End #sidebar -->
   detrás del texto principal que va enmarcado por el código siguiente:
   <!-- Begin #main --> texto principal <!-- End #main -->
2. Proporcionar un marcador interno que posibilite saltar los menús de navegación, de manera que sea el usuario quien controle el salto al contenido. Habrá que hacerlo de manera que sea también accesible a los usuarios que se manejan únicamente con el teclado.

Las ayudas a la navegación

Las ayudas adicionales a la navegación permiten al visitante acceder mediante un enlace rápido a un post anterior o posterior o al inicio.

En este caso Blogger no ayuda porque su plantilla no permite personalizar la etiqueta <link>
Lo que sí nos permite Blogger es introducir un acceso a la página principal.

Elección del título

Ups! Me adelanté a este paso al hacer la presentación: elegir un título significativo.

Toda página web debería tener un título único y significativo que ayude a cualquier visitante a ubicar lo que va a encontrar en su interior.

El título “Avanzando hacia un blog sin barreras” sirve de descripción y de presentación de las intenciones del blog: ser un camino de aprendizaje para la edición de blogs accesibles.

Una adecuada elección del título es importante porque, en muchas ocasiones, es la primera referencia que nuestros públicos (nuestros lectores) van a tener del blog, y su redacción puede darnos pistas a la hora de acceder a él. Por ello habrá que decidir si elegimos un título descriptivo, divertido, actual, poético, o enigmático para atraer la curiosidad de nuestros públicos.

Os voy a poner unos cuántos ejemplos de nombres de blogs que he encontrado al azar y creo que será fácil deducir su contenido:
Consejos de jardinería, Las horas y los siglos; No somos perfectos,  El blog salmón

Otra razón para cuidar la elección del título es que los motores de búsqueda tipo Google se basan en el título para indexarla y que los lectores de pantalla o cualquier otro dispositivo no gráfico lo primero que ofrecen al lector es su título.

Debemos titular también cada uno de los post precedido del nombre del blog para que sea fácilmente identificable.

¿en qué idioma nos estamos comunicando?

A primera vista parece evidente: si comprendemos lo que estamos leyendo podremos identificar el idioma en el que está escrito.

Pero pensemos un poco más allá. ¿y si quien lee el documento no es directamente una persona sino una máquina? Existen lectores de pantalla o los motores de búsqueda que no identifican el idioma de manera automática. Debemos facilitarles la tarea identificando el idioma que vamos a utilizar de manera general en el cuerpo de texto, como en los casos de fragmentos, referencias o citas en otras lenguas.

Para ello debemos identificar el idioma en el código. La platilla de Blogger nos presenta la siguiente línea de código:

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

en ella aparece por defecto el idioma inglés (“en”) que en nuestro caso modificamos a español (“es”).

En el caso de que queramos introducir citas o referencias en otros idiomas tendremos que utilizar el atributo “lang” en la correspondiente etiqueta.

Indicar del DOCTYPE

El DOCTYPE identifica el lenguaje en el que está escrito el blog, es una descripción de su estructura y sintaxis.

La definición del tipo de documento o DTD describe los elementos (contenido de las etiquetas) la estructura (el orden de las etiquetas en el documento) y su anidamiento.

Comenzar el código identificando el DOCTYPE permite saber al navegador que visita la página el lenguaje con el que se va a establecer la comunicación.

Aquí nos encontramos con uno de esos casos en que Blogger ayuda al editor del blog ya que por defecto comienza su código con la identificación del DOCTYPE

Primeros pasos

Empezamos creando el blog en Blogger, eligiendo el nombre y la URL

¿por que elegimos Blogger? Bueno, en este caso era un requisito de la práctica, pero intuyo que se ha elegido porque facilita la creación de bitácoras accesibles. Según vayamos avanzando iré indicando los pasos en que Blogger nos facilita la tarea y qué tendríamos que hacer en caso de utilizar otro software.

El nombre: Al ser un trabajo de clase he intentado utilizar un nombre lo más descriptivo posible.

Por un lado indica un proyecto: la creación de un blog sin barreras y por otro que se trata de un proceso, un camino que iré recorriendo junto con los que queráis acompañarme.

Presentación: un aprendizaje

Par hacer el mundo más accesible a la diversidad tengo que empezar por hacerme accesible yo misma. Esto supone un cambio de mentalidad, no es un gran esfuerzo, sino un cambio en la forma de mirar a nuestro alrededor.

Y ¿qué mejor manera de hacerme accesible que comunicarme de manera que cualquier persona pueda percibir y comprender lo que digo?

Esta práctica de la asignatura de Diseño para Todos va dirigida a aprender a hacer un blog accesible a todas las personas, cualesquiera que sea sus necesidades de percepción, motoras y/o cognitivas.

Parto de un desconocimiento de las normativas de accesibilidad y de los lenguajes de programación necesarios, pero espero que con la guía de Carlos Egea, profesor de la asignatura y autor del blog Haciendo una bitácora accesible y la ayuda de mis compañeros poder conseguirlo.

Para ello, a lo largo de los post iré indicando los pasos que voy dando en su puesta en marcha y las dificultades con las que me voy encontrando.

Nos ponemos en marcha...