Make abbreviations accessible by providing or linking to the expanded form the first time it’s used on the page.

Meeting the Web Accessibility Standard

Where a mechanism for identifying the expanded form or meaning of an abbreviation is available, this meets WCAG 2 Success Criterion 3.1.4 Abbreviations (Level AAA).

Note: While it’s not mandatory to meet Level AAA success criteria like this one in order to meet the NZ Government Web Accessibility Standard, it’s strongly recommended.

What’s an abbreviation?

An abbreviation is a shortened form of a word, phrase or name. Abbreviations can be:

Note: WCAG 2 defines an abbreviation as a shortened form of a word, phrase, or name where the abbreviation has not become part of the language [emphasis added].

Examples of abbreviations that have become part of the English language
  • the acronyms ‘laser’ and ‘radar’
  • the initialisms ‘DVD’ and ‘PDF’
  • common contractions such as ‘it’s’ (it is) and ‘don’t’ (do not)
  • abbreviations used in a conventional context, such as ‘Rd’ in a postal address and ‘GST’ on an invoice.

Providing the expanded form of such abbreviations is not required, and in many cases can make reading and understanding more complicated.

Make an abbreviation accessible

Expand the first instance of the abbreviation

If an abbreviation has not become part of the language, provide one of the following in text right before or after the abbreviation’s first instance on the page:

Alternatively, link at least the first instance of the abbreviation to its expanded form or explanation elsewhere on the same or another page.

This gives everyone direct access to an abbreviation’s full meaning and helps people unfamiliar with the abbreviation to understand what it is.

Note: Screen readers will read abbreviations in different ways, some as if they were words — even if they’re not acronyms — and some as if they were a sequence of individual characters. Providing the expanded form of an abbreviation helps clarify the term for screen reader users.

Do not rely on <abbr>

About the <abbr> element

The <abbr> element in HTML is for marking up abbreviations, providing a programmatic indication to browsers and assistive technologies that the term represents an abbreviation, information that can then be conveyed to users.

The abbreviation’s expanded form can optionally be provided in a title attribute on the opening <abbr> tag.

Example of <abbr> with title
<p>It’s important that every interactive <abbr title="User Interface">UI</abbr> element has an accessible name.</p>

By default, some browsers display an <abbr> element that has a title attribute with a dotted underline, but this style can be changed by the page author.

When an <abbr> element is hovered over with a mouse, the expanded form in the title attribute will display as a tooltip.

If the abbreviation’s first instance on the page is accompanied by its expanded form, then all other instances of the abbreviation can be marked up using the <abbr> element without a title attribute.

For more details and examples of how to use the <abbr> element, see:

Why <abbr> is unreliable

Unfortunately, the tooltip that’s provided to sighted mouse users when they hover over an <abbr> element with a title attribute is not provided to sighted keyboard or touch users. Also, screen reader support for <abbr> with title is inconsistent.

As such, this approach cannot be relied on for exposing the expanded version of abbreviations to screen reader users. Instead, try to make sure that the first instance of the abbreviation on the page is accompanied by its fully expanded form or an explanation in text.

For more, see Short note: The abbreviation appreciation society — TPGi.

Scenarios for using <abbr>

In some contexts, providing the expanded version in text after the abbreviation may not be the best user experience — for example, where it would make a heading or breadcrumb too long.

In such cases, consider using the <abbr> element with the title attribute, but be aware of its limitations.

<abbr> in heading

Where the first instance of an abbreviation is in a heading, but not expanded or explained, make sure that the abbreviation’s full meaning is expressed in the content immediately following the heading.

<abbr> in breadcrumb or navigation menu

Where the first instance of an abbreviation is a link in a breadcrumb or navigation menu, make sure that the main content of the linked page begins with the abbreviation’s expanded form or explanation.

<abbr> with the <dfn> element

Where an abbreviation is being defined, <abbr> can be used with the <dfn> element.

Example of <abbr> used with <dfn>
<p>The <dfn><abbr title="Document Object Model">DOM</abbr></dfn> is a representation of the HTML document’s contents as a hierarchical tree of objects.</p>

For other examples, see Defining an abbreviation — <abbr>: The Abbreviation element — MDN WebDocs.

Testing abbreviations

For each abbreviation, check that its first instance on the page:

If the first instance of an abbreviation is part of a user interface element where providing the abbreviation’s expanded form is not feasible, check that: