HTML abbr: spiegare le abbreviazioni e usare l’attributo title

HTML <abbr> identifica un'abbreviazione o un acronimo. Il suo attributo opzionale title può fornire il termine completo, ma le spiegazioni essenziali dovrebbero apparire anche nel testo visibile in modo che i lettori possano comprenderle senza un mouse.

Segna un'abbreviazione e spiega il suo termine completo

Quando un termine tecnico appare per la prima volta, scrivere il termine completo insieme alla sua abbreviazione aiuta i lettori a capirlo. L'elemento abbr identifica il testo come abbreviazione; non cerca né traduce automaticamente il termine completo. Non è necessario racchiudere ogni abbreviazione che il tuo pubblico già conosce in questo elemento.

Salva il seguente documento come abbreviation.html e aprilo in un browser. La prima frase mantiene visibile la spiegazione, mentre la seconda dimostra l'attributo title.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Abbreviazioni e termini completi</title>
</head>
<body>
  <p>I documenti web usano HyperText Markup Language
    (<abbr>HTML</abbr>) per definire la propria struttura.</p>
  <p>Altra abbreviazione: <abbr title="World Wide Web">WWW</abbr></p>
</body>
</html>

La prima frase mostra il termine completo accanto a HTML. A seconda del browser, WWW nella seconda frase potrebbe avere una sottolineatura puntinata e, passando il cursore sopra di esso, potrebbe apparire World Wide Web in un tooltip. Il browser determina l’aspetto predefinito della sottolineatura e del tooltip, quindi questa non è una funzione di design che garantisce un risultato visivo coerente.

Cosa deve essere inserito nell'attributo title?

L'attributo title su abbr è opzionale. Se lo usi, includi il termine completo rappresentato da quell'abbreviazione, senza testo promozionale o spiegazioni non correlate. Un valore title su un elemento abbr non si applica automaticamente ad altri elementi abbr nello stesso articolo. Se rimuovi title dall'esempio, l'abbreviazione visibile WWW rimane.

Non confondere l'attributo title globale con l'elemento title del documento. L'attributo title su abbr fornisce informazioni supplementari su quell'abbreviazione; l'elemento title nell’elemento head del documento fornisce il titolo della pagina.

Non fare affidamento solo su un tooltip

I touchscreen non offrono il passaggio del mouse e l'accesso alle informazioni del title varia anche con la navigazione tramite tastiera e le tecnologie assistive. Se una spiegazione è necessaria per comprendere un'abbreviazione, rendila visibile nel testo, come nella prima frase dell'esempio. Rendi il contenuto stesso leggibile piuttosto che trasformare abbr in un inutile punto di tabulazione o pulsante solo per mostrare un tooltip.

Se la spiegazione è lunga, scrivila vicino alla prima occorrenza o aggiungi un collegamento a una definizione. Considera la scorrevolezza della lettura prima di ripetere il termine completo nell’attributo title quando lo stesso paragrafo lo spiega già. Il riferimento MDN dell’elemento abbr illustra le condizioni d’uso e l’accessibilità.