3.1.4 Level AAA Guideline 3.1 Readable Added in WCAG 2.0 Not detectable automatically

Abbreviations

A mechanism for identifying the expanded form or meaning of abbreviations is available.

Who this affects

Screen reader users, since a screen reader may spell out or mispronounce an abbreviation. Users with cognitive disabilities and readers unfamiliar with the domain.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 3.1.4

Open the failing example in a new tab

fail.html — the problem

<h1>Trade terms</h1>

<!-- FAILURE 1: initialisms never expanded. A reader who does not already know
     the trade cannot decode them, and a screen reader may spell them out
     letter by letter or, worse, attempt to pronounce them as words. -->
<p>All prices are RRP excluding VAT. Delivery is POA for orders outside the UK.</p>

<!-- FAILURE 2: an abbreviation that collides with an everyday word. A screen
     reader will usually read "ISBN" as letters but "no." as "no", and
     "Dr" may be read as "doctor" or "drive" depending on context the software
     cannot see. -->
<p>Quote the ISBN and our ref. no. when you write to Dr Ellis at our head office.</p>

<!-- FAILURE 3: a domain-specific abbreviation with no expansion anywhere. -->
<p>Condition: VG in a G+ dust jacket.</p>

Meets 3.1.4

Open the passing example in a new tab

pass.html — the fix

<h1>Trade terms</h1>

<!-- FIX 1: expand at first use, with the abbreviation in brackets after the
     full form. This is the most reliable technique, because it works for every
     user and every technology - it is just text. -->
<p>All prices are recommended retail price (<abbr title="recommended retail price">RRP</abbr>)
   excluding value added tax (<abbr title="value added tax">VAT</abbr>).
   Delivery is price on application (<abbr title="price on application">POA</abbr>)
   for orders outside the United Kingdom.</p>

<!-- FIX 2: after first use, the abbr element with a title carries the
     expansion. A caution worth teaching: the title attribute is NOT reliable
     on its own. It is not shown on touch devices, is not announced by every
     screen reader by default, and cannot be reached by keyboard. Use abbr as a
     supplement to expanding in text, never as a replacement. -->
<p>Quote the <abbr title="International Standard Book Number">ISBN</abbr> and our
   reference number when you write to Dr Ellis at our head office.</p>

<!-- FIX 3: domain abbreviations expanded and collected in a glossary, so a
     reader arriving mid-page can still resolve them. -->
<p>Condition: very good (<abbr title="very good">VG</abbr>) in a
   good-plus (<abbr title="good plus">G+</abbr>) dust jacket.
   See our <a href="#grades">condition grades</a>.</p>

<h2 id="grades">Condition grades</h2>
<dl>
  <dt>VG — very good</dt><dd>Clean and sound, with only minor shelf wear.</dd>
  <dt>G+ — good plus</dt><dd>Complete and readable, with visible wear or small tears.</dd>
</dl>

<!-- Practical rules:
     - expand in text at first use on EVERY page, not just once across the site;
       users arrive mid-site from search
     - do not mark up abbreviations everyone already knows in context, such as
       BBC or DVD - over-marking makes a page tiring to listen to
     - never rely on title alone -->

How to test it

Find every abbreviation and acronym. Confirm it is expanded at first use or marked up with abbr and a title, or defined in a glossary.

  • Automated

    Detecting abbreviations reliably and judging whether they are explained requires a human.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification