Más accesible a pesar de Blogger (2)

Este artículo es continuación de Más accesible a pesar de Blogger (1). El objetivo de esta serie de artículos es explicar el proceso que he seguido para intentar hacer más accesible mi bitácora en Blogger, algo que a veces no resulta nada fácil.

Lo cierto es que, aunque en el primer artículo me encontré frustada una y otra vez por los impedimentos a la accesibilidad que Blogger me imponía, esta vez no he tenido tantos problemas (tampoco es que me haya ayudado en mucho).

Como conclusiones de esta revisión voy extrayendo una serie de buenas prácticas a la hora de crear artículos con Blogger, de manera que el resultado sea más accesible, y una serie de tareas programadas que permitan realizar una revisión de los artículos ya publicados mejorando así su accesibilidad.

El proceso que he seguido se puede reproducir en cualquier sitio, no es específico para blogs realizados con Blogger.

Hoy abordo el tema de los atajos de teclado, la página de accesibilidad y personalización y los enlaces, tareas que he realizado en siete días, ordenadas en función del tiempo que he conseguido restarle a mi familia y a Morfeo. Aun habrá más puntos que revisar en futuras entradas.

Día 1: Atajos de teclado

El punto 9.5 de las WCAG (Web Content Accessibility Guidelines) recomienda incluir atajos de teclado para los enlaces importantes.

La Administración Pública del Reino Unido tiene definido un estándar de teclas rápidas en la guía para desarrolladores (Web handbook). Como defiende Accesibilidad Web y Alan en "Atajos de teclado en documentos Web" me ha parecido adecuado seguir esa convención.

Blogger no incluye el atributo accesskey en sus plantillas por defecto ni favorece su inclusión, es necesario ponerlo manualmente en la plantilla.

Para que los usuarios conozcan los atajos de teclado utilizados he realizado dos tareas:

• En el title del enlace he indicado su tecla de acceso rápido.
  
• En la página de accesibilidad he indicado todos los atajos que hay en la página y cómo acceder a ellos en los distintos navegadores.

Por cierto, me encantaría que todos los navegadores implementaran los atajos de teclado como Opera (Mayúsculas+Esc):

 

Día 2: Página "Accesibilidad"

Hoy voy a crear una de página de accesibilidad y personalización. Tal y como propone Emmanuelle Gutiérrez y Restrepo en "Navegación Semántica o Meta Navegación" la incluyo en la navegación semántica de la página mediante rel="personalizar".

En esta página, además de reflejar las intenciones de que el blog sea accesible para todos y las acciones que estoy llevando a cabo para ello, incluyo información importante como es:

• El listado de atajos de teclado y cómo acceder a ellos en los distintos navegadores.
  
• Información sobre cómo modificar el color o el tamaño del texto. Más información en el apartado "Menú superior 'Saltar a'" de "Enlaces más accesibles" de este artículo.

Días 3-7: Enlaces más accesibles

Este apartado aborda el tema fundamental de los enlaces, que son al fin y al cabo la base de nuestras páginas. Hay diversas tareas que se deben realizar para asegurar la accesibilidad de nuestros enlaces, yo las he dividido en cinco días.

Día 3: Enlaces rotos

En primer lugar compruebo que no haya enlaces rotos, puesto que las páginas externas a las que enlazo en los artículos han podido desaparecer.

Existen distintos validadores online: Link Analyser, W3C Link Checker,
links-rotos.com, etc.

El que me parece que da una información más útil es el W3C Link Checker

Una buena práctica es leer siempre un par de veces el artículo antes de publicarlo, revisando todos los enlaces que se incluyen. Añado como tarea programada revisar una vez al mes los enlaces para asegurarme de que ninguno ha dejado de existir.

Sería una buena propuesta para los desarrolladores de Blogger que incluyeran alguna herramienta automática con este propósito.

Día 4: Estilo de los enlaces

El objetivo de hoy es revisar que los enlaces tengan un estilo adecuado para ser reconocidos como tales sin problemas. Por ello los enlaces del blog tienen las siguientes características (1):

• tienen un color diferente al del texto, en este caso azul, puesto que me parece que ayuda a identificarlos claramente como enlaces
  
• el color del enlace tiene suficiente contraste con el color del fondo
  
• están subrayados
  
