Presentación

Esta entrada es un intento de orientar el contenido de este blog.

Es una práctica del módulo "Diseño para tod@s" del Programa Modular en Tecnologías Digitales y Sociedad del Conocimiento" impartido por la UNED, y llevado a cabo por el Profesor Carlos Egea García.
Consiste en una serie de pasos básicos para construir blog accesibles para tod@s.

Según Blogger la entrada primera (que sería nuestro paso número 1 se encuentra oculta) y el modo de acceder a ella es, pinchando en el menú de la derecha en ARCHIVO marzo 2011 y bajando el cursor hasta el final, donde aparece con el título ¿Accesibilidad para qué y para quién? y de ahí se puede ir subiendo. Esto nos es ajeno, dado que es Blogger quién estipuló el orden de las entradas de esta forma.  Además el menú principal, muestra tan solo las últimas 10 entradas, esto se debe a que es una plantilla antigua de todas las que tiene Blogger, recomendada para aprender sobre lenguaje HTML de forma sencilla.

Comentar que se han incluido Atajos de teclado como se explica en la entrada que habla de ello. Por tanto si se pulsan las Teclas "Alt + 1" y después se da "intro" se accederá a la página principal.  También si se pulsa "Alt + 9" y después se da "intro" se abrirá un programa de correo electrónico para ponerse en contacto conmigo.

Sin más, deseo ante todo, que se pueda acceder de la forma más cómoda posible. Y que disculpen los pasos no conseguidos y los fallos y errores no corregidos aún.

Saludos Ana

21 Verificar la Accesibilidad

Algunos consejos para verificar la web:

Ver si nuestro código es accesible, en:
http://validator.w3c.org/
Una vez comprobado me salen 86 errores y 35 avisos, (impresionante) en dicha página se van detallando los lugares del código donde se encuentran los fallos

Comprobar las hojas de estilo con:
http://jigsaw.w3.org/css-validator/
Me dice que tengo un error  en la linea 23  #leftcontent   donde me comenta que la propiedad _margin-top no existe: 30px 30px
Y una Advertencia o aviso que está en la línea 107 #descripción y me dice lo siguiente:
Los nombres de familias que contengan espacios en blanco deben entrecomillarse. Si no se hace, cualquier espacio en blanco anterior o posterior al nombre será ignorado y cualquier secuencia de espacios en blanco dentro del nombre será convertida a un único espacio.


Analicemos los criterios de Accesibilidad promovidos por la W3C.
Con la siguiente herramienta en castellano:
http://usuarios.discapnet.es/disweb2000/WCAG2003/wcag10/WAI-WEBCONTENT-19990505_es.html

Analicemos el contraste de colores descargándonos gratuitamente
 el siguiente programa en:
http://www.nils.org.au/ais/web/resources/contrast_anlyser/versions/es/

Por lo que a mí respecta me salen muchos errores, !! Muchísimos ¡¡ he comprobado en el foro que es normal, pues en muchos casos se debe a el mismo editor de blogger al que no se tiene acceso. Con todo me quedo revisando aquellos que puedo cambiar

20 Encabezados correctos

Así a simple vista parece que carecen de importancia, pero en accesibilidad hay y existen unos criterios que siguen por ejemplo lectores de pantalla como algunos navegadores, criterios digo, de búsqueda y de congruencia en las etiquetas de marcado, según su encabezado y el tamaño de éste. Hay distintos niveles con distintas etiquetas.

El primer nivel . Etiqueta "h1".
El Segundo nivel. Etiqueta "h2"
El Tercer nivel . Etiqueta "h3"
El Cuarto nivel . Etiqueta  "h4"
El Quinto nivel.  Etiqueta  "h5"

Parece obvio pero de lo que se trata es, de que no se nos salte un nivel con una etiqueta que no corresponda al encabezado que se edite, o lo que es lo mismo seguir la lógica del anterior encabezado y la etiqueta utilizada.  Por ejemplo:  si en el encabezado de los títulos hemos utilizado la etiqueta h2 no deberíamos poner al siguiente subtitulo, en ese apartado, ni una etiqueta h1 (es evidente) pero tampoco una h2 ni una h4 pues podría dar lugar a perdida para algunos lectores de pantalla como ya he comentado.

