Universidad de Alicante
Departamento de Lenguajes y Sistemas Informáticos

Accesibilidad Web

Buscador

Migas de pan

Estás en: Accesibilidad web > Ejemplos > Errores típicos > Enlaces y navegación > Enlace "Más información"

Enlace "Más información"

En algunos tipos de sitios web, como portales de noticias, de productos o blogs, es muy común mostrar un listado de elementos (noticias, productos o entradas) con un cierto texto breve y con un enlace para obtener el texto completo asociado al elemento (la noticia completa, la descripción completa del producto o la entrada completa). En estos enlaces se suelen emplear textos como "Más información", "Más info", "Más detalle", "Leer más", "Ver más" o incluso simplemente unos puntos suspensivos "...". Estos textos no son descriptivos y no indican el contenido que se va a encontrar, lo cual plantea un problema de accesibilidad.

Elementos clave de la solución

Solución

Veamos dos ejemplos de este problema. El sitio web AulaTIC contiene en su página principal un apartado de noticias, cada una con un enlace "Leer más...". Además, exiten una serie de enlaces que comienzan con el símbolo "»" incorrectamente etiquetados. En la siguiente imagen podemos observar cómo se visualiza la página en el navegador Opera:

Sitio web AulaTIC

El navegador Opera, en el menú Herramientas posee la opción Enlaces que muestra una lista con los enlaces que posee la página. En las siguientes dos imágenes podemos ver parte de esta lista, podemos ver que se repiten varias veces enlaces que contienen el mismo texto:

Lista de enlaces del sitio web AulaTIC

Lista de enlaces del sitio web AulaTIC

El sitio web Diario de Actualidad Universitaria de la Universidad de Alicante muestra en su página principal una lista de actividades. Cada actividad posee un enlace "Más..." que permite acceder a más información sobre una actividad concreta. En la siguiente imagen podemos observar cómo se visualiza esta página en Opera:

Sitio web Diario de Actualidad Universitaria

Con la lista de enlaces del navegador Opera podemos comprobar que el enlace "Más..." se repite varias veces:

Lista de enlaces del sitio web Diario de Actualidad Universitaria

¿Qué problema en común tienen estos dos ejemplos? Un usuario que emplea un navegador visual, como percibe el enlace "Más información" dentro de un contexto sabe cuál es el propósito de ese enlace (cuál es el destino). Pero un usuario que emplea un navegador con un lector de pantallas tiene problemas.

Las Pautas de Accesibilidad al Contenido en la Web 1.0 contienen un punto de verificación dedicado a este problema:

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"),

Existen soluciones, como la exlicada en Enlaces para "leer más" que sean simples y accesibles que hacen uso de CSS para ocultar un texto en los enlaces que ofrece una descripción larga del enlace. Aunque este tipo de solución es válida, este problema de accesibilidad se puede resolver fácilmente con el atributo title, tal como se indica en el punto de verificación anterior.

Si se consulta la definición del atributo title en la especificación de HTML 4.01, se puede leer lo siguiente:

This attribute offers advisory information about the element for which it is set.
[...]

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource.

Veamos esta solución aplicada a un ejemplo sencillo. La página Más información incorrecta contiene cuatro elementos, cada uno con un enlace con el texto "Leer más", tal como se puede ver en la siguiente imagen:

Página incorrecta con enlaces Leer más

Si consultamos la lista de enlaces del navegador Opera podemos comprobar que el enlace "Leer más" se repite cuatro veces:

Lista de enlaces de la página incorrecta con enlaces Leer más

Si utilizamos el atributo title en los enlaces y se informa del destino del enlace, por un lado los usuarios de navegadores visuales se benefician porque al situar el cursor del ratón sobre un enlace aparece una nota con el valor del atributo title, tal como se ha hecho en la página Más información correcta con title que podemos observar en la siguiente imagen:

Página correcta con enlaces etiquetados con title

Además, en la lista de enlaces aparece también el valor del atributo title, por lo que el destino de los enlaces se identifica correctamente con este mecanismo de navegación:

Lista de enlaces de la página correcta con enlaces etiquetados con title

Otra solución a este problema es cambiar de estrategía: en vez de incluir un enlace con el texto "Más información" en cada elemento, ¿por qué no convertir una parte significativa del elemento en el enlace? Esta es la solución que adoptan la mayoría de períodicos, donde el titular de la noticia es un enlace para leer la noticia completa. En la página de ejemplo Más información correcta se ha optado por esta solución. En la siguiente imagen podemos ver como se visualiza esta página en el navegador Opera:

Lista de enlaces de la página correcta con los enlaces cambiados

En la lista de enlaces de Opera podemos observar que el destino de los enlaces se identifica correctamente con este mecanismo de navegación:

Lista de enlaces de la página correcta con los enlaces cambiados

En Fangs la lista de enlaces de una página no es utilizable, en el sentido que no nos permite desplazarnos desde ella al destino del enlace seleccionado (recordemos que es sólo un emulador), pero los lectores de pantallas "reales" sí que lo permiten. Por ejemplo, en JAWS tenemos los siguientes atajos de teclado para navegar entre los enlaces:

En JAWS se puede configurar cómo se leen los enlaces cuando existen varias posibilidades, como leer el texto del enlace o leer el valor del atributo title. En la siguiente imagen podemos ver la ventana de Opciones HTML donde se pueden configurar las opciones de los Enlaces; se ha seleccionado la opción Busqueda personalizada para que se lea en primer lugar el valor del atributo title; si no existe, el texto del propio enlace; si no existe, el valor del atributo alt si hay una imagen; y si no existe, el valor del atributo href del enlace:

Opciones de configuración de los enlaces en JAWS

En los siguientes enlaces se puede escuchar cómo lee JAWS las páginas anteriores de ejemplo:

Por último, la herramienta Link Context Checker ayuda a comprobar si los enlaces de una página tienen sentido fuera de contexto.

Estándares, licencia y contacto