• los enlaces visitados tienen otro color, algo que es de gran ayuda cuando se busca información en un sitio y que no se respeta en muchos de ellos. He elegido un color morado, como es estándar "de facto", puesto que un problema que me encuentro en algunos sitios es que no se sabe qué color de los enlaces se corresponde con aquellos que ya se han visitado y cuál con los que no.

Día 5: Acceso mediante teclado, orden de tabulación y enlaces "saltar a"

Hoy me toca revisar que los enlaces sean accesibles sin ratón, es decir, utilizando sólo el teclado, y que además lo sean en el orden adecuado.

Una vez hecha esta comprobación decido buscar una solución a lo pesado que resulta navegar con el tabulador por culpa de la gran cantidad de enlaces que tiene la página.

Para ello creo dos nuevos tipos de menú:

Menú superior "Saltar a"

 

Al comienzo de la página, basándome en la solución de la web de la WAI (Web Accessibility Initiative), he incluido un menú con tres opciones:

• "Saltar al contenido", que permite ir directamente al contenido del artículo sin tener que pasar por todos los enlaces de interés de la columna izquierda. Esta opción es mejor que modificar el orden de tabulación lógico mediante el atributo TABINDEX. Por otro lado, ¿por qué ocultar nuestros enlaces de saltar navegación? Estoy de acuerdo con jlvelazquez.net, revindiquemos los enlaces de saltar navegación accesibles para todos los usuarios.
  
• "Ir al menu", que permite saltarse la columna izquierda y el contenido y acceder directamente al menú del blog en la columna derecha.
  
• "Cambiar el color y tamaño del texto", siguiendo de nuevo el ejemplo de la WAI, he decidido incluir este enlace que informa al usuario de cómo puede cambiar en su navegador el tamaño y color de la fuente. Esta alternativa es mucho más adecuada que los típicos iconitos como explica muy bien Juan Carlos García en "Botones para cambiar el tamaño de letra"
  

Enlaces "Saltar a" bajo las columnas de contenido

Siguiendo de nuevo la decisión de no ocultar los enlaces, he incluido debajo de cada columna un enlace visible que permita saltar con fluidez de unas columnas a otras.

Día 6: Texto e idioma de los enlaces. Parámetro "title"

El punto de verificación 13.1 de las WCAG (Web Content Accessibility Guidelines) dice:

13.1 Identifique claramente el objetivo de cada vínculo. [Prioridad 2]

El texto del vínculo tiene que tener significado suficiente cuando sea leído fuera de contexto (por sí mismo o como parte de una secuencia de vínculos). También debe ser conciso.

Por ejemplo, en HTML, escriba "información sobre la versión 4.3" en lugar de "pincha aquí". Además de textos de vínculos claros, los desarrolladores de contenidos deben aclarar el objetivo de un vínculo con un título informativo del mismo (por ejemplo, en HTML, el atributo "title"),


En primer lugar compruebo si el texto de los enlaces es significativo y si es necesario complementarlo con el parámetro title. Textos no significativos serían los típicos "pulse aquí", "comentabamos por aquí", que fuera de contexto no sabríamos a donde enlazan (recordemos que el usuario puede utilizar para navegar el listado de enlaces que le proporciona su agente de usuario: JAWS, Opera, Firefox, etc.)

Por la misma razón es necesario que no haya enlaces con el mismo texto pero que apunten a recursos diferentes, lo cual crearía confusión al usuario, especialmente si los lee fuera de contexto como en el caso anterior.

Como explica Emmanuelle Gutiérrez y Restrepo en Enlaces significativos no basta con añadirles el atributo title, es necesario que su literal sea diferente, pues hay agentes de usuario como JAWS que no muestran el atributo title en la relación de enlaces.

Como colofón de este artículo imprescindible, Emmanuelle concluye:

Los enlaces en una página deben ser concisos, significativos y únicos para cada destino, tal como piden las directrices de accesibilidad. Es decir: no ser demasiado largos, ser claros en cuanto a qué se encontrará el usuario si los selecciona o ejecuta (no ambigüos como el típico: "pincha aquí") lo que ayudará a quienes naveguen por enlaces y a quienes tengan deficiencias cognitivas, y un texto dado que conforme un enlace, si vuelve a aparecer en la página debe apuntar exactamente al mismo recurso.

