Svelato l'arcano dei tag `abbr' e `acronym' [Web Semantico]

Categorie:

Ebbene sì — non ci dormite la notte lo so — ma le differenze di presentazione dei tag HTML abbr e acronym nei vari browser è alquanto difforme — che novità! Le marcature in questione aiutano ad esplicitare tutte le sigle e abbreviazioni, siano esse di uso comune o specifiche di un linguaggio settoriale: lasciando il puntatore del topo¹ sull’oscura sequenza di caratteri (spesso zeppa di consonanti ) come per magia apparirà un fumetto (il tooltip) recante la spiegazione della sigla.

codice (X)HTML

La sintassi è molto semplice:

<abbr title="Hyper Text Mark-up Language">HTML</abbr>
<acronym title="North Atlantic Treaty Organisation">NATO</acronym>

Il testo inserito con l’attributo title sarà quello visualizzato. Perché hanno previsto 2 tipi di tag che sembrano molto simili? Beh, semanticamente una abbr o abbreviazione dovrebbe essere usata per tutte le sigle che si pronunciano usando le iniziali (p.e. BMW, UE) mentre più propriamente un acronym o acronimo è una sigla che si pronuncia come una normale parola (p.e. FIAT, INPS, BOT, Col.f.). Un acronimo è quindi un particolare tipo di abbreviazione. La distinzione potrebbe essere cruciale nel caso il testo venga letto da un sintetizzatore vocale, ad esempio!

situazione

Browser	<acronym>	<abbr>
Firefox 3.6+	Sottolinea automaticamente l’acronimo con una linea punteggiata e, quando l’utente passa il cursore sull’acronimo, visualizza il testo alternativo.	Sottolinea automaticamente l’abbreviazione con una linea punteggiata e, quando l’utente passa il cursore sull’abbreviazione, visualizza il testo alternativo.
Explorer 8	Visualizza il testo alternativo ma non segna l’acronimo con una linea punteggiata.	Visualizza il testo alternativo ma non segna l’abbreviazione con una linea punteggiata.
Chrome 5+	Visualizza il testo alternativo ma non segna l’acronimo con una linea punteggiata.	Visualizza il testo alternativo ma non segna l’abbreviazione con una linea punteggiata.
Safari 4+	Visualizza il testo alternativo ma non segna l’acronimo con una linea punteggiata.	Visualizza il testo alternativo ma non segna l’abbreviazione con una linea punteggiata.
Opera 10.10	Sottolinea automaticamente l’acronimo con una linea punteggiata e, quando l’utente passa il cursore sull’acronimo, visualizza il testo alternativo.	Sottolinea automaticamente l’abbreviazione con una linea punteggiata e, quando l’utente passa il cursore sull’abbreviazione, visualizza il testo alternativo.

Quindi solamente Firefox e Opera sono ligi abbastanza da segnalare opportunamente con una linea punteggiata quella porzione di testo che in realtà cela il dispiegamento dell’abbreviazione o dell’acronimo. Cosa ottima! Perché gli altri browser non lo fanno? Il povero lettore non può spazzolarsi tutta la pagina con il puntatore del topo alla caccia di eventuali significati delle sigle che legge! Dovrebbe essere il browser a segnalarglielo in qualche modo, ove presenti.

pezza universale

La soluzione universale consiste nell’inserire in uno dei CSS, ovverosia uno dei fogli di stile annidiati (si usa ancora ‘sta parola verooo ;-)), del vostro sito le seguenti direttive:

abbr, acronym
{
    border-bottom: 1px dotted;
    cursor: help;
}

Oltre ad impostare la riga puntinata cogliamo l’occasione per cambiare la forma del puntatore in una più coerente freccia affiancata da un punto interrogativo (o nel solo punto di domanda, dipende dal browser).