Enlaces para “leer más” que sean simples y accesibles

¿Alguna vez te has visto en la tesitura de que no sabes cómo diablos solucionar el hecho de tener que incliur un enlace que sirva para ampliar la información del texto que lo precede? ¿Y tener que aguantar que la herramienta de validación automática de accesibilidad te diga que tienes vínculos con el mismo nombre y eso no puede ser así? Quizá la pregunta es un tanto enrevesada, lo confieso, pero es que la situación tiene una serie de condicionantes que la hacen especial. Nuestro objetivo es hacer de este tipo de vínculos, una cosa simple y accesible. Analicémoslo.

Se trata, por lo general, de un listado de elementos de texto, con una cierta cantidad de caracteres cada uno. Suele constar de un titular y un pequeño texto de introducción. Al final de éste es cuando solemos necesitar un vínculo que nos lleve a la explicación extendida, al detalle, al texto completo de ese contenido.

Recapitulemos:

  • Listado de elementos
  • Titular
  • Pequeño texto de introducción
  • Vínculo para ir al texto completo

El ejemplo típico lo podemos encontrar en una lista de titulares de prensa, o de titulares de noticias, de los que se ofrece en una página principal un avance, un extracto. Ese avance consta del titular, de un pequeño texto que nos anticipa la temática del contenido, y un vínculo que nos lleva al texto completo de la noticia.

Vamos a ver algunos ejemplos prácticos:

Modelo de listado de noticias con vínculo a texto completo de www.warp.es

Titulares de noticias en warp.es

Modelo de listado de noticias con vínculo a texto completo de www.terueldigital.es

Titulares de noticias en terueldigital.es

Modelo de listado de noticias con vínculo a texto completo de www.aragonradio.es

Titulares de noticias en aragonradio.es

Una vez aclarado el modelo del problema que se quiere resolver, vayamos al detalle y veamos cómo resolvemos el vínculo que nos lleva al texto completo, de tal forma que éste sea simple y accesible.

Para ello me voy a rodear de dos textos que en este sentido son los que me han empujado a escribir esto:

La cuestión es que cuando hacemos un vínculo del tipo “leer más”, “ver más”, “más información”, etc., estos textos resultan bastante poco descriptivos, ya que no nos anticipan en ninguna medida lo que nos vamos a encontrar a continuación. Y los usuarios de lectores de pantalla, además, es muy posible que no se sientan nada contentos al toparse con ese tipo de vínculos.

Por lo tanto se hace necesario idear una forma para que:

  • Los textos de los enlaces nos den información de lo que nos vamos a encontrar tras él
  • Los usuarios de lectores de pantalla conozcan el contenido de los vínculos

La primera solución que se plantea es la que pasa por hacer uso de CSS para esconder a ojos de los navegadores que las soporten el contenido descriptivo de estos vínculos. La cosa sería así:

  • Para navegadores con soporte CSS: ponemos un texto vinculado en el que escondemos una parte del mismo. Por ejemplo: Pulse aquí para ver más información sobre la noticia titulada “El huracán Wilma se acerca a Cancún”. A través de CSS esconderíamos una parte de ese texto, de tal modo que nos quedase algo así como “Pulse aquí para ver más información“.
  • Para navegadores sin soporte CSS y lectores de pantalla usaríamos exactamente el mismo código, de tal modo que nos aparecerían unos vínculos del tipo: Pulse aquí para ver más información sobre la noticia titulada “El huracán Wilma se acerca a Cancún”.

El código para hacer esto se puede ver tranquilamente en Simple, accessible “more” links, y sería algo así como:

Pulse aquí para ver más información <span>sobre la noticia "El huracán Wilma se acerca a Cancún"</span>

El CSS sería el siguiente:

span { position: absolute; left: -1000px; width: 900px; }

De este modo lo que haríamos sería esconder o sacar de la pantalla la parte del texto encerrada dentro de la ertiqueta span. No usaremos el display:none; porque éste no se lleva muy bien con los lectores de pantalla.

Hasta aquí lo que habremos conseguido es dar la opotunidad a los usuarios de lectores de pantalla y navegadores sin soporte CSS de contar con unos vínculos accesibles y descriptivos. Pero, ¿qué sucede con los usuarios de navegadores con soporte CSS? Al fin y al cabo estos vínculos, tal y como se han construido, si bien guardan un cierto orden semántico, de cara a los usuarios no son todo lo descriptivos que debieran. Algo hay que hacer. Y en este punto es donde entra a jugar su papel el texto referido de knusperpixel.com: Simple, accessible “more” links – v2.

Esta segunda parte lo que va a proporcionarnos es un poco más de información cuando vayamos a interactuar con el vínculo. Es decir, aquí se tiene en cuenta, una vez superado el estadio de la accesibilidad para todos, la experiencia de usuario a la hora de enfrentarse al vínculo. Y qué mejor opción que la que piensa el autor cuando se pregunta que por qué no enseñar ese texto que antes escondíamos, cuando el ratón pase por encima del vínculo.

Dicho y hecho. A través de CSS, de nuevo, lo que se pretende hacer es crear un tooltip en el que se nos muestre la información que antes encerrábamos en un span y la desplazábamos fuera de la pantalla para hacerla invisible.

Al igual que en el ejemplo anterior, el código se puede ver en Simple, accessible “more” links – v2, y sería algo así como:

.col2 a:hover, .col2 a:focus, .col2 a:active { /* Al pasar el raton por encima hacemos 'position:relative' para tener un punto de referencia */
position: relative;
}
.col2 a:hover span, .col2 a:focus span, .col2 a:active span { /* Tomamos el span que antes escondiamos, y lo situamos cerca del link */
left: 20px; top: 20px; width: 100px;
padding: 5px; line-height: 1; font-size: 80%; background: #FFFFF6; border: 1px solid #666; color: #000; text-decoration: none;
}
.col2 a:hover span:before, .col2 a:focus span:before, .col2 a:active span:before { /* IE no lo soporta, pero los demas si */
content: "Mas informacion sobre";
}

Y de ese modo sí que habremos cumplido con la etapa que nos faltaba, y es que los vínculos tuviesen, además de ser accesibles, la información necesaria que nos avanzase de qué se tratan, tanto para usuarios con lectores de pantalla, para usuarios con navegadores sin soporte de CSS, como para usuarios con navegadores que sí soportan CSS. Y además, para estos últimos, con un modelo de interacción agradable y funcional.

Comentarios

  1. Crees que un simple “title” sería poco?
    Sería mi opción…

  2. excelente articulo

  3. Un title no es que sea poco, es que quizá sea desaprovechar el contenido semántico que ya tenemos en el código (contenido) que escondemos vía CSS y que mostramos ante el evento onmouseover.

    Pero por ser válido, creo que sí que lo es.

  4. En principio me parece una buena idea pero al final me inquieta un poco el uso de ese pseudo-elemento before, aunque W3C lo recomienda para este tipo de cosas me genera una contradicción con la idea prioritaria de separar contenido de presentación.
    ¿ si el texto “mas información sobre” no tiene contenido semántico no seria necesario ponerlo, y si es que lo tiene, entonces para que ponerlo mediante CSS?
    Ya se que el resultado es correcto e incluso recomendado pero me parece contradictorio.

Deja tu comentario

*