3.1.4 Abbreviations

What¶

Introduction¶

Abbreviations on a web page must be clearly described to ensure that all users can understand their meaning. This can be achieved in the following ways:

• Expand the abbreviation the first time it appears on a page.
• Use markup such as the <abbr> element to provide a tooltip with the full term.
• Provide a glossary or an accessible description elsewhere on the page.

This ensures that users who are unfamiliar with the abbreviation can fully comprehend the content.

Why¶

Why is this important?¶

Some users may not recognize abbreviations. This applies especially to the following:

• Users with cognitive disabilities: Who may struggle with shortened words.
• Screen reader users: Who use assistive technology, which may not be able to automatically expand or pronounce abbreviations correctly.
• New visitors to your website: Who may not be familiar with internal terminology or industry-specific acronyms.

For example, all users might not understand that WCAG refers to Web Content Accessibility Guidelines unless it is expanded or described.

Examples¶

This section provides some pass and fail examples of this check.

Pass examples¶

• Expanded abbreviation on first use

  Implementation:

  copy

  <p>The Web Content Accessibility Guidelines (WCAG) define accessibility standards for digital content.</p>
  <p>According to WCAG 2.1, websites must be perceivable, operable, understandable, and robust.</p>

  • Why this works:
    • The full term is provided before the abbreviation is used later in the text.

• Use of the <abbr> element

  Implementation:

  copy

  <p>The <abbr title="World Health Organization">WHO</abbr> is a global health organization.</p>

  • Why this works:
    • When users hover over the WHO, a tooltip shows the expanded text.
    • Screen readers can announce the full term when they read the abbreviation.

• Provide a glossary of abbreviations

  Implementation:

  copy

  <h2>Glossary</h2>
  <ul>
    <li><strong>SEO</strong>: Search Engine Optimization</li>
    <li><strong>UX</strong>: User Experience</li>
  </ul>

  • Why this works:
    • Users can refer to the glossary for clarification.

Fail examples¶

• An abbreviation without explanation

  copy

  <p>The WCAG requires websites to be accessible.</p>

  • Issue:
    • The abbreviation WCAG is used with no definition.
    • Users who are unfamiliar with the term may not understand its significance.

  • Fix:

    • Expand the abbreviation the first time it appears:

      copy

      <p>The Web Content Accessibility Guidelines (WCAG) require websites to be accessible.</p>

• Abbreviations in an accessibility-related context without support for screen readers

  copy

  <p>The WHO published new health guidelines.</p>

  • Issue:
    • Screen readers may mispronounce WHO instead of reading it as World Health Organization.

  • Fix:

    • Use the <abbr> tag:

      copy

      <p>The <abbr title="World Health Organization">WHO</abbr> published new health guidelines.</p>

How¶

This section provides instructions on how to review and fix this issue.

How to review it¶

1. Identify capitalized words that may be abbreviations.
2. Check if they are defined or expanded when they are used for the first time.
3. Ensure that the proper markup is used, such as:
   • The <abbr> element for tooltip descriptions.
   • A glossary section is provided for commonly-used terms.
4. Test with assistive technologies to confirm that screen readers can correctly interpret the abbreviations.

How to fix it¶

• Expand abbreviations when they are used for the first time.

  • Example: 

    Search Engine Optimization (SEO).

• Use the <abbr> element.

  • Example: 

    copy

    <abbr title="User Experience">UX</abbr>

• Provide a glossary.

  • Example: 

    A list of abbreviations with explanations at the end of the page.

Additional resources¶

WCAG criteria¶

3.1.4 Abbreviations