Paso21: Validación de accesibilidad

Como paso final es recomendable hacer uso de un validador como el del w3C, en el cuál obtenemos una cifra y un completo análisis de errores o warnings que puede tener nuestro desarrollo. Algunos de los errores son de Blogger pero la mayoría de nuestras entradas, en el caso de este blog al hacer la primer revisión encontré "105 errores", después de este escandaloso resultado y revisar un poco sobre los fallos, actualmente tiene un resultado de "86 errores" en http://validator.w3.org 2 errores en http://jigsaw.w3.org y en orden de prioridades 65, 72 y 21 en http://www.tawdis.net.

Después de leer el resultado del validador, veo que muchos de los supuestos errores son por ejemplo espacios en etiquetas o cierres de las mismas que no deberían ser, a lo largo del blog para que el texto que les quería mostrar no se convirtiera en HMTL intencionalmente dejaba espacios o etiquetas sin cerrar. Así que me tranquiliza en algo saber que el margen de error no es tan alto como parece.

Esta fue una muy interesante práctica y la recopilación queda abierta en la web para que sea multiplicadora de estas buenas prácticas y de cierta forma pueda ser una herramienta útil por una web accesible.

John Milton Zárate

Paso20: Encabezados correctos

Los encabezados son las etiquetas "h1" "h2" "h3" "h4" "h5" "h6", se otorga "h1" al primer título, el de más jerarquía y así sucesivamente. Blogger organiza muy bien los encabezados por cada post, pero de nosotros depende mantener el orden con el que se inicia. El siguiente ejemplo es parte del código tomado del post inmediatamente anterior este.

...

< div id="header">< div>
< h1 id="blog-title">


< div id="main">< div id="main2">< div id="main3">
< h2 class="date-header">martes 22 de marzo de 2011
< h3 class="post-title">
...

Paso19: Tamaños de fuente relativos

Es importante diseñar las hojas de estilo teniendo en cuenta los tamaños de las fuentes en porcentaje y no en tamaño fijo. Esto debido a que muchos navegadores o dispositivos de salida difieren en la forma de mostrar los archivos. Para ello en los estilos el "font-size" debe estar en porcentaje. A continuación un ejemplo de ello:

Texto al 180%

Texto al 150%

Texto al 120%

Texto al 100%

Texto al 60%

Paso18: Líneas separadoras

Las líneas separadoras son muy necesarias en algunas páginas web como los blog, algunas personas por cambiar el diseño insertan imágenes en vez de las típicas líneas insertan imágenes. Esto no tiene problema desde que se haga de manera accesible, lo que se puede lograr con una etiqueta "alt".

Por ejemplo para poner la siguiente imagen desde la hoja de estilos el código sería:

div.hr {display:none}
/*/*/a{}
div.hr{
display: block;
height: 10 px;
background-image: url(http://ticrobot.com/static/media/cms_page_media/20/Linea
SeparadoraHome.gif);
background-repeat: no-repeat;
background-position: center center;
margin: 1em 0 1em 0;
}
hr {display: none}

Paso17: Zonas activas en una imagen

Una mapa de imágenes puede ser expandir las opciones para aprovechar una imagen, de esta forma se puede agregar mas información a un sola imagen o separar contenidos de acuerdo a su contenido.

Para este ejemplo he puesto en una fotografía mis dos carros, cada lado de la fotografía conduce a una foto completa del mismo y además en el "alt" dice el modelo de cada uno.

Paso16: Atributo "alt" vacio

En ocasiones donde la imagen sea solo relleno y no aporte ninguna información al contenido de la página, solo en esos casos se debe utilizar el atributo "alt" vacío, sin espacios ya que un lector de pantalla lo leería, en cambio al no encontrar nada este interpreta que la imagen no es relevante y sigue con su lectura, para ello se utiliza dentro de "img" la etiqueta alt="" dejando las comillas dobles sin información entre ellas.

La siguiente imagen es un ejemplo de ello, la cual puede ser un marco para utilizar en una composición de una invitación de grado:

Paso15: Texto alternativo en las imágenes

En las imágenes existe un atributo llamado "alt", en esta etiqueta se puede adicionar información de texto para describir la imagen y así apoyar la función de los lectores de pantalla ya que es la única forma que obtengan alguna información de estas.

