miércoles, 15 de octubre de 2008

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):

Ventanita de Opera donde se listan los atajos de teclado de este blog

 

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"

 

Menú superior del blog con las opciones de Saltar al contenido, Saltar al menú y Cambiar color y tamaño del texto


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 Iconos de cambiar tamaño de fuente 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.)

Ventana de navegación por enlaces en Opera

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.

7 comentarios :
ramonono | Maeghith dijo...

"""
hay diversos enlaces de una misma papelera "Eliminar comentario" que apuntan a distintas rutas. Me ha sido imposible modificar esto en Blogger.
"""

Esas papeleras sólo aparecen si eres el dueño del blog, no son un problema de accesibilidad para los visitantes (en todo caso lo serían para el dueño del blog).

"""
Lo mismo me ocurre con los iconos en forma de flecha del menú "Archivo por fecha"
"""

Imagino que tendrás marcada la casilla "Expandir plantillas de artilugios" cuando editas la plantilla. Tanto el enlace a la papelera como el de esta flecha aparecen sólo si está activada (al menos en mi plantilla sí aparecen).

Para la papelera, con buscar "delete" aparece primero el enlace para borrar backlinks (b:include data='backlink' name='backlinkDeleteIcon') y luego el de borrar comentarios (b:includable id='commentDeleteIcon' var='comment').

El icono de la flecha en el archivo no es una imágen, sino un carácter normal que responde al entity &#9660; para el triangulo ▼ (y usa otras 2 entities de triangulos a derecha o izquierda dependiendo de la dirección del lenguaje), que está incluido en b:includable id='toggle' var='interval'.

ramonono | Maeghith dijo...

Perdón por el doble comentario, pero me acabo de dar cuenta que la papelera también aparece cuando eres el autor del comentario, vaya :-/

Olga Carreras dijo...

El problema de las papeleras es que nos le puedo poner aunque sea un title que identifique claramente el comentario que borra.

Con el triangulo pasa igual, tienes razón que son caracteres y no imágenes, pero aun así, en el listado de enlaces que puedes ver por ejemplo en Opera, me salen una y otra vez y no se sabe que hacen pues no se pueden identificar unívocamente.

Gracias de todas maneras por tus aportaciones.

ramonono | Maeghith dijo...

¿No valdría poner el mismo texto que hay en el permalink del comentario que hay justo al lado de la papelera?, del estilo: "Borrar comentario de $usuario del $anchor-text-del-permalink-del-comentario"

P.ej. el anchor text del permalink de mi segundo comentario dice "15 de octubre de 2008 15:47", entonces el texto alt de la papelera podría ser "Borrar comentario de ramonono|maeghith del 15 de octubre de 2008 15:47", vamos, la variable del nombre del usuario y la del timestamp formateado del comentario.

¿Habría algún problema con esto?, ¿no queda suficientemente claro?

Olga Carreras dijo...

Estaba tan obcecada con el título o autor del comentario que no me ha dado cuenta de que efectivamente la fecha más el autor me sirven perfectamente :-)

El código original era:

<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<img alt='Eliminar comentario <data:comment.timestamp/>' src='http://www.blogger.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>

lo que he hecho ha sido sustituir la papelera por un enlace significativo:

<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
Eliminar comentario de '<data:comment.author/>' a las <data:comment.timestamp/></a>


El resultado es "Eliminar comentario de 'Olga Carreras' con fecha de 15 de agosto de 2008 12:28"

Muchas gracias!!

Claudio dijo...

Hola que buena pagina.

Te escribo también para invitarte a participar en este nuevo blog para dar a conocer los secretos de la psicología para que todos tengamos una vida mejor.

Ven a ver si te sirve, puedes hacer tus preguntas y hasta contar una experiencia.

Te espero

http://nuestrapsique.blogspot.com
http://nuestrapsique.blogspot.com

©Prev>>ON 2008 dijo...

Hola Olga, me estoy desesperando. Acabo de crear un blog y después de personalizarlo a mi gusto (cambiar el header por un logo propio y tal) me he dado cuenta que la papelera para borrar comentarios no aparece. (incluso entrando como admin del blog) He probado a cambiar el código del HTML por este vuestro:
"Eliminar comentario de xx a las XX"

Pero sigue sin haber resultado.
No puedo borrar ningún comentario que me dejen en mis entradas del blog, puedes echarme una mano?

GRACIAS!

Publicar un comentario en la entrada