Corso di CSS / Stati dei link e focus visibile da tastiera

Stilizza gli stati dei link con pseudo-classi come :link, :visited, :hover e :focus-visible mantenendo i link riconoscibili. Gli utenti da tastiera hanno bisogno di un indicatore di focus visibile, e lo stile hover da solo non può comunicare ogni stato interattivo.

Rendi i link riconoscibili

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

Il collegamento viene creato con un elemento a contenente href. Colorare semplicemente il testo di blu non lo rende un vero collegamento. Sottolineare aiuta anche i lettori che hanno difficoltà a distinguere i colori a capire quali parti possono essere seguite. text-underline-offset regola la spaziatura tra le lettere e la sottolineatura. Qui em si basa sulla dimensione del carattere del collegamento.

Usa un testo che descriva la destinazione, come “Informazioni per i visitatori”, piuttosto che una destinazione sconosciuta, come “Clicca”. Prima di far sembrare un collegamento normale come un pulsante, è necessario distinguere se si tratta di navigazione o azione. I collegamenti sono adatti per elementi che portano a un altro documento, mentre i pulsanti sono solitamente adatti per elementi che eseguono azioni sullo schermo corrente.

Confronta gli stati dei link e l’ordine nel codice sorgente

a:link { color: #1756a9; }

a:visited { color: #6b438c; }

a:hover { color: #b53239; }

a:active { color: #8a2630; }

Un collegamento può corrispondere a diversi stati contemporaneamente: un collegamento visitato sotto il puntatore corrisponde sia a :visited sia a :hover. Con specificità uguale e condizioni di cascata altrimenti uguali, prevale la dichiarazione successiva per la stessa proprietà. L'ordine link → visited → hover → active rende i colori hover e premuto osservabili indipendentemente dal fatto che la destinazione sia stata visitata o meno. Vedi Combinatori e pseudo-classi CSS.

Questo ordine non supera tutte le regole. Se hai selettori più specifici o altre condizioni di cascata, i risultati saranno diversi. Se il colore non cambia, controlla quale dichiarazione del colore è applicata negli strumenti per sviluppatori. :active non identifica in modo persistente la voce di menu della pagina corrente. Se hai bisogno di mostrare il menu della pagina corrente, considera una classe separata o un attributo semantico come aria-current.

Mantieni visibile il focus da tastiera

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

Il focus si riferisce all'oggetto che riceverà l'input della tastiera. Se la posizione corrente non è visibile durante la navigazione verso un collegamento con Tab, è difficile per l'utente sapere dove premere Invio. :focus-visible si applica in situazioni in cui il browser determina che è necessario mostrare il focus. Di solito appare nei movimenti da tastiera, ma non tutte le situazioni di clic/input sono semplicemente divise in due tipi. Per applicare questi principi anche ai campi di input, consulta la lezione Stati dei moduli CSS: focus, validazione, disabled e readonly.

outline disegna il contorno di focus e outline-offset lo separa dall'elemento. Non rimuovere l'indicatore predefinito con outline: none a meno che tu non fornisca un indicatore alternativo adeguato. Questo esempio mantiene sia la sottolineatura del link sia un contorno di focus visibile. Vedi MDN: :focus-visible.

Crea l'esempio a due file

Crea links.html e visit.html nella stessa cartella. Salva il primo codice come links.html e il secondo codice come visit.html in UTF-8. Il primo link ti porta al file separato effettivo, e il secondo link ti porta all'intestazione degli orari di apertura all'interno della pagina corrente.

<!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 #9b5d00; 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>

Testa i link con un mouse e una tastiera

1. Apri links.html e passa il mouse sul primo link. Controlla se diventa rosso. Se tieni premuto il pulsante del mouse, vedrai un colore rosso scuro. Poiché la navigazione avviene quando lo rilasci, il colore attivo non rimane dopo il clic.
2. Apri il primo link e torna indietro nel browser. Sposta il puntatore fuori dal link e controlla il colore dei link visitati. I risultati possono variare con nuovi profili, finestre private o cronologia cancellata, e le destinazioni già presenti nella cronologia possono apparire visitate fin dall’apertura dell’esempio.
3. Posiziona il puntatore fuori dal link e usa il tasto Tab per arrivare al primo link. Assicurati che appaia il contorno marrone, poi usa di nuovo Tab per passare al link successivo. Shift+Tab si muove nell'ordine opposto.
4. Con il focus sul primo link, premi Invio. Assicurati che visit.html si apra. Quando torni, attiva il secondo link con Invio e dovrebbe portarti alla sezione Orari di apertura.

La visualizzazione dei link visitati ha limitazioni sulla privacy. Alcune proprietà relative al colore, come color, possono essere utilizzate, ma la dimensione, l'immagine, ecc., non possono essere modificati liberamente per determinare se una visita è avvenuta. Per tutelare la privacy, il browser non espone il colore effettivo dei link visitati in getComputedStyle(), ecc., quindi non valutare la cronologia delle visite basandoti solo sul valore dello stile calcolato. Le restrizioni dettagliate sono descritte in :visited su MDN: :visited e restrizioni sulla privacy.

Diagnostica i cambiamenti di stato mancanti

• Se il link non funziona, controlla il nome del file in href e la posizione di visit.html. Prima, verifica se hai messo entrambi i file nella stessa cartella.
• Se vedi solo il colore al passaggio del mouse invece del colore alla visita, sposta il puntatore fuori dal link. Se l'hover è forzatamente attivato negli strumenti di sviluppo, disattivalo.
• Se la tastiera non funziona, controlla se è un vero link con un href. Anche le impostazioni di navigazione tramite tastiera del tuo browser/sistema operativo possono avere un effetto.
• Quando la linea di focus è tagliata, controlla l'overflow dell'elemento padre e lo spazio circostante. Su dispositivi mobili touch, l'hover può comportarsi diversamente rispetto al desktop, quindi le informazioni essenziali non sono mostrate solo all'hover.

Una volta terminata la pratica di cambiare l'ordine delle regole, riportale al loro ordine originale. Il CSS che è stato temporaneamente modificato negli strumenti per sviluppatori ritornerà al valore salvato nel file quando aggiorni la pagina, ma la cronologia di navigazione non viene azzerata semplicemente aggiornando.