La etiqueta se usa dentro de "img", solo se debe poner texto plano, no se debe escribir allí el nombre del archivo ni tampoco textos sin sentido. A continuación una fotografía personal utilizando texto alternativo.

Paso14: Correcto uso de listas

Los listados que se necesiten poner en nuestros sitios debemos hacerlos de manera apropiada, no con imágenes por que si o símbolos raros, para ello hay unas etiquetas como "ul" para listas aleatorias o "ol" para listas numeradas. Cualquier cambio que se desee hacer para ver de manera "diferente nuestro sitio" se hace a partir de las hojas de estilo.

En código eso se vería así:

< ul>
< li> Internet Explorer < / li >
< li> Mozilla Firefox < / li >
< li> Google Chrome < / li >
< li> Opera < / li >
< li> Flock < / li >
< li> Safari < / li >
< / ul >

En la práctica se ve de la siguiente manera:

• Internet Explorer


• Mozilla Firefox


• Google Chrome


• Opera


• Flock


• Safari

Paso13: Tablas accesibles

Las tablas son poco utilizadas en este tipo de sitios pero de utilizarlas se deben tener en cuenta las siguientes recomendaciones:

1. Darle un título a la tabla haciendo uso de la etiqueta caption
2. Crear un breve resumen según sea el contenido de la tabla con la etiqueta summary
3. Hacer encabezamientos apropidos reemplazando td por th cuando se necesite.

Un ejemplo de tabla accesible puede ser la siguiente:

Volkswagen aircooled

Tipo 1	Tipo 2	Tipo 3	Tipo 4
Kdf	T1 Split window	Fastback	vw 411
Escarabajo	T2 Bay window	Notchback	vw 412
Super Escarabajo	T3 Vanagon	Variant

Paso12: Acrónimos

Los acrónimos y abreviaturas son cada vez mas utilizados en la comunicación, aunque se pueden convertir en problema cuando son muchos o cuando no se conocen todos los que se usen en un medio. Un ejemplo es WWW que significa world wide web o el usado a diario por todos nosotros aunque no muchos sepan que significa el HTTP o hyper text transfer protocol.

Cuando se escriben en un texto normalmente se aclaran la primera vez que se citan y luego se usa solo el acrónimo o la abreviatura. Al utilizar la etiqueta < acronym > podemos hacer que se produzca el efecto que vemos en HTML, al pasar el cursor sobre la palabra aparece su definición. Se escribe:

< acronym title ="hyper text mark language" lang ="en">HTML< / acronym>

Y también se observa una suave línea punteada producto de poner una clase:

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

Paso11: Nuevas ventanas

No es recomendable abrir los sitios vinculados en nuevas ventanas, esto por que personas con poca experiencia pueden llegar a confundirse y descontextualizarse. Además se interfiere con el trabajo de los lectores de pantalla ya que al intentar hacer clic en "atrás" no va a pasar nada y se perderá el hilo de navegación.

La etiqueta que hace que un link se abra en una nueva ventana del navegador es "target = blank", para que abra en la misma ventana se utiliza "target = self".

Aunque en mi experiencia personal para ciertas cosas es mejor que no se abandone el sitio web de donde se inicia, por lo tanto el "blank" se vuelve necesario. Para estos casos la recomendación es avisar al usuario mediante un texto o una etiqueta "title" que el link se abrirá en una nueva ventana, que si desea volver al sitio cierre la ventana para continuar donde estaba.

Paso10: Atajos de teclado

Existen unas etiquetas poco utilizadas para vínculos y formularios llamadas accesskey, con ellas podemos configurar atajos de teclado por ejemplo para ir mas rápidamente a los links mas utilizados. Estos atajos en el sistema operativo windows funcionan oprimiendo la tecla "alt" y un número o letras, en el sistema operativo "mac_os" en vez de usar la tecla "alt" se utiliza "control".

Esto puede ser de gran ayuda para los lectores de pantalla, además hay una cierta regularidad en utilizar "alt+1" para ir a la página de inicio, "alt+2" para saltar la barra de navegación y "alt+9" para ir a un correo de contacto.

En la realización de este blog se utilizaron las etiquetas para volver a la página principal con "alt+i" y para escribirle un correo al autor con "alt+k". Estos caracteres fueron escogidos al azar ya que la misma línea de código tomando 1 y 2 como la recomendación no funcionó.

