Nell’articolo di oggi vediamo una semplice regola CSS, già presente in molti CSS Reset. Sto parlando della proprietà “outline”. Se la regola “outline” non viene impostata il browser visualizzerà un riquadro puntinato attorno a ogni link cliccato. L’impostazione di default è questa perché si è pensato anche a chi usa il tasto TAB per navigare, e senza bordatura perderebbe il focus senza più capire su che link è capitato. Sto pensando anche a chi non può usare il mouse per difetto visivo. Rimuovendo la bordatura renderesti il sito inaccessibile a questi ultimi.

Il bordo è presente sul link appena visitato

Tra l’altro definire il “focus” non è un optional, è chiaramente indicato nelle “web content accessibility guidelines“.

Vi starete chiedendo allora perché mai dovremmo rimuovere l’outline dai link. In realtà non ci limiteremo a rimuoverlo, ma forniremo una valida alternativa al focus di default.

Per l’esempio di cui sopra, abbiamo la proprietà “a:focus” nel CSS in questo modo:

#test1 a:focus { background: #FFFF00; }
#test2 a:focus { color: #FF6600; }
#test3 a:focus { outline: #FF0000 dotted medium; }
#test4 a:focus { color: #FFFFFF; background: #FF0000; }

Riferito a questo HTML:

<ul>
  <li>definire un <span id="test1"><a href="#test1">colore alternativo di background</a></span>,</li>
  <li>definire un <span id="test2"><a id="txt" href="#">colore per il testo</a></span>,</li>
  <li>cambiare il <span id="test3"><a id="brd" href="#">bordo di default</a></span>,</li>
  <li><span id="test4"><a id="multi" href="#">cambiare pi&ugrave; parametri</a></span> per dare alta visibilit&agrave;.</li>
</ul>

Non ti basta?

Aggiungere una didascalia a comparsa alle foto con i CSS3 Alcuni font, o meglio alcuni set di icone CSS: Reset CSS CSS Sprites: il rollover con una sola immagine usando i CSS Linux e font