Por mi parte compruebo que bloguer al editar el los titulos con el editor propio los tenga bien definidos en la hoja de estilo.

19 Tamaño de fuente

Es de suma importancia el tamaño de la fuente y pienso que no se le da la que merece. La mayoría de los sitios tienen una letras sumamente pequeñas y lo peor es que son valores absolutos o pixeles marcados fijos. Esto puede ser un tremendo error pues impide que se le pueda dar un aumento de tamaño tanto a las letras como a la pantalla.
Reviso la plantilla base y compruebo que Blogger trabaja con porcentajes, que serían los valores relativos más fáciles con los que trabajar y no perjudican el objetivo de este blog, la accesiblidad.
ejemplos:

#blog-title {
  margin:5px 5px 0;
  padding:20px 20px .25em;
  border:1px solid #eee;
  border-width:1px 1px 0;
  font-size:200%;
  line-height:1.2em;
  font-weight:normal;
  color:#6O6;
  text-transform:uppercase;
  letter-spacing:.2em;
  }

.post-title {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:#c60;
  }

Por lo tanto no modifico ni pongo nada.Pero sí me permito el probar con los atributos "span style="font-size:180%" el texto en grande y "span style="font-size:85% el pequeño:

Texto en grande
Y este en pequeño

18 Línea horizontales decorativas

Podemos conseguir que el aspecto del blog tenga un toque diferente haciendo que las líneas separatorias sean por ejemplo imágenes.

Para hacerlo bien hemos de recurrir a las CSS las hojas de estilo en el que incluiremos el siguiente código:

