Tag HTML <abbr>
Il tag HTML <abbr> definisce un'abbreviazione o un acronimo, come "HTML", "Mr.", "Dec.", "ASAP", "ATM". Scopri come usarlo con W3Docs!
Il tag HTML <abbr> contrassegna un'abbreviazione o un acronimo — una forma ridotta di una parola o di una frase, come HTML, CSS, Mr., Dec., ASAP o ATM. Racchiudendo la forma breve in <abbr> e fornendo la sua espansione completa tramite l'attributo title, si trasforma una sequenza di lettere priva di significato in un contenuto auto-descrittivo e leggibile dalle macchine.
Questa pagina spiega a cosa serve <abbr>, perché è importante per l'accessibilità e la SEO, come si comporta l'attributo title (e i suoi limiti) e le buone pratiche per utilizzarlo correttamente.
Perché <abbr> è importante
Visivamente, <abbr> fa ben poco — al massimo, alcuni browser aggiungono una sottile sottolineatura punteggiata. Il suo vero valore è semantico: comunica al software, non solo ai lettori vedenti, che un testo è un'abbreviazione e cosa rappresenta.
- Screen reader. Le tecnologie assistive possono annunciare l'espansione contenuta nell'attributo
title, oppure leggere l'abbreviazione in modo adatto alle impostazioni dell'utente. Questo aiuta le persone che non possono vedere un tooltip al passaggio del mouse a comprendere acronimi comeWCAGoARIA. - Motori di ricerca e altri strumenti. Contrassegnare le abbreviazioni fornisce ai crawler, agli strumenti di traduzione e agli indicizzatori un contesto aggiuntivo sul significato reale dei termini abbreviati.
- Lettori non madrelingua e neofiti. Un lettore che non conosce
ASAPo un acronimo specifico di un settore ottiene il significato completo invece di dover indovinare.
In sintesi, un semplice HTML è solo quattro lettere; <abbr title="HyperText Markup Language">HTML</abbr> è quattro lettere più il loro significato, disponibile sia per gli esseri umani che per le macchine.
Sintassi
Il tag <abbr> va in coppia. Il contenuto è scritto tra il tag di apertura (<abbr>) e quello di chiusura (</abbr>).
Esempio del tag HTML <abbr>:
Tag HTML <abbr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><abbr title="Universal Resource Locator">URL</abbr> - This is a specific way of designating an individual resource address on the Internet </p>
</body>
</html>L'attributo title
Il tag <abbr> non ha attributi obbligatori, ma è l'attributo title a renderlo utile. Inserisci la forma completa ed espansa dell'abbreviazione in title:
<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for web pages.</p>Nei browser desktop, passando il mouse sull'abbreviazione viene mostrata l'espansione come tooltip. Gli screen reader possono inoltre esporre il valore di title agli utenti.
Limitazioni di title
Il tooltip di title è comodo, ma non bisogna affidarsi ad esso come unico modo per far scoprire l'espansione agli utenti:
- Appare solo al passaggio del mouse. Gli utenti con touchscreen (telefoni, tablet) e quelli che usano solo la tastiera generalmente non possono attivarlo.
- La sua visualizzazione è inconsistente tra gli screen reader e non è garantito che venga annunciato.
Per questo motivo, le Web Content Accessibility Guidelines (criterio di successo WCAG 3.1.4 Abbreviazioni) raccomandano di indicare l'abbreviazione per esteso nel testo circostante al primo utilizzo, per poi usare la forma abbreviata in seguito:
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr> (World Wide Web
Consortium) develops web standards. The W3C also maintains the HTML
specification.
</p>In questo modo il significato è disponibile per tutti — non solo per gli utenti che possono passare il mouse.
Attributi
Il tag <abbr> supporta gli Attributi Globali e gli Attributi Evento. Il più importante di questi è l'attributo globale title, descritto in precedenza.
Come applicare stili al tag HTML <abbr>
Per impostazione predefinita, alcuni browser mostrano una sottolineatura punteggiata sotto il contenuto di <abbr>, ma lo stile non è uniforme — ad esempio, versioni precedenti di alcuni browser non mostravano alcuna sottolineatura. Per ottenere un aspetto affidabile e prevedibile, è meglio stilizzarlo direttamente con CSS. Un pattern comune prevede un bordo inferiore punteggiato e un cursore help per suggerire che passandovi sopra vengono rivelate ulteriori informazioni:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
abbr {
text-decoration: none;
border-bottom: 1px dotted #000;
cursor: help;
}
</style>
</head>
<body>
<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for documents designed to be displayed in a web browser.</p>
</body>
</html>Quando usare <abbr> e buone pratiche
Usa <abbr> ogni volta che una forma abbreviata potrebbe non essere compresa da tutti i lettori, specialmente la prima volta che appare nel contenuto.
- Fornisci sempre un
titlecon l'espansione completa. Un<abbr>senzatitleaggiunge poco valore. - Scrivi il termine per esteso al primo utilizzo nel testo visibile (WCAG 3.1.4), poi usa l'abbreviazione in seguito. Non fare del tooltip
titlel'unica fonte del significato. - Limita il
titlealla sola espansione — scriviWorld Wide Web Consortium, non una frase intera di spiegazione. - Non abusarne. Non è necessario racchiudere ogni occorrenza di un'abbreviazione ben nota in una pagina; di solito è sufficiente contrassegnare la prima.
- Usalo anche per gli acronimi. L'HTML moderno non ha un elemento separato per gli acronimi —
<abbr>copre sia le abbreviazioni che gli acronimi.
Supporto dei browser
L'elemento <abbr> è supportato da tutti i browser moderni. Nota che l'aspetto predefinito varia: alcuni browser mostrano una sottolineatura punteggiata, altri non mostrano nulla di visibile. Se un'indicazione visiva uniforme è importante, applica il tuo CSS come mostrato sopra invece di fare affidamento sul comportamento predefinito del browser.
Elementi correlati
<acronym>— l'elemento obsoleto per gli acronimi; usa invece<abbr>.<dfn>— contrassegna l'istanza definitoria di un termine.<cite>— fa riferimento al titolo di un'opera creativa.