Nuestro compromiso es alcanzar la mayor accesibilidad posíble en las páginas publicadas; se trata de un proceso permanente y pedimos disculpas por los problemas de accesibilidad que todavía no están corregidos. Como ya se ha dicho en Contenido, la accesibilidad Web es un trabajo recurrente: cada noticia, cada nuevo contenido, tiene que crearse con los mismos criterios con los que se creó el portal. En la presente página se repasará el trabajo que se ha realizado o que se realizará para conseguir este objetivo, siguiendo como guión los puntos del magnífico artículo Haciendo una bitácora accesible publicado por Carlos Egea1. Se trata de un formato un tanto informal para ser la página de accesibilidad de un portal, pero funciona como una checklist para revisar el cumplimiento que alcanzamos, sin saltarnos los puntos débiles que podamos tener.
- ¿Para quién es la accesibilidad Web?
- Elegir un DOCTYPE
- Identificar el idioma
- Elegir un título significativo
- Ayudas adicionales a la navegación
- Colocar primero el contenido principal
- El uso de los colores
- Vínculos reales
- Vínculos correctos y con títulos
- Atajos de teclado
- No abrir nuevas ventanas
- Acrónimos
- Tablas accesibles
- Usar listas reales
- Equivalente textual para imágenes
- Atributo "alt" vacio
- Mapas de imagen accesibles
- Líneas horizontales
- Tamaños de fuente relativos
- Encabezados correctos
- Verificar la accesibilidad
1. ¿Para quién es la accesibilidad Web?
En principio, por la forma en que se diseña un portal accesible, los beneficiarios son todos los usuarios, ya que se utiliza una ordenación y estructuración de los contenidos que facilitan su lectura por parte de todos. La diferencia entre una página accesible de otra que no lo es, es que en este último caso, dependiendo del grado de falta de accesibilidad, los usuarios con problemas de visión o incluso de movilidad no puedrán leer los contenidos ni navegar adecuadamente por la página.
2. Elegir un DOCTYPE
La Declaración del tipo de documento (DTD) se especifica mediante la introducción en el código de la etiqueta "DOCTYPE". El gestor de contenidos utilizado por TecnoAccesible lo genera automáticamente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. Identificar el idioma
En éste, como en el caso anterior, el cumplimiento de este requisito no es un mérito por nuestra parte, ya que la identificación del idioma del portal en el código la proporciona el gestor de contenidos utilizado (Drupal).
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
Para la identificación de otros idiomas incluidos dentro los párrafos o para citas, se utiliza el atributo "lang", normalmente con las etiquetas <blockquote>
4. Elegir un título significativo
TecnoAccesible es un portal que dispondrá de numerosas páginas, especialmente de sus catálogos de productos, por lo que los títulos de las páginas serán frecuentemente el nombre de estos productos. Para el resto de las páginas, como principio elemental de usabilidad, se intentará dar un nombre significativo al título.
<title>Accesibilidad Web del portal | TecnoAccesible</title>
5. Ayudas adicionales a la navegación
Como ayuda a la navegación, para navegadores no visuales, se han incluido en la cabecera de la plantilla un enlace a la página principal.
6. Colocar primero el contenido principal
El munú principal y el menú secundario están en primer lugar en el diseño de la plantilla. Para evitar que los lectores de pantalla tengan que pasar por todos los enlaces antes de empezar a locutar el contenido de la página, se ha añadido un enlace interno en la plantilla que lleva a un vínculo que está colocado en el comienzo del contenido. Se ha optado por mantenerlo visible en la parte superior derecha.
7. El uso de los colores
Las plantillas utilizadas en el portal se están modificando para mejorar su visibilidad por parte de los usuarios que tienen problemas con la percepción del color. Se trata de un proceso todavía incompleto, aunque los elementos principales, como los menús y las páginas de contenido, ya se han realizado.
Para la comprobación del contraste entre los colores de primer plano y fondo, se está utilizando la herramienta "Analizador de Contraste" (se puede descargar la versión en español de Tecnosite) desarrollada por JUn del Web Accessibility Tools Consortium, en la que Tecnosite ha participado.
En cuanto a la identificación de vínculos, están marcados con color azul y se muestran subrayados cuando se pasa el puntero del ratón por encima.
8. Vínculos reales
En el portal NO se utilizan enlaces con código JavaScript. No funciona con todos los navegadores, los lectores de pantalla y los motóres de búsqueda no pueden interpretarlos y, además, no funcionarían si se deshabilita JavaScript en el navegador.
9. Vínculos correctos y con títulos
En TecnoAccesible NO se encontrarán enlaces del tipo "pincha aquí", los enlaces serán siempre descriptivos o harán referencia a un título de un menú, de un producto, de una empresa, etc.
Para los enlaces de los menús de navegación, se incluye una descripción del contenido al que se accede utilizando la etiqueta "title", de forma que cuando se posiciona el puntero del ratón encima aparece una descripción emergente (tooltip).
10. Atajos de teclado
Los atajos de teclado permiten mediante una combinación de teclas acceder a un enlace determinado de un portal. El inconveniente es que no están definidos en ninguna normativa, por lo que cada sitio Web puede tener una configuración de teclas distinta. En nuestro caso vamos a utilizar la configuración definida por el gobierno del Reino Unido para las páginas de la administración pública de ese país:
- S - Saltar al contenido 1 - Página principal 2 - Novedades 3 - Mapa del sitio 4 - Buscar 5 - Preguntas frecuentes 6 - Ayuda 8 - Información legal 9 - Contacto 0 - Atajos de teclado
Tampoco están normalizadas las teclas con las que hay que combinarlas, dependiendo del navegador
- Internet Explorer, Google Chrome y Safari
- Alt + atajo + Entrar
- Firefox
- Alt + Mayús + atajo
- Opera
- Mayús + Esc activa las teclas de acceso, soltar teclas a continuación y pulsar atajo
Para usuarios que tengan dificultades para realizar combinaciones de teclas, consultar el tema Teclas especiales (StickyKeys en Windows XP) del tutorial Acceso al ordenador.
11. No abrir nuevas ventanas
En TecnoAccesible no hay enlaces que abran nuevas ventanas o pestañas del navegador, salvo error, en cuyo caso agradeceremos que se nos informe para corregirlo (Contacto). Suele ser una práctica habitual para impedir que el usuario abandone el sitio, incluso en portales supuestamente accesibles, aunque en este caso avisan en el propio enlace de que se abrirá en una nueva ventana. Puede generar desconcierto en los usuarios cuando intentan volver con el botón "regresar" del navegador o con la tecla retroceder del teclado, especialmente para los que utilizan lectores de pantalla o tienen trastornos cognitivos.
12. Acrónimos y abreviaturas
Los acrónimos están marcados con la etiqueta <acronym>, de forma que cuando se pasa por encima el puntero del ratón aparecerá su significado en forma de descripción emergente (tooltip). Aunque intentamos no utilizar abreviaturas, cuando existan estarán marcadas con la etiqueta <abbr>. En ambos casos la palabra aparece subrayada con una fina línea punteada.
13. Tablas accesibles
Las tablas que se utilizan en el portal son de datos, siendo de dos tipos: las que se incluyen manualmente en lás páginas como parte de un contenido y las que genera automáticamente el gestor de contenidos utilizado por TecnoAccesible. Para que una tabla sea accesible debe cumplir los siguientes requisitos:
- Título de la tabla (caption). Las tablas deben disponer de un título o subtítulo incluyendo la etiqueta
<caption>, lo que permite conocer el contenido de la tabla y, a los lectores de pantalla y los navegadores de texto identificarlo como un título y no como una celda más de la tabla. - Resumen (summary). El atributo
<summary>de la etiqueta<table>proporciona una descripción del contenido de la tabla, por ejemplo "Número de turistas del museo por mes y país". - Encabezamientos apropiados utilizando la etiqueda
<th>en lugar de la genérica<tr>.
Cabe indicar que en TecnoAccesible las tablas que se realizan manualmente incluyen estas propiedades, pero todavía NO las que genera automáticamente el gestor de contenidos.
14. Usar listas reales
En el contenido del sitio se utilizan tres tipos de listas, ordenadas con numeración o letras, con viñetas y sin ningún tipo de marcación. Las viñetas tienen un elemento gráfico que está definido en la hoja de estilo, por lo que no aparece en el código HTML de las páginas.
15. Equivalente textual para imágenes
Desde el punto de vista de la gestión de TecnoAccesible, hay dos formas de introducir imágenes en las páginas, o bien mediante un campo de imagen definido en algunos tipos de contenidos (Directorio o Catálogo), o bien icluyendola en el código de páginas estáticas. En este último caso, respondiendo al "qué es y para qué sirve", se utiliza el siguiente formato:
<a href="http://www.cdlibre.org/"> <img src="http://www.cdlibre.org/img/cdlibre_disfrutade.png" alt="Logotipo de cdlibre que enlaza a su portal" title="Visita cdlibre.org" /> </a>
Por una parte con la etiqueta "alt" se hace una descripción de la imagen, indicando además que existe un enlace a ese sitio, por otra con la etiqueta "title" se proporciona información visual emergente cuando se coloca el puntero del ratón en la imagen.
Sin embargo, en las imágenes que se cargan a través de campos de las plantillas, la información, aunque descriptiva, sólo se introduce con la etiqueta "alt".
16. Atributo "alt" vacio
Las imágenes decorativas utilizadas en el diseño de las páginas pueden resultar incómodas cuando son leídas por un lector de pantalla, planteándose además la polémica de si se deben poner etiquetas "alt" vacías o indicando que se trata de una imagen decorativa. En TecnoAccesible estos gráficos siempre están en la hoja de estilo, por lo que no aparecen referencias a dichas imágenes en el código HTML de la página y, por tanto, no necesitan la etiqueta "alt".
17. Mapas de imagen accesibles
En principio no hay previsto ningún plano o mapa que justificara un contenido de este tipo, pero si fuera necesario, con cada gráfico se añadiría un contenido textual alternativo.
18. Líneas horizontales
Para las líneas horizontales que permiten separar el contenido, se utiliza el mismo criterio que en el punto 16 respecto a las imágenes decorativas: se incluyen en las hojas de estilo.
19. Tamaños de fuente relativos
La utilización de tamaños relativos de las fuentes de texto, definidas en las hojas de estilo, permite a los usuarios aumentar o disminuir su tamaño desde las opciones de visualización del navegador. Este es el procedimiento que se ha utilizado en nuestro portal.
Se puede modificar el tamaño de la fuente de texto, pependiendo del navegador, desde el menú "Ver", "Tamaño de texto", o bien utilizando los atajos de teclado con las teclas CTRL y + para aumentar el tamaño o CTRL y - para disminuirlo, o de forma más dinámica pulsando la tecla CTRL a la vez que se gira la rueda del ratón. El portal también dispone de unos controles que permiten aumentar o disminuir el tamaño del texto, situados en la parte superio de la página.
20. Encabezados correctos
Para la organización de los textos de las páginas se utilizan encabezados HTML (etiquetas de <h1> a <h5>). Esta práctica facilita a los lectores de pantalla la navegación mediante comandos, pudiendo saltar de un capítulo a otro del documento. También es aprovechado por algunos navegadores, como lo hacen los lectores de pantalla, para saltar de un capítulo a otro.
21. Verificar la accesibilidad
Para la verificación de la accesibilidad y de la corrección del código se están utilizado los siguientes procedimientos:
- Verificación manual de la accesibilidad del portal, revisando el código de las plantillas y su presentación
- Verificación del código fuente, comprobando si se ajusta a las recomendaciones del W3C. La verificación se ha realizado utilizando la utilidad Web Markup Validation Service que proporciona el propio consorcio.
- Verificación del código de las hojas de estilo, para comprobar si se ajusta a las recomendaciones del W3C, utilizando la herramienta Web CSS Validation Service que proporciona el propio consorcio.
- Validación mediante la utilidad Web HERA del Sidar
- Validación mediante la utilidad de escritorio TAW3 de la Fundación CTIC
- 1. Lectura recomendable, pero lamentablemente ya no está disponible.