div.hr {
height: 25px;
background:url(http://www.marcodigital.com/imagenes/pieses.gif);
}

Una vez incluida nustra hoja de estilo con el tamaño de la imagen en "height" y con la dirección donde se aloja dicha imagen en "background-image:" ya podríamos poner nuestra linea en el código fuente añadiendo: (div class="hr")(/div)(/hr /)

Donde ya sabemos que los paréntesis son el signo de mayor y menor.
que si yo lo edito queda del modo siguiente:

17 Mapa de imágenes

Sinceramente si se trata de hacer una bitácora accesible los mapas de imagen, que son accesos a distintos sitios dentro de una misma imagen, no es muy aconsejable, accesibles no son, ya que suponen para los lectores de pantalla y para otros dispositivos de ayuda, francas dificultades. Por tanto no se recomienda, en caso de hacerlo si interesa tener en cuenta lo siguiente:

Crear mapas de imagen para usuarios, con la etiqueta "usemap" con lo que se avisa de que el/la usuari@ tiene el control.
Dar alternativas textuales tanto a la imagen en sí como a las distintas zonas que contenga.



Yo de momento estoy teniendo serios problemas para conseguirlo, he de estudiar con detenimineto y claridad qué ocurre. De momento la elección de la foto no es la más correcta pues no tiene relación con la intención o la invitación a que sigas estudiando, y lo segundo no están definidos en absoluto las zonas sensibles para enlazar. Me quedo analizando qué pasa y buscando la solución inmediata.

16 Texto para las imágenes

Es uno de los atributos más conocido en la accesibilidad, supone una iformación adicional que se le da a la imagen en forma de texto, de modo que cuando se pasa el cursor por encima, sale un cuadro emergente contándonos de qué trata, e incluso en el caso de que ésta nos lleve algún enlace también debemos avisarlo. Por ejemplo en la siguiente imagen saldrá el cuadro emergende explicando la foto, esto está conseguido incluyendo alt="foto persona apoyada en pared donde muchas flechas pintadas le apuntan" dentro dela etiqueta, "img":

También podemos encontrarnos con imágenes decorativas que no han de mostrar ningun texto o información para ello nos valemos del atributo Alt="" pero vacio, de este modo los lectores de pantalla pasaran por ella y leeran imagen entendiendose que no hay imformación significativa.

15 Listas

Nuestra primera práctica sería con las mas sencillas de las listas los típico puntos negros sin ordenar, utilizando para ello la etiqueta "ul"

• Primer plato: Ensalada
• Segundo plato: Pollo al limón
• Tercer plato: Helado o yogur

Luego probamos con las listas ordenadas con números, para ello utlizaremos pues la etiqueta "ol":

1. Primer plato: Lentejas
2. Segundo plato: Solomillo
3. Tercer plato: Fruta del tiempo

Intentémoslo ahora con algo más personalizado (he de añadir que si no fuera por las ayudas del foro de la plataforma donde estudio no no hubiera conseguido):

• Primer plato: Sopa de marisco
• Segundo plato: Merluza a la romana
• Tercer plato: ¡¡SORPRESA!!

14 Tablas

Las tablas para su mayor accesiblidad han de se de datos no de maquetación ya que éstas suelen dificultar su lectura y el acceso a su contenido por los lectores de pantalla.
Hay varias recomendaciones interesantes en nuestra tabla. Por un lado darle un título a nuestra tabla con la etiqueta "caption". Por otro proporcionar un resumen para las tablas conseguido mediante la etiqueta "summary" y por último utilizar unos encabezados correctos sustituyendo la etiqueta "td" de los encabezados (ojo en nuestro caso los días de la semana nada más) por la etiqueta "th". De esta forma conseguimos una muy sencilla tabla accesible eso sí.

Marzo 2011

Lunes	Martes	Miércoles	Jueves	Viernes	Sábado	Domingo
0	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	ENTREGA	24	25	26	27
28	29	30	31

13 Acrónimos

Los acrónimos son siglas que se llagan a pronunciar como palabras. Un ejemplo de ellas las llavamos añadiendo constantemente en los distintos apartados de este blog. Por ejemplo en la entrada d elos vínculos utilizo varios acrónimos y explongo entre paréntesis lo que significan:

(...) Sin embargo es de suma importancia saber que no son recomendables, tanto por el profesor Carlos Egea, como por la WAI (Web Accessibility Iniciative) del Consorcio Mundial de Web llamado W3C (Word Wilde Web Consortium). Los motivos son varios (...)

Resulta dificultoso y egorroso explicar entre paréntesis constantemente lo que significa, por tanto un truco que nos proponen es añadir la etiqueta "acronym" a dichas siglas.

(...)Sin embargo es de suma importancia saber que no son recomendables, tanto por el profesor Carlos Egea, como por la WAI del W3C. los motivos son varios (...)

De este modo observamos que al poner el cursor encima de las siglas o acrónimos sale un cuadro emergente diciendo de que se trata.

De igual modo si incluimos en la hoja de estilos de nuestra plantilla base dentro de la etiqueta "head" lo siguiente:
acronym {
border-bottom: 1px dotted #000000;
}
Se señalaran con un subrayado de puntitos todos los acrónimos etiquetados.

12 No abrir ventanas nuevas

Porqué, pues por que supone un engorro para los navegadores que tienen lectores de pantalla y para algunas personas con dificultades de distintas índoles.
Para ello eliminaremos de las etiquetas de enlace el atributo  “targer=”_blank”. Revisando el código fuente de la plantilla observo que no encuentro dicho atributo, después de  ojear alguno de los blog de mis compañeros compruebo que Blogger no utiliza dicho atributo con lo cual no es necesario tocar nada.

11 Atajos

Llamamos atajos de teclado a la combinación de teclas para acceder de forma rápida algún contenido deseado, por ejemplo en Windows es la tecla Alt y un numero o letra a la vez o la tecla Ctrl y un numero o letra correspondiente, por ejemplo yo uso mucho “Ctrl Z” para borrar la última acción. Para personas con dificultades motoras o que necesitan lectores de pantalla les es útil el que nosotr@s hayamos incluido el atributo “ accesskey” que nos define donde nos lleva el atajo, y con ello nos presentaremos en el momento mismo de la pulsación de las teclas.
Vamos hacer una prueba, para regresar a la página principal de este intento de bitácora, hemos de añadir a la plantilla del código y justo en la etiqueta <body> la siguiente línea:
body <a href="http://comohacerwebaccesibles.blogspot.com/" accesskey="1"><$BlogTitle$></a>
Y ahora si ustedes prueban a ir a cualquiera de las entradas del blog y pulsan “Alt+1” a la vez y sueltan y luego dan a “Intro” deberían de presentarse en la página principal.
¡ Adelante inténtenlo !

10 Los vínculos

Por un lado:
Son muchos los sitios Web que utilizan el javascript como método de enlace a vínculos. Sin embargo es de suma importancia saber que no son recomendables, tanto por el profesor Carlos Egea, como por la WAI (Web Accessibility Iniciative) del Consorcio Mundial de Web W3C (Word Wilde Web Consortium).  Los motivos son varios, puede que por seguridad, por el soporte o por no poder ser ejecutados o indexados como Google, por ejemplo.
Reviso el código, observando que Blogger no trabaja con javascript por lo tanto no modifico ni añado nada.
Y por otro lado:
No debemos caer en el error de señalar los vínculos con el famoso “pincha aquí”  pues no da información adicional del enlace en cuestión y algunos navegadores muestran listados de vínculos que incluye la página y no sabríamos a qué se refiere exactamente dicho “pincha aquí”. De modo que es aconsejable que el enlace especifique ya en la palabra donde nos va a llevar.
Si bien es cierto, si los ponemos títulos, ni que decir tiene que el aumento de información es mucho más notable, facilitando su comprensión para el acceso. Esto lo conseguimos añadiendo el atributo “title” al codigo fuente, veamos un ejemplo:
            Así sería el enlace
Para verificar la accesibilidad te propongo el siguiente enlace de la <a href=”http://validator.w3.org”> W3C</a>
            Y así sería añadiendole el “title”:
<a href=”http://validator.w3.org” title=”accede a la validación de accesibilidad de la Word Wilde Web Corsortium” > W3C</a>

             Y así se vería en la página:

Para verificar la accesibilidad te propongo el siguiente enlace de la”W3C

De esta forma a los usuarios le aparece un cuadro emergente con la información aporada cuando pasa el puntero del ratón.

9 Colores para tod@s

Hay que tener en cuenta que si no existe un buen contraste entre el fondo y las letras o la información que exponemos, es posible que muchos de los navegantes de nuestra Web no vean bien el contenido.  Por poner un ejemplo cuando hay un documental o un video la forma más eficiente de que se vea no es sólo con las letras de colores llamativos como el amarillo, sino que éstas letras descansen en un fondo oscuro o contrastable con ellas.
Por otro lado en la mayoría de los sitios cuando hay enlaces los señalan con colores. Tener presente qué color vamos a utilizar y qué significa cada color (que ya está visitado por ejemplo o que no se encuetra activo)  Pero sobre todo, lo importante es avisar de distintas formas el enlace en cuestión, para que personas con problemas de visión a los colores no pasen desapercibidos dichos enlaces para ellos.
¿Cómo lo hacemos más fácil? pues  añadimos a la plantilla base (Diseño o personalizar, editar en HTML,) y buscamos  dentro de la etiqueta <body> la hoja de estilo que lo especifique en vínculo o , en el libro de Carlos Egea “Diseño Web para tod@s I. Accesibilidad al contenido en las Web.” Icaria editorial. Nos aconseja que añadamos lo siguiente (lo que está en negrita):
 body {
  background:#ffffff;
  margin:0;
  padding:40px 20px;
  font:x-small Georgia,Serif;
  text-align:center;
  color:#333333;
  font-size/* */:/**/small;
  font-size: /**/small;
  }
a  {
color:#3333FF; /* el típico color azul de los vínculos, pero podemos usar cualquier otro */
text-decoration:underline; /* para que aparezca subrayado */
font-weight:bold; /* para que aparezca en negrita */
}
a:link {
  color:#58a;
  text-decoration:none;
  }
a:visited {
  color:#969;
  text-decoration:none;
  }
a:hover {
  color:#c60;
  text-decoration:underline;
  }
a img {
  border-width:0;
  }
Una vez realizado este cambio en la plantilla, nos descargamos esta herramienta http://technosite.es/descargas/cca_20_es.zip
y miramos en este enlace su manejo y utilización
http://www.maestrosdelweb.com/editorial/accesiblecolor/
ya que nos puede ayudar sobremanera para hacer una evaluación de contraste de colores. Yo en mi caso por ejemplo, despues de utilizarla he llevado a cabo los cambios en el fondo(background:#ffffff;) y en el color de la letra (color:#333333;) con la intención de conseguir un mayor contraste.

8 Colocar el contenido principal

Resulta curioso que cuando no padecemos ninguna discapacidad, como puede ser la visual no nos damos cuenta de la dificultad de lectura que algunos lectores de pantalla pueden tener a la hora de navegar por una página.
 Casi en todas las páginas Web el contenido principal está en el centro de la ventana o página,  como por ejemplo en este blog, lo que si hay que tener en cuenta es que la barra de navegación de todo el blog. se encuentre a la derecha y en vertical pues de esa forma, un lector de pantalla no ha de leer toda la barra para acceder al contenido.
Lo más sencillo es elegir una plantilla que ya disponga la barra de menú de navegación a la derecha y así nos evitamos llevar a cabo algunos cambios que se pueden hacer si la quisiéramos en el lado izquierdo o arriba. Siendo uno de ellos, el “salto de barra de navegación”  por ejemplo.
Aquí me quedo, proponiendo la solución más sencilla y accesible, para de momento no meternos en complicaciones que requieren de más conocimientos y destrezas.

7 Ayundando a la navegación

Cuando los navegadores no son visuales por ejemplo se puede ayudar a los usuarios a navegar de forma rápida con la etiqueta <link> se la asocia con la CSS que son las hojas de estilo en cascada de las que ya he hablado un poco y que nos ayudan a ir a la página principal o a la siguiente de forma más rápida.
Para ello se incluye en Blogger este enunciado pues no nos da acceso a las hojas de su editor.
Lo ponemos inmediatamente después de la etiqueta <head>
 <link rel="home" title="Página principal" href="<$BlogUrl$" />

6 Elegir un buen título

Que sea significativo y que explique en el mismo nombre en qué consiste más o menos nuestro blog.  Una cosa es la dirección de nuestro blog
Me pareció bien la dirección de “Cómo hacer Web accesibles” porque es exactamente lo que estamos tratando. Para mí el aprender haciendo es la forma más intensa de aprender y el echo mismo de tener que explicarlo y después redactarlo me parece sinceramente una muy buena metodología. Ese “como” me pareció que encajaba en el “como” de la dirección elegida.

5 El Idioma

El tema del idioma es de suma importancia pues sino lo configuras con la correspondiente lengua  los navegadores y desarrolladores no permitirán a los lectores de pantalla, por ejemplo, que su lectura sea la correcta.
Para ello
Acudimos a la plantilla principal de nuevo, dando a escritorio (o diseño) y luego a la pestaña plantilla, donde dentro como ya se ha explicado está la pestaña de “ Edición en HTML”
 Allí observamos que debajo de el DOCTYPE de nuestro documento está una línea que especifica en qué lengua está el blog:
[html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>"]
Debemos de cambiarla por
[html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"]
Donde [ ] son en realidad <>
De esta forma se leerá en español "es" y no en inglés "en" que es el idioma que por defecto tiene Bloger.

4 El DOCTYPE

Una vez localizada nuestra plantilla base es importantísimo especificar el tipo de documento que estamos haciendo. ¿Para qué? Pues es sencillo para que los navegadores y buscadores nos encuentren en la inmensa red de redes. Es la explicación de en qué lenguaje está escrito nuestra bitácora.
Y ¿cómo lo hacemos?
Pues con la Declaración del Tipo de Documento, conocido con las siglas DOCTYPE (Document Type Declaration).
Todas las primeras líneas de los códigos fuentes de las paginas web tiene un DOCTYPE, y está compuesto por una línea que recoge lo suficiente para describir el tipo de documento en el que estamos. Es la especificación de una sintaxis. Existen varios, pero nosotr@s@s aquí nos vamos a centrar en el correspondiente al que cumple con las reglas de accesibilidad.

Como hemos localizado nuestra plantilla base, podemos observar que la primera de las líneas es:

(!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd)

Ojo los paréntesis son los signos de mayor y menor "<>"que abren y cierran siempre las etiquetas lo que ocurre que si los pongo el editor de blogger lo lee como HTML y no lo saca.

Dicha la aclaración....Invitados están a que lo comprueben

3 Buscando la plantilla base

Pasamos a buscar la plantilla dónde vamos a trabajar para hacer la Web accesible. La localizamos Clicando  en Personalizar o en Diseño. Luego nos metemos en la pestaña de “Edición de HTML” y ya tenemos nuestra plantilla base. Nuestros planos.

2 Nociones Básicas

Es interesante y necesario investigar donde estamos. Abandonar esa sensación de "no sé donde estoy" para ello es interesante y necesario moverse por la herramienta de trabajo qué tenemos. Después de esto, intentaré explicar de forma llana y lo más sencilla posible lo que vamos haciendo (o sea sin meternos en terminología demasiado técnica, sólo lo necesario).

Primero saber y tener claro que estamos en un lugar en el ciberespacio (concretamente Blogger) también llamado Blog o Bitácora, (como un cuaderno - o sala de exposición al alcance de todo el mundo) donde vamos a escribir y poner información de formas distintas, como por ejemplo textos, imágenes, vídeos etc.

Este espacio digamos que tiene una infraestructura que nosotr@s vamos a modificar con la intención de hacerla accesible para todo el mundo. Esto significa que algo de los “planos” de esa sala de exposiciones, manipularemos en favor de la accesibilidad.

Para ello es importante saber que hablamos de plantilla base del sitio, para referirnos a su “código fuente” (los planos) por tanto es aconsejable tener unos conocimientos mínimos de leguaje HTML que sería el idioma con el que “escribimos” los planos en cuestión. (Siguiendo el símil, la herramienta con el que lo vamos a construir). De momento, para no liarnos, saber que HTML son las siglas de Hyper Text Markup Language (lenguaje de marcado de hipertexto) Un lenguaje de marcado o etiquetas.

Este lenguaje tiene una ayuda que son las CSS de Cascading Style Sheets (hojas de estilo en cascada), vienen a ser unas plantillas que son patrones o bocetos con los que vamos a dar el aspecto a la Bitácora. En el apartado “Vínculos o enlaces” os remitiré a unos tutoriales de gran ayuda. Pero eso es en otro apartado, de momento si os parece, lo dejamos aquí para no liarnos.

1 ¿Qué es y para quién es la Accesibilidad?

Accesibilidad es la facilidad de acceso a los sitios en general, si lo trasladamos al ambito de la calle, tod@s hemos oído hablar de "barreras arquitectónicas" y la lucha para eliminarlas. Si lo trasladamos al mundo cibernético, que es nuestro caso, estamos hablando de la posibilidad de que toda persona pueda pasar y acceder a la información o contenido de un espacio web o bitácora.


Nos situamos directamente en consiguir igualdad de oportunidades y facilidades para toda discapacidad, bien con problemas derivados de la vista ( ceguera, cegueras de color, agudeza visual etc) bien con problemas auditivos, sicomotrices, o personas con dificultades intelectuales o de aprendizaje. Pero que no se nos olvide que para aquellas personas que no sufren discapacidad es beneficioso de igual modo.


Por tanto es para las personas en general, independientemente de las habilidades o carencias que estas puedan tener, facilitar el acceso nos beneficia a tod@s. La accesibilidad es la apertura al y para el conocimiento