Abbreviations
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:
- an acronym: a term that uses the first letter of each of the main elements in a phrase and that’s pronounced as a single word — for example, ‘PIN’ (Personal Identification Number)
- an initialism: a term that uses the first letter of each of the main elements in a phrase and that’s pronounced as a series of letters — for example, ‘GST’ (Goods and Services Tax) and ‘NZ’ (New Zealand)
- a numeronym: a term that uses one or more numbers, often mixed with letters, to represent a word, phrase or name — for example, ‘K9’ (canine) and ‘sk8ter’ (skater)
- a contraction or simple short form: a word or phrase that’s been shortened by dropping some letters — for example, ‘flu’ (influenza), ‘Rd’ (road), ‘ma’am’ (madam) and ‘they’re’ (they are).
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]
.
- 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:
- its expanded form
- an explanation of what the abbreviation means.
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.
<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.
<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:
- is accompanied by its expanded form or an explanation in text immediately preceding or following the abbreviation, or
- links to its expanded form or explanation on the same or another 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:
- if the abbreviation is part of a heading, its expanded form or explanation is provided in the content immediately following the heading
- if the abbreviation is part of a link, the linked page includes the abbreviation with its expanded form or explanation at the beginning of its main content.