Percorso di navigazione nel sito per arrivare a questa pagina:

home » eXtreme » fogli di stile » Visualizzare le accesskeys con i css

Visualizzare le accesskeys con i css

Sfruttando appieno le potenzialità dei css2, è possibile visualizzare le accesskeys accanto ai link senza appesantire il codice (x)html.

Prendiamo ad esempio un elenco di link realizzato con una lista:

<ul>
<li><a href="#" accesskey="1">primo link</a></li>
<li><a href="#" accesskey="2">secondo link</a></li>
<li><a href="#" accesskey="3">terzo link</a></li>
<li><a href="#" accesskey="4">quarto link</a></li>
</ul>

La tecnica tradizionale

Tradizionalmente, per far visualizzare le accesskeys accanto al link dovremmo aggiungere manualmente il numerino dell'accesskey dopo le parole che identificano il link. Il codice sarebbe dunque:

<ul>
<li><a href="#" accesskey="1">primo link [1]</a></li>
<li><a href="#" accesskey="2">secondo link [2]</a></li>
<li><a href="#" accesskey="3">terzo link [3]</a></li>
<li><a href="#" accesskey="4">quarto link [4]</a></li>
</ul>

Semanticamente questo non ha molto senso e ce ne accorgiamo bene provando a leggere a voce alta il testo: "Primo link uno, secondo link due..."

L'uso dei css

L'utilizzo dei css ci consente di mantenere il codice (x)html più pulito, come nella pagina di esempio. Nel css utilizziamo il selettore di attributi per identificare tutti i link che hanno come attributo una accesskey; a questi link, grazie allo pseudoelemento :after andiamo ad aggiungere un "contenuto generato" che corrisponde al valore dell'accesskey. Nel css scriveremo dunque:

a[accesskey]:link:after {
  content: " [" attr(accesskey) "]";
  }

La stessa regola dovrà necessariamente applicarsi anche ai link già visitati, altrimenti l'accesskey scomparirà dopo aver utilizzato la prima volta il link. Il codice css completo sarà dunque:

a[accesskey]:link:after, a[accesskey]:visited:after {
  content: " [" attr(accesskey) "]";
  }

Limiti e soluzioni

Questa tecnica non è supportata da Internet Explorer 6 e precedenti per Windows, né da Internet Explorer per Mac. Questa limitazione può essere facilmente superata con l'utilizzo di un javascript che vada a lavorare sull'albero del DOM della pagina.

Ovviamente, disattivando i css le accesskeys spariscono. La tecnica a nostro avviso resta valida, in quanto la disattivazione dei css non compromette una funzione indispensabile per la corretta fruizione della pagina.

20 giugno 2006