Índice
- 1 – Introducción
- 2 – Criterios referentes a enlaces
- 3 – Recomendaciones para identificar el propósito de los enlaces
- 4 – Conclusiones
- 5 – Referencias
1 – Introducción
Los enlaces son parte fundamental de la web desde sus inicios. Nos permiten navegar dentro de un sitio o entre sitios web diferentes. Ponen la información a nuestro alcance con sólo un clic.
Sin embargo, hay ciertas directrices que deberías tener en cuenta cuando definas un enlace. No sólo mejorarán la accesibilidad de tu página. También son recomendables para el SEO. Aquí te las resumo.
2 – Criterios referentes a enlaces
Las WCAG 2.1 distinguen dos criterios diferentes a este respecto. Ambos pretenden asegurar que el propósito de cada enlace quede claro para el usuario. Como veis, se trata de un punto que agradece cualquier persona. Uno es de nivel A (básico) y otro de nivel AAA (excelente). ¿Qué diferencia hay entre ellos?
- El criterio 2.4.4 (A) requiere que el propósito del enlace esté claro dentro de su contexto (párrafo, fila de una tabla, etc…).
- El criterio 2.4.9 (AAA) requiere que el propósito del enlace esté claro teniendo en cuenta sólo el texto del propio enlace.
Como todo, será mucho más fácil satisfacer el criterio básico que el avanzado. Aun así, en este caso es bastante factible conseguir cumplir con el criterio AAA sólo con tener un poco de cuidado al escoger el texto de los enlaces.
Esto puede mejorar sustancialmente la experiencia de usuario de algunos perfiles. Los usuarios de lectores de pantalla, por ejemplo, pueden tabular de enlace en enlace sin tener que pararse a explorar el entorno de cada uno para identificar su propósito. También se beneficiarán de ello las herramientas que generan una lista de enlaces para facilitar la navegación a sus usuarios.
3 – Recomendaciones para identificar el propósito de los enlaces
Antes de nada, recordar que, si el enlace se trata de una imagen, debemos tener en cuenta las mismas reglas. La única diferencia es que, en lugar de presentar el texto, este irá incluido dentro de la imagen como texto alternativo.
Sigue las siguientes recomendaciones para tus enlaces y ofrecerás un contenido mucho más accesible para muchos:
- Evitar Introducir enlaces con el texto de la URL a la que dirigen. No es muy amigable para las personas.
- Evitar textos genéricos, como «este enlace», «haga clic aquí», «en esta página»… Cuando un lector de pantalla tabula por ellos o se genera una lista de enlaces, su propósito queda opacado.
- Si el enlace se abre en una nueva pestaña, avisarlo mediante un texto o un icono reconocible. El icono tendrá que llevar el texto alternativo correspondiente. Esto ayuda a que la gente no salga por error de la página en medio de un proceso, o que sepa claramente cómo volver a la ubicación anterior.
- Ya sea con texto o con un icono de aviso, la información de apertura en una nueva ventana debe ser parte del enlace. De nuevo, esto ayuda a que los usuarios de lectores de pantalla y otras herramientas puedan predecir su comportamiento.
En general, es bastante sencillo cumplir con el criterio AAA para los enlaces. Puede ser más complejo en casos en que tengamos un listado de elementos, en cada uno de los cuales disponemos de varios enlaces. En ese caso, el propósito puede deducirse por contexto, como en el criterio A. Sin embargo, si también quieres cumplir aquí con el nivel AAA, te sugiero ocultar la información adicional a la vista, pero dejándola visible a las tecnologías de asistencia. Aquí te dejo una técnica CSS para ocultar un elemento a la vista pero no a tecnologías de asistencia (se abre en una ventana nueva).
4 – Conclusiones
Poder distinguir el propósito de los enlaces es una cuestión fundamental. Podemos optar por la opción más básica o la ideal. En este caso, dado el esfuerzo que puede requerir, deberíamos apuntar por defecto a lo más alto. Espero que os haya sido de utilidad. ¡Hasta la próxima píldora!
5 – Referencias
[1] Understanding Success Criterion 2.4.4: Link Purpose (In Context) (se abre en una ventana nueva).
[2] Understanding Success Criterion 2.4.9: Link Purpose (Link Only) (se abre en una ventana nueva).