El atributo title está para transmitir información complementaria sobre a dónde apunta el enlace, pero no tiene como misión especial el diferenciar unos enlaces de otros, pues las características del usuario, del agente que utilice o del contexto de uso, pueden hacer que el valor de dicho atributo no llegue nunca al usuario.

Incluso en el caso de que todos los agentes de usuario habilitaran la navegación secuencial, indicando tanto el contenido como el título del elemento, siempre habrá usuarios que no podrán o no querrán hacer uso de ella y que seguirán necesitando claridad, que los enlaces sean significativos. Por ejemplo, algunas personas con determinados tipos de deficiencia cognitiva. Porque se podría alegar que el contexto sería suficiente para diferenciar enlaces iguales (como en el caso del ejemplo 0) pero la experiencia demuestra que esto no es así para muchos usuarios (personas mayores, personas con deficiencias cognitivas, etc.) y el problema se acentúa cuando la persona se ayuda de un lector de pantalla o navegador parlante, pues ha de escuchar continuamente y tras una pausa un mismo texto repetidas veces.


Hay que tener en cuenta que el usuario puede que no esté leyendo la portada del blog o un artículo concreto, sino que puede estar leyendo todos los artículos de un mes o de una etiqueta, por ello hay que comprobar que en estos casos tampoco haya enlaces con el mismo texto pero diferente ruta.

También hay que tener en cuenta que Opera, al solicitar la vista de enlaces (Control+Alt+L), si hay dos o más enlaces con nombres distintos pero que apuntan al mismo recurso, sólo muestra el primero, por tanto también hay que evitar combinación.

Me encuentro dos problemas en Blogger:

• Cuando se ven varios artículos en una página, si estos tienen el mismo número de comentarios, el literal del enlace a los comentarios será el mismo (por ejemplo "3 comentarios"). Para solucionarlo he incluido a continuación del texto por defecto del enlace (<data:top.commentLabelPlural/>) el texto "en el artículo" seguido del título del artículo (que se inserta con el código <data:post.title/>)
  
• Cuando se visualiza un artículo con comentarios, hay diversos enlaces de una misma papelera "Eliminar comentario" que apuntan a distintas rutas. Me ha sido imposible modificar esto en Blogger. (Nota 16/10/08: obstáculo superado con el código que se explica en los comentarios) Lo mismo me ocurre con los iconos en forma caracteres flecha ▼ del menú "Archivo por fecha"
  

Por último reviso si se identifica correctamente el idioma del texto del enlace mediante el atributo lang y si se identifica claramente el idioma de la página a la que enlaza con el atributo hreflang.

Después de revisar estos puntos en la plantilla los añado como buenas prácticas y los incluyo dentro de las tareas programadas para revisar los artículos del blog.

Blogger no facilita la inclusión del atributo "title" ni advierte de problemas como los de las anclas o títulos repetidos o de enlaces con el mismo texto y ruta diferente o viceversa (que pueden no estarlo cuando creas un artículo concreto y sí estarlo cuando ves un mes o una etiqueta completa). Sería una buena recomendación a los desarrolladores de Blogger que advirtieran automáticamente de ello.

Día 7: Nuevas ventanas

El punto de verificación 10.1 de la pauta 10 de las WCAG (Web Content Accessibility Guidelines) 1.0 nos dice:

10.1 Hasta que las aplicaciones de usuario permitan desconectar la apertura de nuevas ventanas, no provoque apariciones repentinas de nuevas ventanas y no cambie la ventana actual sin informar al usuario. [Prioridad 2]

Por ejemplo, en HTML, evite usar un marco cuyo objetivo es una nueva ventana.

En las WCAG 2.0 podemos leer:

3.2.5 Changes of context are initiated only by user request or a mechanism is available to turn off such changes. (Level AAA)

The intent of this Success Criterion is to encourage design of Web content that gives users full control of changes of context. This Success Criterion aims to eliminate potential confusion that may be caused by unexpected changes of context such as automatic launching of new windows, automatic submission of forms after selecting an item from a list, etcetera. Such unexpected changes of context may cause difficulties for people with motor impairments, people with low vision, people who are blind, and people with certain cognitive limitations.

No se debe por tanto utilizar ventanas nuevas, por ello decido eliminar todos los target="blank" que haya incluido a mano en los enlaces (pues no es una opción de Blogger).

Una vez eliminados de la plantilla lo recojo como buena práctica e incluyo en las tareas programadas revisarlo en los artículos ya publicados.

