domingo, 5 de julio de 2009

Ejemplo de enlace "más información" correcto

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.

En mi ejemplo Enlace "Más información" explico cómo se tienen que escribir estos enlaces para que no supongan un problema de accesibilidad.

1 comentario:

Anónimo dijo...

He leído el artículo muy por encima, pero otra opción que creo que no mencionan es incluir un texto que aclare el destino del enlace en un elemento no visible en pantalla pero sí perceptible para lectores de pantalla, es decir, en un span con un indentado negativo o posición absoluta negativa. Creo que esta opción es mejor ya que el atributo title no se muestra por defecto en lectores de pantalla.
Por ejemplo, un enlace de este tipo podría ser: Más información [span class="offscreen"]sobre Cursos en Madrid[/span]
La clase offscreen tendría unos estilos tal que "text-indent: -10000em;", por ejemplo.