Collegamenti esterni semplici ed accessibili
Traduzione dell'articolo originale "Simple, accessible external links" di Russ Weakley.
07 Novembre 2006
Lo scenario
Le linee guida per l'accessibilità ai contenuti del web (WCAG 1.0) dichiarano:
"Identificare con chiarezza l'obiettivo di ogni collegamento. [Priorità 2]. Un collegamento testuale dovrebbe essere abbastanza significativo da mantenere un senso se letto fuori contesto -- sia da solo che come parte di una sequenza di collegamenti. Un collegamento testuale dovrebbe anche essere conciso."
A seconda di come è letto questo punto di controllo, potrebbe significare che ogni link esterno dovrebbe essere identificato dal testo stesso del collegamento. Per esempio, potreste usare “ (collegamento esterno) “ in ogni collegamento che punta a delle risorse esterne.
Il problema
Esiste un modo per aggiungere un testo descrittivo a tutti i link esterni e poi sostituire questo testo con una piccola icona in quei browser che supportano i CSS?
La soluzione
1. Assegnate una classe al collegamento esterno.
<a class="external" href="#">sed diam nonummy</a>
2. Si potrebbe usare anche l’attributo title, ma un recente studio sui titoli di Steve Faulkner ha mostrato che non tutti i browsers mostrano l’attributo title in maniera indipendente dal mezzo. Invece, aggiungere un testo descrittivo all’interno di un collegamento esterno aiuta ad identificarne la destinazione.
<a class="external" href="#">sed diam nonummy (collegamento esterno)</a>
3. Racchiudete il testo descrittivo all’interno di un elemento <span>.
<a class="external" href="#">sed diam nonummy <span>(collegamento esterno)</span></a>
4. Create una regola CSS per “nascondere” il testo descrittivo. Anche se usare “display: none” sembra la soluzione migliore, questo metodo non è attualmente supportato da molti lettori di schermo (screen readers). Per questa ragione, è preferibile utilizzare un posizionamento assoluto per spingere il testo fuori dallo schermo.
a.external span
{
position: absolute;
left: -5000px;
width: 4000px;
}
5. Se volete che l’icona appaia differente per ogni stato del link, create tre varianti della stessa icona in un singolo file – lasciando molto spazio tra ognuna delle tre versioni. Per esempio:
6. Create una regola CSS per aggiungere un’icona come immagine di sfondo ai collegamenti esterni.
a.external:link
{
background: url(icon.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}
7. Create una regola CSS per aggiungere un’icona come immagine di sfondo ai collegamenti esterni già visitati.
a.external:visited
{
color: purple;
background: url(icon.gif) no-repeat 100% -100px;
padding: 0 20px 0 0;
}
8. Create una regola CSS per aggiungere un’icona come immagine di sfondo ai collegamenti esterni nel loro stato hover.
a.external:hover
{
color: red;
background: url(icon.gif) no-repeat 100% -200px;
padding: 0 20px 0 0;
}
9. Teoricamente, l’icona “collegamento esterno” dovrebbe essere spiegata da qualche parte all’interno del sito.
Esempi
Senza CSS attivo
Lorem ipsum dolor sit sed diam nonummy (collegamento esterno) nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Con CSS attivo
Lorem ipsum dolor sit sed diam nonummy (external link) nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Un utilizzo alternativo di questa tecnica potrebbe permettere di aggiungere del testo descrittivo o una piccola bandiera per quei collegamenti che puntano a delle risorse straniere.
Senza CSS attivo
Lorem ipsum dolor sit sed diam nonummy (risorsa in inglese) nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Con CSS attivo
Lorem ipsum dolor sit sed diam nonummy (risorsa in inglese) nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Nota:
In alcune versioni di Internet Explorer per Windows, quando i collegamenti sono spezzati in più righe, l’immagine di sfondo è mostrata alla fine della prima riga anziché alla fine del collegamento.
Traduzione
Externe Links gesondert kennzeichnen - Tedesco – grazie a Nina Gerling
Ti è piaciuto questo articolo? Aggiungilo a: del.icio.us
