Curso de CSS / estados de los enlaces y foco visible del teclado

Estiliza los estados de enlace con pseudoclases como :link, :visited, :hover y :focus-visible manteniendo los enlaces reconocibles. Los usuarios de teclado necesitan un indicador de enfoque visible, y solo el estilo hover no puede comunicar todos los estados interactivos.

Haz que los enlaces sean reconocibles

a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

El enlace se crea con un elemento a que contiene href. Solo colorear el texto de azul no lo convierte en un enlace real. Subrayar también informa a los lectores que tienen dificultad para distinguir los colores de qué partes permiten navegar. text-underline-offset ajusta la separación entre el texto y su subrayado. Aquí em se basa en el tamaño de fuente del enlace.

Usa un nombre que describa el destino, como “Información para visitantes”, en lugar de un destino desconocido, como “Haga clic”. Antes de hacer que un enlace regular parezca un botón, distingue si su función es navegar o ejecutar una acción. Los enlaces son adecuados para elementos que se mueven a otro documento, y los botones suelen ser adecuados para elementos que ejecutan acciones en la pantalla actual.

Compara los estados del enlace y el orden del código

a:link { color: #1756a9; }

a:visited { color: #6b438c; }

a:hover { color: #b53239; }

a:active { color: #8a2630; }

Un enlace puede coincidir con varios estados a la vez: un enlace visitado bajo el puntero coincide tanto con :visited como con :hover. Con igual especificidad y demás condiciones de cascada iguales, la declaración posterior gana para la misma propiedad. El orden enlace → visitado → hover → activo hace que los colores de hover y presionado sean observables, ya sea que el destino haya sido visitado o no. Vea Combinadores y Pseudo-Clases en CSS.

Este orden no prevalece sobre todas las reglas. Si tienes selectores más específicos u otras condiciones de cascada, los resultados serán diferentes. Si el color no cambia, verifica qué declaración de color se aplica en las herramientas de desarrollo. :active no indica de forma permanente qué opción del menú corresponde a la página actual. Si necesitas mostrar el menú de la página actual, considera una clase separada o una presentación semántica como aria-current.

Mantén el enfoque del teclado visible

a:focus-visible {
  outline: 3px solid #e58c1f;
  outline-offset: 3px;
}

El enfoque se refiere al objeto que recibirá la entrada del teclado. Si la ubicación actual no es visible al navegar a un enlace con Tab, es difícil para el usuario saber dónde presionar Enter. :focus-visible se aplica en situaciones donde el navegador determina que mostrar el enfoque es necesario. Generalmente aparece en movimientos de teclado, pero no todas las situaciones de clic/entrada se dividen simplemente en dos tipos. Para comparar el foco en enlaces con el foco en campos de entrada, consulta CSS Estados de formulario: Enfoque, Validación, deshabilitado y solo lectura.

outline dibuja el contorno de enfoque y outline-offset lo separa del elemento. No elimines el indicador predeterminado con outline: none a menos que proporciones un reemplazo adecuado. Este ejemplo mantiene tanto el subrayado del enlace como un contorno de enfoque visible. Consulta MDN: :focus visible.

Crea el ejemplo de dos archivos

Crea links.html y visit.html en la misma carpeta. Guarda el primer código como links.html y el siguiente como visit.html en UTF-8. El primer enlace te lleva al archivo separado real, y el segundo enlace te lleva al encabezado de horario de operación dentro de la página actual.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Link states exercise</title>
  <style>
    body { margin: 24px; font: 1rem/1.7 sans-serif; color: #333; }
    main { max-width: 65ch; }
    a { text-decoration: underline; text-underline-offset: 0.15em; }
    a:link { color: #1756a9; }
    a:visited { color: #6b438c; }
    a:hover { color: #b53239; }
    a:active { color: #8a2630; }
    a:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    nav li + li { margin-block-start: 0.7em; }
  </style>
</head>
<body>
  <main>
    <h1>Small Garden visitor information</h1>
    <nav aria-label="Instruction link"><ul>
      <li><a href="visit.html">Visitor information on a separate page</a></li>
      <li><a href="#hours">Opening hours on this page</a></li>
    </ul></nav>
    <h2 id="hours">Opening hours</h2>
    <p>Plant care takes place in the morning. These times are fictional sample content, not information about a real facility.</p>
    <p>Hover over the links or press Tab to check their colors and outlines.</p>
  </main>
</body>
</html>

<!doctype html>

<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Visitor Information</title></head>

<body><h1>Visitor information page</h1><p>This separate document is opened by the first link.</p><p><a href="links.html">Return to the link exercise</a></p></body></html>

Prueba los enlaces con un ratón y un teclado

1. Abre links.html y pasa el cursor sobre el primer enlace. Comprueba si se vuelve rojo. Si mantienes presionado el botón del ratón, verás un color rojo oscuro. Como la página se mueve en el momento que lo sueltas, el color activo no permanece después del clic.
2. Abre el primer enlace y vuelve al navegador con el botón de retroceso. Mueve el puntero fuera del enlace y comprueba el color de visita. Los resultados pueden variar en perfiles nuevos, ventanas privadas o historial borrado, y un destino visitado anteriormente puede aparecer morado desde el principio.
3. Coloca el puntero fuera del enlace y usa Tab para ir al primer enlace. Asegúrate de que aparezca el contorno naranja, luego pulsa Tab nuevamente para ir al siguiente enlace. Shift+Tab se mueve en el orden contrario.
4. Con el enfoque en el primer enlace, presiona Enter. Asegúrate de que se abra visit.html. Cuando regreses, activa el segundo enlace con Enter y debería llevarte al encabezado de Horario de Atención.

Los estilos de :visited tienen restricciones de privacidad. Se permiten algunas propiedades de color, como color, pero el tamaño, la imagen, etc., no se pueden cambiar libremente para determinar si ocurrió una visita. Por privacidad, getComputedStyle() devuelve el color del estado no visitado, aunque el usuario vea otro color. Ese resultado no permite comprobar el historial de visitas. Las restricciones detalladas se describen en :visited en el MDN y en la declaración de privacidad.

Diagnostica cambios de estado que no aparecen

• Si el enlace no se mueve, comprueba el nombre del archivo del href y la ubicación de visit.html. Primero, verifica si has puesto ambos archivos en la misma carpeta.
• Si solo ves el color de hover en lugar del color de visita, mueve el puntero fuera del enlace. Si hover está forzado en las herramientas de desarrollador, desactívalo.
• Si el teclado no se mueve, verifica si es un enlace real con un href. La configuración de navegación por teclado de tu navegador/sistema operativo también puede tener un efecto.
• Cuando la línea de enfoque se corta, revisa el overflow del elemento padre y el espacio circundante. En pantallas táctiles, hover puede comportarse de forma diferente que con un ratón, por lo que la información esencial no solo se muestra al pasar el cursor.

Una vez que hayas terminado de practicar cambiar el orden de las reglas, devuélvelas a su orden original. El CSS que ha sido modificado temporalmente en las herramientas de desarrollo volverá al valor guardado en el archivo cuando actualices, pero el historial de navegación no se restablece solo con actualizar.