¿Cómo construyes tus enlaces?

Hay un tema que cada vez que tengo un poco de prisa cuando estoy escribiendo un post me vuelve a la cabeza. Y es un tema recurrente además. Os explico.

Se trata de la construcción de los enlaces, de los vínculos:

Un vínculo es una conexión desde un recurso web a otro

Vale, es una de las características, sino la más importante, del hipertexto. Pero un enlace se puede construir de muchas formas. Y no estoy hablando de la tecnología a usar, no. Simplemente me refiero a que con HTML podemos complicarnos un poco la vida a la hora de enlazar documentos y recursos web.

Personalmente creo que he elegido esa segunda opción mediante la cual la vida creando hipervínculos es un poco más complicada, pero de momento va mereciendo la pena.

Básicamente la construcción de un enlace la estoy dividiendo en varias fases:

1. Seleccionar el texto a enlazar
2. Incluir el idioma del vínculo
3. Incluir, si procede, el idioma del recurso enlazado
4. Incluir una explicación textual del vínculo

Esto genera un código como el siguiente:

<a href="https://www.dominio.com" lang="es" xml:lang="es" hreflang="en" title="Comentario sobre el enlace">Texto a vincular</a>

Pero las opciones que nos ofrece la especificación HTML nos pueden complicar la vida mucho más. Simplemente, si nos ponemos en el modo accessibility developer deberíamos incluir dos atributos más al elemento a:

accesskey

Este atributo asigna una tecla de acceso a un elemento. Una tecla de acceso es un carácter único del conjunto de caracteres del documento

tabindex

Este atributo especifica la posición del elemento actual dentro del orden de tabulación del documento actual. Este valor debe ser un número entre 0 y 32767

De hecho, cada día pienso que estos dos últimos atributos deberían entrar a formar parte de la lista de elementos que forman parte del proceso de construcción de un vínculo, que señalaba al principio del post.

Por último hay otros dos atributos que en un momento dado pueden entrar a formar parte de este proceso, pero que hoy por hoy no lo veo tan claro como los anteriores:

type

Este atributo da una indicación sobre el tipo de contenido de los contenidos disponibles en la dirección del destino del vínculo. Permite a los agentes de usuario optar por la no obtención del contenido si se les avisa de que van a obtener contenidos de un tipo de contenido que no soportan.

onfocus

El evento onfocus ocurre cuando el foco se dirige hacia un elemento, ya sea con el dispositivo apuntador o por navegación con tabulador.

Lógicamente, el paso de la construcción de un vínculo que se resigna a la indicación de una URL no tiene nada que ver desde el punto de vista semántico y de la accesibilidad con un vínculo creado de forma más rica en información, como es la que propongo finalmente:

1. Seleccionar el texto a enlazar
2. Incluir el idioma del vínculo
3. Incluir, si procede, el idioma del recurso enlazado
4. Definir una tecla de acceso al vínculo (sólo en ocasiones especiales)
5. Definir un orden de tabulación para el vínculo
6. Incluir una explicación textual del vínculo

Así que a partir de ahora tendré que predicar con el ejemplo 😉

En Torresburriel Estudio desarrollamos las capacidades técnicas de tu equipo en temas de usabilidad, experiencia de usuario y diseño de producto a través de nuestros cursos online y presenciales. Contacta con nosotros y cuéntanos tus necesidades.