Hay una excepción. Vozme proporciona una versión hablada de los artículos, pero lo hace en ventana nueva. Se advierte de ello al usuario en el atributo "title" del enlace.

Tareas programadas para revisar el blog

Revisar los siguientes puntos en los artículos del blog:

• Revisar que no haya estilos definidos mediante los atributo "style" o "border" fruto de la inserción de imágenes, textos en negrita, etc.
  
• Revisar que las imágenes tenga un atributo "alt" correcto y en su caso un atributo "longdesc" adecuado acompañado de un enlace "D".
  
• Revisar que los cambios de idioma en el texto se especifican mediante el atributo "lang".
  
• Revisar que las abreviaturas y los acrónimos estén definidos (con la etiqueta correcta) al menos la primera vez que se usan, y en este caso que se haya expandido también su significado en el propio texto.
  
• Eliminar los target="_blank" de los enlaces
  
• Verificar que el texto de los enlaces es conciso, significativo (no ambiguo como 'pulse aquí') y único.
  
• Comprobar que se ha añadido el atributo title a los enlaces que necesitan información complementaria para que usuario sepa con qué se encontrará cuando lo pulse.
  
• Comprobar que no hay enlaces con el mismo texto y distinta ruta o con distinto texto pero con la misma ruta, ni siquiera cuando se complementen con el atributo title.
  
• Verificar que se ha incluir el atributo lang en los enlaces cuando el idioma del texto del enlace sea diferente al idioma del documento y el atributo hreflang cuando el idioma del recurso al que enlaza sea diferente al idioma del documento
  
• Comprobar que no hay anclas iguales en distintos artículos, pues al verse en una misma página (por ejemplo si están etiquetados igual) colisionan
  

Revisar una vez al mes:

• Vínculos rotos con W3C Link Checker

Comprobar:

• La adecuación o no de crear CSS específicas para impresión, dispositivos móviles, etc. alojadas en otro servidor.
  

Buenas prácticas para crear artículos accesibles

• Escribir el artículo en modo "Redactar", pasando al modo "Edición de HTML" sólo para incluir etiquetas o atributos no contemplados en el editor.
  
• Validar la sintaxis XHTML al terminar el nuevo artículo.
  
• Si se insertan imágenes eliminar los atributos "border" y "style" que incluye Blogger
  
• No utilizar los botones del editor de Blogger para poner el texto en negrita o itálica, sino incluir las etiquetas adecuadas manualmente.
  
• Añadir a las imágenes un atributo "alt" adecuado y caso de ser necesario un atributo "longdesc" más un enlace "D".
  
• Indicar los cambios de idioma en el texto mediante el atributo "lang".
  
• Etiquetar adecuadamente abreviaturas y acrónimos la primera que aparecen en el texto, expandiendo también su significado en el propio texto.
  
• Leer el artículo varias veces antes de publicarlo comprobando todos sus enlaces.
  
• No utilizar target="_blank" en los enlaces
  
• El texto de los enlaces debe ser conciso, significativo (no ambiguo como 'pulse aquí') y único.
  
• Se debe añadir el atributo title a los enlaces cuando sea necesario añadir información complementaria para que usuario sepa con qué se encontrará cuando lo pulse.
  
• No se deben incluir enlaces con el mismo texto y distinta ruta o con distinto texto pero con la misma ruta, ni siquiera cuando se complementen con el atributo title.
  
• Se debe incluir el atributo lang a los enlaces cuando el idioma del texto del enlace sea diferente al idioma del documento y el atributo hreflang cuando el idioma del recurso al que enlaza sea diferente al idioma del documento
  
• No repetir el título de los artículos, para serie como las de Imprescindibles, Noticias, etc. numerarlas.
  
• Evitar que un artículo se llame como una etiqueta para evitar enlaces iguales con rutas diferentes.
  
• Utilizar siempre anclas con un nombre único e irreptible para que no colisionen con las de otros artículos cuando se visualicen en una misma página. El código único a utilizar será: fecha_nº, por ejemplo, 01_10_08_1
  

Tareas para futuras revisiones

• Estructura interna de las páginas (encabezados, elementos bien utilizados, etc.)
  
• Medidas relativas
  
• Usabilidad

Notas

(1)La única excepción es el título de los artículos (que linca con el enlace permanente de ese artículo) puesto que me parecía que se perdía legibilidad.