Antes de profundizar en los detalles de cómo diseñar el subrayado perfecto, vale la pena definir nuestro objetivo. Queremos crear un subrayado visible pero discreto. Los usuarios deberían poder entender que el elemento es interactivo: cuando lo ven, deben saber inmediatamente que se trata de un enlace, pero no deben llamar demasiado la atención.
No subraye el texto que no esa un enlace.
No subraye ningún texto que no sea un enlace. Los subrayados proporcionan la posibilidad de dar fuerza, y los usuarios se sentirán confundidos y frustrados si el texto subrayado no coincide con sus expectativas. Si necesita enfatizar ciertas palabras u oraciones, usar cursiva o negrita es mucho más seguro.
Que sea breve.
Trate de mantener cortas las frases enlazadas, de tres a cinco palabras. Algo más desordenará el texto.
Haga que el texto sea significativo.
El texto de anclaje es el texto que se puede hacer clic en un enlace. Debería ser descriptivo: los usuarios deberían poder predecir qué obtendrán cuando hagan clic en un enlace. Por esta razón,
evite el texto de anclaje como "haga clic aquí" porque eso no dice casi nada sobre el contenido detrás del enlace y obliga a los usuarios a buscar más información sobre exactamente en qué harán clic. Los enlaces "Haga clic aquí" también hacen que un sitio web sea menos accesible para las personas que usan lectores de pantalla . La mayoría de los lectores de pantalla dicen "enlace" antes de cada enlace. Por ejemplo, JAWS leería un enlace de "automóviles" como "vales de enlace" . Por lo tanto, puede esperar que JAWS lea un enlace "haga clic aquí" como "enlace, haga clic aquí", que es totalmente nada informativo.
La consistencia es la clave para enseñarles a los usuarios cómo se ven los enlaces en su sitio web. No debería haber una situación en la que algunos de los enlaces en su sitio web estén subrayados y otros no. Diferentes significados visuales que se utilizan en diferentes páginas pueden confundir fácilmente a los visitantes. Elige un diseño de enlace y mantente firme a él.
Descender estrepitosamente es quizás el segundo problema más importante causado por los subrayados (después del desorden).
Esto sucede cuando los caracteres que contienen los descensores (como minúsculas p, g, j, y, yq) no se tienen en cuenta y el subrayado toca las formas de las letras. Esto puede causar una apariencia desordenada y fea y hacer que el texto sea menos legible.
Los descendientes y, g yp chocan con un subrayado, reduciendo la legibilidad.
Un buen subrayado se coloca debajo de la línea de base y omite los descensores. Ocultar el subrayado debajo de ciertos caracteres no solo mejorará la legibilidad sino que también se verá más refinado.
¿Cómo se evitar el problema de caída del descensor? Los enlaces en la web se diseñan con la decoración de texto: subrayan la propiedad CSS de forma predeterminada. Lamentablemente, esta propiedad no tiene en cuenta a los descensores.
Entre las soluciones que abordan este problema,
la más simple es la propiedad CSS text-decoration-skip . Especifica qué partes del contenido de un elemento deben omitirse mediante la decoración del texto. Controla todas las líneas de decoración de texto dibujadas por un elemento y también cualquier línea de decoración de texto dibujada por sus antepasados.
La propiedad
text-decoration-skip no es compatible en todos los navegadores, sin embargo. Alternativas ( como
box-shadow ) valdría la pena explorar si su texto es difícil de leer sin él.
Si su navegador es compatible con la propiedad de omisión de decoración de texto, notará que los descendientes aquí (como y y p) tienen un pequeño espacio en blanco a su alrededor.
