Vanilla Breeze

abbr

The abbreviation element represents an abbreviation or acronym, optionally with its expansion shown via the title attribute.

Description

The <abbr> element marks up abbreviations and acronyms, providing an expansion through the title attribute. This helps users understand unfamiliar terms and provides additional context for assistive technologies.

  • A dotted underline signals to sighted users that additional information is available on hover
  • The help cursor reinforces that the element is informational
  • On hover, the underline color changes to var(--color-interactive) for visual feedback

When to Use

  • Technical terms: HTML, CSS, API, DOM
  • Organization names: NASA, NATO, IEEE
  • Common abbreviations: etc., e.g., i.e.
  • Industry jargon: SEO, UX, CMS
  • First occurrence: Mark the first use of an abbreviation on a page

When NOT to Use

  • Well-known abbreviations: USA, UK, or terms your audience universally knows
  • Every occurrence: Only mark the first instance or where expansion adds value

Examples

With <dfn> (First Definition)

Combine with <dfn> when first defining a term. This signals to screen readers and search engines that this is the defining instance.

Variants

Class Effect
(default) Dotted underline + help cursor. Underline color changes to interactive on hover.
.plain No underline. Title tooltip still works on hover.

CSS Reference

Accessibility

  • Title attribute limitations: Touch devices cannot hover, so title tooltips are inaccessible. Consider spelling out the full term on first use.
  • Screen reader support: Some screen readers can be configured to announce abbreviation expansions
  • Visual indicator: The dotted underline signals to sighted users that additional information is available

Best Practice: First Use Expansion

For maximum accessibility, spell out the abbreviation in parentheses on first use, then use <abbr> alone for subsequent occurrences. This works on all devices, including touch.

Consider tool-tip for Touch

If the expansion must be accessible on touch devices, wrap the abbreviation in a <tool-tip> which responds to tap/focus in addition to hover.

Glossary integration: altLabel mentions

Vanilla Breeze's glossary is generated from site/src/_data/vocabulary.json, where each concept can declare a skos:altLabel array of synonyms and abbreviations. Examples from the shipped vocabulary:

Concept (@id) skos:prefLabel skos:altLabel
progressive-enhancementprogressive enhancementPE
data-reviewdata-reviewreview
keyword-indexkeyword indexindex, site index
metadata-substratemetadata substratesubstrate
content-lenscontent lenslens

When you reference a concept by its abbreviated altLabel rather than its full prefLabel, <abbr> is the right wrapper: it shows the expansion via title and signals the dotted underline to sighted readers, while the inner anchor with data-concept drives the glossary popover.

The popover script queries a[data-concept] regardless of wrapper, so this composes cleanly with the <dfn>-wrapped first-mention pattern. Use <dfn> for the prefLabel form on first mention; use <abbr> for altLabel/abbreviation mentions.

See Glossary terms in prose for the full authoring pattern.

Related

  • <dfn> — For defining terms (often wraps <abbr> on first use)
  • Glossary — concept entries with skos:altLabel abbreviations
  • Glossary terms in prose — <dfn> vs <abbr> authoring patterns
  • <tool-tip> — For accessible tooltips that work on touch and keyboard
  • <dt> — Abbreviations inside definition terms for glossaries
↑