Enlazados a Archivos
Comparando estas dos formas de vincular un documento:
- Referencia rápida de WebAIM: Principios de accesibilidad web .
- Referencia rápida de WebAIM: Principios de accesibilidad web (PDF, 327 Kb) .
En la primera opción el enlace se parece a cualquier enlace, pero al pulsar en el, se descargará un archivo, lo cual no es agradable en todas las condiciones. En el segundo ejemplo informamos claramente de que se trata de un archivo y además en el ejemplo le indicamos el tamaño del mismo, lo cual a nivel de usuario le permite valorar si desea descargarlo o no.
Un enlace es una promesa, no una sorpresa.
Rian Rietveld
¿Debemos subrayar un enlace?
Un visitante debe poder distinguir un enlace en un párrafo de texto. Usar solo un color diferente puede ser problemático para los visitantes daltónicos o con problemas de visión. Si además esto hace que no encuentren una «llamada a la acción», nuestra empresa podría perder ingresos.
Y el usuario puede sentirse frustrado por no poder encontrar la información que necesita. El subrayado es el patrón universal para un enlace. Los usuarios lo obtienen de inmediato. Así que usa este patrón para enlaces, sobre todo en párrafos de texto.
Los enlaces que obviamente son enlaces, como en los menús o zonas de navegación, no tienen que estar subrayados.
El Diseño de los enlaces en botones.
Tenemos que destacar el botón elemento como un enlace, no tenemos que reinventar la rueda, incluso cuando sea tentador hacerlo como diseñador. Asi que utilizaremos enlaces lo suficientemente grandes e con suficiente espacio entre ellos.
La relación de contraste de color entre el texto y el fondo debemos intentar que sea de al menos 4,5:1 y para el subrayado/resaltado de al menos 3:1.
Dar estilo al Foco
Los navegadores agregan de forma nativa un borde alrededor de un elemento que tiene el foco del teclado. Es importante no eliminar ese borde en nuestro CSS y quizás definir un estilo propio acorde con la web.
Con las teclas de tabulación es posible saltar de un elemento enfocable a otro, como enlaces, botones y entradas de formulario. En WebAim podemos ver más sobre este tema.
Aquí tenemos que tener en cuenta dos errores habituales,
- Omitir el atributo href de un enlace evita que el enlace obtenga el foco del teclado.
- Un <div> con un evento de clic no funcionará correctamente con un teclado.
Para asegurarnos de que un enlace funcione correctamente en todos los dispositivos, debemos usar un elemento <a> real, con un href que contenga una URL. De esa forma, todos los dispositivos sabrán cómo operar el enlace.
Darle nombres a los enlaces
Es común usar una imagen o un ícono de fuente para un enlace. Los enlaces a las redes sociales a menudo son solo el logotipo del medio en cuestión, como el logotipo de Twitter. Cuando podemos ver ese logotipo no es una mala opción.
Pero si nuestro enlace depende de un lector de pantalla, necesitamos tener las cosas detalladas más claramente. Los lectores de pantalla anuncian el contenido de un sitio web, por lo que debemos indicarlo en forma de texto: un «nombre accesible» de como se le llama.
Hay varias formas de agregar el nombre accesible «Twitter» a un enlace, por ejemplo:
- Usar un ícono de imagen o fuente y agreguar la palabra «Twitter» al enlace. Esto también puedeser útil para las personas que no saben lo que significa el icono.
- Incrustar la imagen en el enlace, por ejemplo, el logotipo de Twitter y asignar a la imagen el texto alternativo «Twitter».
- Usar un ícono de fuente y asignar al enlace su nombre accesible usando aria-label=“Twitter”. La etiqueta aria reemplaza el anuncio del contenido (o contenido faltante) dentro del enlace.
<a href="link-to-twitter">
<span class="fab fa-twitter"></span> Twitter
</a>
<a href="link-to-twitter">
<img src="twitter-image.svg" alt="Twitter">
</a>
<a href="link-to-twitter" aria-label="Twitter">
<span class="fab fa-twitter"></span>
</a>
<!-- fa-twitter hace referencia a las fuentes del tipo font awesome pero existen otras muchas de iconos>Vínculos en la misma página
Los enlaces internos (en la página) saltan a un punto diferente en la misma página web. Eso es conveniente para el visitante, que puede saltarse gran parte de la página e ir directamente al contenido que le interesa.
Aquí está el código:
Enlace: <a href="#address">Our address</a>
Destino:<h2 id="address">Address</h2>
El atributo href debe apuntar a una ID. La forma antigua, apuntar a un enlace con un atributo de nombre, ha quedado obsoleta desde que se introdujo HTML5.
Nota : No solo el enfoque visual sino también el del teclado deben moverse al destino. Los navegadores modernos hacen esto por defecto. Los navegadores más antiguos necesitan un tabindex = «-1» en el elemento de destino para recibir el foco. La mejor manera de verificar esto es probarlo con un teclado real.
Lecturas obligadas:
- Mejores etiquetas de enlaces: para fomentar los clics Nielsen Norman Group
- 8 secretos del enlace perfecto en Web Designer Depot
- Por qué sus enlaces nunca deberían decir «Haga clic aquí» en la Smashing Magazine