Ouroboros

Eccomi qui con un nuovo snippet.
Questa volta il nostro obbiettivo sarà di rendere un pochino piu’ accessibili le nostre pagine.

Vi sarà sicuramente capitato di vedere qualche pagina che nei loro link specificassero in modo visuale o testuale che quel tipo di collegamento è interno/esterno al sito. Questo naturalmente può sembrare superfluo ma aiuta moltissimo l’utente a sapere che tipo di collegamento è quello e soprattutto come gestire le finestre del proprio browser.

Ovviamente, questo accorgimento rientra nei principi di “accessibilità”. Anche se ovviamente non è obbligatorio trattare le diverse tipologie di link, a mio avviso è una pratica da adottare.

Bene sarà questo l’argomento di questo post, far capire al visitatore con che tipo di link si ha a che fare.

I CSS ci possono aiutare, infatti basta applicare una classe nei link per mostrare, prima del link, un’icona che rappresenta un collegamento esterno e che quindi si aprirà in una nuova finestra.

Iniziamo creando le nostre due classi CSS che specificheranno come dovranno essere i nostri due tipi di link

a.int {
text-decoration: underline;
color: blue;
}
a.ext {
background-image: url('icona-collegamento-esterno.gif') no-repeat top left;
padding-left: 44px; /* importante: questo padding a sinistra farà in modo che il testo del link non vada sulla nostra "icona"; specificare un valore maggiore della dimensione in larghezza della nostra gif */
color: red;
text-decoration: underline;
}

Abbiamo creato le classi che verranno usate mettendo l’attributo class=”int” per i link interni e class=”ext” per i link esterni.

Esempio:
<a href="http://www.miosito.org/foo.html" class="ext">Un collegamento esterno</a>
<a href="index.html">Torna nella homepage</a>

Alla prossima!