Paso9: Vínculos más acertados

Normalmente los vínculos en las páginas web los ponemos en palabras de frases como:

Para ampliar información sobre el autor haga clic aquí

Pero esto no es muy útil para los navegadores que utilizan las personas con escasa o nula visión ya que cuando el lector interprete los links de la página solo le dirá al usuario "clic aquí", sin aportar mayor información. Para esto en la misma frase se puede hacer este pequeño cambio:

Para ampliar información sobre el autor haga clic aquí

De esta forma el lector le dirá al usuario "ampliar información sobre el autor", logrando así transmitir una información mas acertada a este público.

Otro recurso es valernos de la etiqueta title, en ella podemos hacer una mejor descripción del lugar al que nos llevará hacer clic en el título, para el mismo ejemplo podría ser algo como:

Para < href = "http://autor.com" title = "reseña ampliada del autor del texto">ampliar información sobre el autor< / a> haga clic aquí

Debo admitir que después de hacer esta entrada me vi en la tarea de revisar los links de entradas anteriores y ajustarlos de mejor manera.

Paso8: No hacer vínculos en javaScript

Aunque ya no es costumbre algunos diseñadores utilizaban código de javascript para poner los vínculos, esto es inconveniente por varias razones:

• Algunos usuarios no utilizan javascript por seguridad.
• Algunos navegadores no lo soportan.
• Algunos buscadores no los pueden indexar.
• No añade funcionalidad a la página web.

Servicios como blogger no los utilizan actualmente pero de encontrarlos el código sería algo como:

< href ="">javascript:OpenComments (<$MTEntryID$>)" >Comentarios (<$MTEntryCommentCount$>)

Lo que se debe reemplazar por algo como:

< href ="">javascript:OpenComments (<$MTEntryID$>)" >mt-comments.cgi?entry-id= " onclick ="OpenComments () ; return false">Comentarios<(<$MTEntryCommentCount$>)

Paso7: Color de los vínculos

El color es algo muy importante y mas sabiendo que el dispositivo de salida es mayormente una pantalla. Teniendo en cuenta la gran parte de la población que sufre de deficiencias visuales.

Los links siempre los debemos dejar claros ya que es el acceso a contenidos de profundización y de no dejarlos claros se pueden perder. Muchas veces en el afán de crear diseños novedosos o diferentes dejamos de lado esta premisa y así volver nuestro sitio invisible a una población determinada.

En este caso he cambiad los colores de los link a los siguientes:

• #3333FF en su estado normal, el azul de siempre.
• #225588 a los sitios ya visitados, un azul oscuro.
• #FF6600 cuando el mouse pasa por encima, un naranja.

Además les puse a todos la opción de subrayado para que así sea mas claro que es un link (text - decoration : underline).

Contamos con herramientas como el Contrast analyzer un software gratuito que podemos descargar para hacer análisis de color en "diferencia brillo/color" la "luminosidad" y también nos ofrece un resultado de "contraste para daltonismo", adjunto el link para descargar el Contrast analyzer.

Paso6: Primero el contenido principal

Sonará raro pero esto consiste en tener ordenados los contenidos del website, nosotros no nos damos cuenta, pero cuando se usan lectores de pantalla si empiezan a leer el sitio y está el código de la barra de contenido antes que el contenido del sitio, siempre que cargue una nueva página la persona tendrá que aguantarse nuevamente la lectura.

En casos como este blog lo primero que debemos hacer es cerciorarnos que la barra de navegación interna esté a la derecha, para que así primero cargue los contenidos, de la misma manera revisar que la plantilla que estemos usando tenga primero el código fuente del contenido que el del menú de navegación.

Paso5: La etiqueta link

La etiqueta link se considera como una ayuda adicional, ya que no solo ubica la página a la que se quiera ir por su nombre sino también por su título. En Blogger no podemos hacer la práctica, pero en código sería algo así como:

< link rel="index" title="Página principal" href="http://paginaPrincipal.html" / >

De esta forma los navegadores no visuales ubican mas rápidamente el contenido para el usuario, en este caso la página inicial del website.

Paso4: Un buen título

Aunque parezca irrelevante la elección del título de la página es algo muy importante, ya que es una forma muy usada de acceder a nuestro sitio, en el caso de blogger este lo deja igual al que pongamos en la entrada. También es algo útil para los lectores de pantalla pues el título es lo primero que leen.

