Enlaces accesibles – Accesibilidad web

Los enlaces son un elemento imprescindible en cualquier sitio web, es por ello que debemos escribir correctamente el código y el contenido de los mismos para hacer nuestro sitio web más accesible a todos los usuarios.

El texto que describa el enlace debe de ser claro, simple y comprensible, indicando al usuario donde va a dirigirse y proporcionando un contenido que tenga sentido fuera de contexto, esto quiere decir que el enlace debe de ser descriptivo por sí mismo, si vemos únicamente el enlace tenemos que saber a dónde nos lleva.

Un ejemplo de cómo NO se debe escribir un enlace podemos verlo en muchos blogs, donde el enlace para acceder al contenido de un artículo es del tipo ‘Leer más’ o ‘Clic aquí’, pese a que hay sectores que defienden este tipo de enlaces, os recomiendo leer el artículo Don’t Click Here: The Art of Hyperlinking donde se hace mención del mal uso de este tipo de enlaces.

Para que veáis un ejemplo de porque debemos escribir correctamente el contenido de un enlace, vamos a ver un como lee un lector de pantalla una página web, para ello he usado el plugin de Firefox Fangs Screen Reader Emulator de Peter Krantz.

Como podeis comprobar a continuación en el siguiente analisis, los enlaces del tipo ‘Leer más’ de un blog real donde se utilizan este tipo de enlaces, es completamente incomprensible para un lector de pantalla porque se utilizan varios enlaces con el mismo nombre pero diferente contenido y no son descriptivos fuera de contexto.

Continue reading 
Continue reading 
Continue reading 
Continue reading 

El atributo global “title” es muy útil para mostrar información adicional en cualquier elemento, pero no lo es para mostrar información relevante de un contenido ( hablando en términos de accesibilidad ) ya que no es legible por todos los productos de apoyo, por lo tanto debemos usar este atributo solamente para mostrar información que pueda ser útil o de interés, aunque a día de hoy es muy recomendable su uso tanto por accesibilidad, como por posicionamiento.

El atributo aria-label es detectado por los lectores de pantalla y realiza un cambio de texto del valor de este atributo por el contenido del texto del enlace, veamos un ejemplo

La lectura del lector de pantalla sería la siguiente:

Vinculo: Ir al tutorial de HTML Narrador de sistema Windows 8.1

Esta es sin duda una buena solución para mostrar contenido de texto sin que se visualice en la página pero que pueda ser leido por los lectores de pantalla, este proceso no puede hacerse de cualquier forma, no podemos ocultar el texto complementario con las propiedades display o visibility ya que entonces el contenido tampoco sería detectado por los lectores de pantalla, la forma correcta de realizar esta tarea es crear unos estilos que no escondan por completo el texto como en el siguiente ejemplo.

Quizá los estilos sean un poco exagerados y no los necesites todos en tu documento, pero seguro que tampoco te molestan 3 o 4 lineas de código.

Comprobamos la visualización de nuevo con Fangs

Continue reading The old te...
Continue reading Who is the ...
Continue reading Notice important  ...
Continue reading Today is a ...

Las guías de accesibilidad recomiendan no hacer uso de estas técnicas para mostrar enlaces, pero a veces, por razones de diseño nos enfrentamos a ciertos problemas de accesibilidad, la solución a este problema pasa por hacer lo mismo que en los enlaces de tipo “Click aquí”, insertar texto oculto en el enlace, para hacer más accesible el enlace podemos ocultar la imágen con el atributo aria-hidden=”true” o dejar el atributo alt vacio, aunque esta no considero que sea una buena práctica y no ayuda mucho al posicionamiento.

Veamos un ejemplo correcto:

El resultado es el siguiente:

Clic aquí para acceder al tutorial de HTML

Los lectores de pantalla no reconocerán la imágen, mostrando solo el texto al usuario y los motores de búsqueda no encontrarán una imágen con un atributo “alt” vacío en nuestro documento, este caso es muy parecido al que vimos anteriormente, mucha gente recomienda dejar vacío el atributo “alt” para que no sea reconocido por el lector de pantalla sin más.

Importante

Debemos comprobar siempre el código apoyándonos en simuladores de lector de pantalla o en un lector de pantalla real para verificar el resultado y garantizar que todo se puede ver correctamente.

Cuando el enlace abre una ventana nueva, descarga un archivo o accede a un enlace externo deberíamos indicar al usuario el propósito de la acción que se va a realizar.

Al igual que en el uso de imágenes, las guías de accesibilidad recomiendan no hacer uso de estas técnicas para mostrar enlaces, además, para eso ya disponemos de otros elementos en HTML como por ejemplo los “input” de tipo “button”, asi que no sería concluyente analizar como se debe de hacer este proceso con enlaces, simplemente no se debería hacer, debemos usar los enlaces unicamente para lo que sirven, para navegar.

Pero los botones con un evento onclick tampoco son accesibles si Javascript está desactivado, así que si incluimos scripts en un documento ya sea en un botón o un enlace debemos apoyarnos en el elemento “noscript” para mostrar una alternativa diferente si la función nos lo permite o avisar al usuario de la necesidad de usar Javascript en el navegador para visualizar la página correctamente. Una solución a este problema pasa por usar “Javascript no intrusivo” en el documento, tema que escapa a la finalidad de este artículo.

Los enlaces deben de tener un color que contraste con el fondo del elemento y el resto del párrafo en el que se encuentran, además no deben depender unicamente del color, debemos decorar el texto del enlace especialmente en las zonas donde estos se encuentren acompañados de más texto.

Ahora os animo a repasar el código de vuestro sitio web y vuestros “templates” y revisar la accesibilidad de los enlaces.