Web Design  »  Articoli  »  Accessibilità 

Premessa

In questo articolo esamineremo come l'elemento link del linguaggio HTML possa essere utilizzato per favorire l'accessibilità delle pagine Web e per garantire un maggior supporto ai motori di ricerca. Esamineremo anche le nuove implicazioni semantiche che questo elemento può far emergere.

In questa prima parte esamineremo l'elemento così come viene utilizzato nella quotidianità della scrittura di codice HTML e ne analizzeremo la sintassi. Nella sezione successiva invece vedremo nello specifico le proprietà della link relationship, ossia il nuovo metodo per utilizzare l'elemento link nelle sue varianti di accessibilità.

L'elemento Link

L’elemento link è ben noto a chi sviluppa pagine web. Tutti lo avremo utilizzato, almeno una volta, in una delle modalità seguenti:

• per utilizzare un Inserire i fogli di stile in un documento:

  <link  rel="stylesheet" type="text/css" href="/stile.css" /> 

• per associare al documento, oltre al CSS di default, un Cambiamo al volo le dimensioni dei font con CSS e Javascript:

  <link  rel="alternate stylesheet" type="text/css" href="/alt_stile.css" title="green" /> 

• specificando, tramite l’ L'attributo media, un foglio di stile specifico per i vari dispositivi di output, ad esempio un CSS specifico per Stampe perfette di pagine web con i CSS o un CSS per Aural CSS: i fogli di stile uditivi:

  <link rel="stylesheet" type="text/css" media="print" href="/print.css" />

• per visualizzare con IE 5+ un'icona personalizzata del file html nella barra degli indirizzi, nelle scorciatoie del desktop, nel menu preferiti, ecc, dopo aver salvato il file tra i Preferiti:

  <link rel="shortcut icon" href="/favicon.ico" /> 

Riguardo quest'ultima sintassi ricordiamo che un’analoga funzionalità è adesso supportata anche da Konqueror, Galeon, Netscape 7 e Mozilla - a partire da una delle ultime beta.

Tuttavia è bene specificare che, per funzionare su questi browser, l’attributo rel può avere come valore "icon", oltreché il classico e ben noto "shortcut icon" ed è possibile utilizzare un file di immagine che non sia necessariamente ico, ma, ad esempio, può essere un file .gif o .png - tuttavia in questo modo si perderà la compatibilità con IE 5+ - per contro, con questi browser, è necessario specificare il mime type per mezzo dell’attributo type; ad esempio type="image/png" se si utilizza un file .png, oppure type="images/x-icon" se il file utilizzato è un file .ico.

Pertanto un esempio cross-browser di codice per le icone personalizzate è

<link rel="shortcut icon" type="images/x-icon" href="/favicon.ico" />

L’utilizzo dell’elemento link non si limita a questi contesti e può avere importanti risvolti in termini Web Semantico, di accessibilità e di supporto ai motori di ricerca.

L’elemento link esiste fin dalle prime versioni dell’HTML e le specifiche HTML 3.2 forniscono una definizione sintetica ma esaustiva della natura di questo tag: l’elemento link indica una relazione tra il documento ed un altro oggetto.

Laddove la gran parte degli elementi (X)HTML definisce la struttura e la funzione dei contenuti di una pagina, l’elemento link descrive la funzione delle pagine collegate ad un documento e dunque descrive la struttura del web.

Purtroppo queste importanti funzionalità dell’elemento link sono sconosciute a molti sviluppatori dal momento che non sono supportate da Internet Explorer che è di gran lunga il browser più diffuso.

Altri articoli

Altre guide

Altre newsletter