Abbreviation (<abbr>)

When To Use

• At least on the first use of an abbreviation or acronym.

Rules

• When utilizing the <abbr> element, it is essential to provide a definition of the abbreviation and spell it out in plain text when it is initially used.
• The <abbr> element can be utilized alongside the <dfn> element to define abbreviations or acronyms when they are initially used.
• For subsequent uses of an abbreviation, it is advisable to provide a link to the paragraph, heading, or site glossary where it is defined. This is because users may not navigate the site strictly from top to bottom or may not remember a particular definition. ³
  • In addition, you can also include the title attribute in the <abbr> element to create a tooltip with the definition.
• If it is not possible to define and spell out the abbreviation in full text at the same place, you can create an anchor (<a>) element instead that links to a site glossary. This glossary can be positioned, for example, at the end of your page. ³
• If it‘s not possible to provide both a definition at the same place and a site glossary, make sure to include the definition of the abbreviation in the title attribute of the <abbr> element. ³
  • Do not use both a full text explanation and a definition through the title attribute as this can result in the definition being repeated unnecessarily. ³
• To help screen readers pronounce abbreviations correctly when the letters should be spelled one by one and not as a word, you can use periods or add spaces between characters. For example, the abbreviation "ITS" should be pronounced as "I.T.S." and not as "It‘s".
• To avoid overwhelming the user with too many links to the same definition, it is sufficient to link super-high-frequency abbreviations to their definition relatively infrequently. ³
• When using Leetspeak you should use an <abbr> element to create a clear text name for the leetseak content. See code example below. ⁴

Examples

Define abbreviation at the same place (recommended):

<p>
  <p>
  <dfn id="html"><abbr>HTML</abbr></dfn> which stands for HyperText Markup Language is a
  markup language used to create the semantics and structure of a web page.
</p>
</p>

Define abbreviation at the same place, but don‘t spell it out. Instead the title attribute is used (less recommended):

<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr></dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

Abbreviation with a link to the definition:

<abbr title="Web Content Accessibility Guidelines">
  <a
    href="/page/glossary#wcag" 
    title="Web Content Accessibility Guidelines">
      WCAG
  </a>
</abbr>

Decode leetspeak using the <abbr> element: ⁴

<abbr title="Im an absolute expert in leetspeak!">1m 4n 4b50lu73 3xp3r7 1n l3375p34k!</abbr>

Sources 

1. MDN: <abbr>: The Abbreviation element by Mozilla contributors is licensed under CC-BY-SA 2.5
2. Queen‘s University: Acronyms and abbreviations © Queen’s University
3. A List Apart: The Accessibility Hat Trick: Getting Abbreviations Right by Colin Lieberman
4. W3C WAI: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License