Títulos concisos son una excelente manera de volver nuestros contenidos mas accesibles, y no basta con colocar un título para el website, debemos poner uno por página de acuerdo a su contenido.

Como pueden ver en el caso de este Blog, desde el nombre del mismo hasta los títulos de cada entrada son bastante contundentes y puntuales, lo que de seguro facilitará a los que necesiten del tema encontrar el material.

Paso3: Idioma de la página

Haciendo esta entrada me ha pasado algo muy particular, cuando creé el Blog hice clic en la primer plantilla, supuestamente la plantilla clásica, pero desde el paso anterior noté que habían cosas un tanto diferentes a las descritas en el libro del curso, sin embargo seguí adelante. Ahora que necesito encontrar la etiqueta para el cambio del idioma encuentro que mi "plantilla clásica" no es la "clásica" que yo esperaba. Buscando en la parte de edición del blog he restaurado la plantilla clásica en la pestaña plantilla/elegir plantilla clásica y ahora tengo lo que necesito.

El idioma se define para todo el sitio, aunque de requerirlo podemos cambiarlo en algunos párrafos específicos de nuestras entradas. Es importante tener ajustado el idioma al que es para que los lectores de pantalla hagan la entonación gramatical adecuada, para los demás usuarios es algo transparente.

Luego del "DOCTYPE" encontramos la siguiente línea:

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

En la etiqueta xml:lang tenemos el idioma, inicialmente en Blogger está en inglés, vamos a cambiar "en" por "es" para que quede en español. Después del ajuste quedaría así:

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

Cuando queramos cambiar el idioma en un lugar específico se hace de la siguiente manera:

< blockquote lang ="en" > In your face. < /blockquote>

Teniendo en cuenta que dentro de las siguientes etiquetas no funciona:

applet, base, basefont, br, frame, frameset, iframe, param y script

Paso2: El "DOCTYPE"

El "DOCTYPE" es la primera línea que va en una página web, esta le dice al navegador en que tipo de lenguaje está escrita la página para que así mismo sea interpretada en forma correcta.

Haciendo clic aquí podemos profundizar como se trata el tema en Wikipedia.

En el caso de blogger el "DOCTYPE" está escrito así:

< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >

Razón por la que no hemos tenido que hacer ajuste alguno a este parametro.

Paso1: Accesibilidad web ¿Para Quién?

Generalmente cuando hacemos diseño web nos preocupamos por satisfacer gustos personales o los gustos particulares de un cliente, rara vez diseñamos para una comunidad pues siempre están los intereses de quién financia los proyectos. Al entrar en ese juego muchas veces nos olvidamos de un gran público, pues centrados en el grupo de desarrollo no vemos mas allá de nuestra propia nariz. Si el desarrollador tiene completos sus cinco sentidos se olvida de las personas que no.

Existen varias comunidades a las que ciertos diseños les son invisibles, pues sus limitaciones físicas no les permiten acceder a los contenidos, personas con ceguera, con escasa visibilidad, con problemas de percepción de color, con problemas de motricidad para manejar el mouse o teclado, con dificultad auditiva o personas con problemas de aprendizaje. Incluso puede haber un grupo de personas que aunque tengan perfectamente sus cinco sentidos el hardware o el medio que usen para acceder a nuestros contenidos sean limitados en algún aspecto, no es lo mismo navegar desde un pc de escritorio que desde un teléfono celular.

Por todas estas personas hablaremos de aquí en adelante de accesibilidad web.

Introducción

Este Blog nace como práctica de la asignatura "Diseño Para Todos" del máster en tecnologías y sociedad del conocimiento de la UNED. La intención del blog es compartir con todas las personas que puedan entran en contacto con este material, dar a conocer unas pautas expuestas por Carlos Egea sobre la creación de material accesible en la web.

Carlos Egea lleva mas de diez años trabajando en el tema de accesibilidad con diferentes poblaciones discapacitadas, en la actualidad es tutor de esta materia dentro del máster y es quién nos da la oportunidad de adentrarnos en este interesante tema.

Espero este material sea útil para ustedes, lo puedan poner en práctica y entre los que estamos involucrados en este medio sigamos pautas de desarrollo de materiales web para todos y todas, por una web accesible.

John Milton Zárate