a:focus facilita la navigazione da tastiera

La navigazione da tastiera è una delle alternative alla navigazione con mouse ed è un aspetto trattato al punto 9 delle WCAG 1.0.

Se abbiamo provato una volta a navigare una pagina web con il tasto TAB, abbiamo notato che quando il focus si posiziona su un link appare un bordo puntato (dipende dal browser che si utilizza), in alcuni casi invisibile.

In questo caso possiamo aiutare i nostri utenti utilizzando la pseudoclasse dinamica :focus applicata al marcatore a.

Vediamo un esempio con un semplice menu:

<ul>
  <li><a href="#">Primo</a></li>
  <li><a href="#">Secondo</a></li>
  <li><a href="#">Terzo</a></li>
  <li><a href="#">Quarto</a></li>
</ul>

/* css */

li {
  display: inline;
  margin-right: 5px;
  list-style: none;
}

a:link, a:visited {
  padding: 5px 10px;
  background: #f6f6f6;
  color: #cc0000;
  text-decoration: none;
  border: 1px solid #e7e7e7;
}

a:hover {
  background: #fff;
  border: 1px solid #ccc;
}

a:focus {
  background: #cc0000;
  color: #fff;
  border: 1px solid #ccc;
}

a:active {
  background: #cc0000;
  color: #fff;
  border: 1px solid #ccc;
}

Vedi esempio

Per ottenere lo stesso effetto con Internet Explorer dobbiamo utilizzare la pseudoclasse dinamica :active.

Nota del traduttore

Questo articolo è una traduzione da Seraccesible.net. L'autore dell'articolo è Marco Giacomuzzi, il quale ha permesso questa traduzione.