WCAG 3.1.3: Unusual Words

WCAG 3.1.3, titled "Unusual Words," is a Level AA success criterion under Guideline 3.1 Readable. This criterion mandates that a mechanism must be available to help users understand jargon, idioms, or any words and phrases not commonly understood by the intended audience. The primary goal is to ensure that content is comprehensible, reducing cognitive load and barriers for a diverse range of users.

Why WCAG 3.1.3 Matters for Accessibility

Understanding the language used on a website is fundamental to accessing its information and functionality. When content uses unfamiliar terminology without explanation, it creates significant barriers for many users.

Accessibility Impact

• Cognitive and Learning Disabilities: Individuals with cognitive disabilities, dyslexia, or other learning disabilities may struggle to process and understand complex or unfamiliar vocabulary, making content inaccessible.
• Low Literacy Levels: Users with lower literacy levels can be excluded if content relies on advanced vocabulary or domain-specific jargon.
• Non-Native Speakers: People for whom the language of the content is not their native tongue may find idioms, slang, or highly specialized terms difficult to interpret without assistance.
• Users Unfamiliar with Specific Domains: Even highly educated individuals can be stumped by jargon from a field outside their expertise, such as medical, legal, or technical terminology.
• Improved User Experience: Providing explanations enhances the overall user experience for everyone, making content more approachable and reducing frustration.

User Groups Affected

• Users with cognitive, language, and learning disabilities.
• Individuals with lower literacy skills.
• Non-native speakers or those learning the language of the content.
• Anyone encountering specialized vocabulary outside their area of expertise.
• Elderly users who may have declining cognitive function or be less familiar with modern slang.

Understanding Success Criterion 3.1.3: Unusual Words

The formal wording for Success Criterion 3.1.3 is:

3.1.3 Unusual Words: A mechanism is available to find the definition of unusual words, phrases, idioms, and jargon. (Level AA)

Let's break down the key terms:

• Unusual Words, Phrases: These are terms that are not commonly understood by the typical target audience for the content. What is "unusual" is subjective and depends heavily on the context and the intended audience. For example, a medical term might be unusual on a general news site but standard on a medical journal site.
• Idioms: Phrases whose meaning cannot be deduced from the literal meaning of its words (e.g., "kick the bucket," "raining cats and dogs").
• Jargon: Specialized terminology associated with a particular field, profession, or group that is often difficult for outsiders to understand (e.g., "SEO," "API," "DNS" without context).
• Mechanism: This refers to any method provided to help users understand these terms. Examples include a glossary, definitions provided inline, tooltips, pop-ups, or links to definitions. The mechanism must be easily discoverable and accessible.

Practical Guidelines for Compliance

To meet WCAG 3.1.3, content creators and developers can employ several strategies:

• Provide Inline Definitions: Directly define the term where it first appears, or use HTML elements that provide an explanation upon interaction.
• Utilize a Glossary: Create a dedicated page or section for definitions of all unusual terms used throughout the site. Link these terms to their respective glossary entries.
• Offer Contextual Help (Tooltips/Pop-ups): Implement interactive elements that display definitions when a user hovers over, focuses on, or clicks an unusual word. Ensure these are keyboard and screen reader accessible.
• Link to Definitions: For terms that appear frequently, linking them to a single, consistent definition (e.g., in a glossary or an external resource) can be efficient.
• Prioritize Plain Language: The best approach is to write in clear, simple language whenever possible, minimizing the need for unusual words, idioms, or jargon in the first place. This reduces the reliance on compensatory mechanisms.

Examples of Implementation

Correct Implementations

<p>The <abbr title="World Wide Web Consortium">W3C</abbr> sets web standards.</p>
Copy text

<p>A <dfn>paradigm</dfn> is a typical example or pattern of something; a model.</p>
Copy text

<p>To ensure website accessibility, understanding <a href="/glossary#wcag">WCAG</a> is crucial.</p>
Copy text

<div class="term-container">
  <button class="term-trigger" aria-expanded="false" aria-controls="definition-01">Bandwidth</button>
  <span id="definition-01" class="term-definition" role="tooltip" hidden>The maximum rate of data transfer across a given path.</span>
</div>

<style>
  .term-container { position: relative; display: inline-block; }
  .term-trigger { 
    background: none; border: none; text-decoration: underline dotted; 
    cursor: pointer; font-size: inherit; color: inherit; padding: 0;
  }
  .term-definition {
    position: absolute; background-color: #ffffcc; border: 1px solid #ccc;
    padding: 10px; z-index: 100; min-width: 200px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    /* 'hidden' attribute handles initial visibility, JS toggles it */
  }
</style>

<script type="text/javascript">
  document.querySelectorAll('.term-trigger').forEach(trigger => {
    trigger.addEventListener('click', function() {
      const definitionId = this.getAttribute('aria-controls');
      const definition = document.getElementById(definitionId);
      const isExpanded = this.getAttribute('aria-expanded') === 'true';

      if (isExpanded) {
        definition.setAttribute('hidden', '');
        this.setAttribute('aria-expanded', 'false');
      } else {
        definition.removeAttribute('hidden');
        this.setAttribute('aria-expanded', 'true');
      }
    });

    trigger.addEventListener('keydown', function(event) {
      if (event.key === 'Escape' || event.key === 'Esc') {
        const definitionId = this.getAttribute('aria-controls');
        const definition = document.getElementById(definitionId);
        definition.setAttribute('hidden', '');
        this.setAttribute('aria-expanded', 'false');
      }
    });
  });
</script>
Copy text

Incorrect Implementations

<p>The new CMS utilizes an advanced AJAX framework for its API integration.</p>
Copy text

<span class="hover-only-term">API</span>

<style>
  /* This CSS-only example shows a common pattern for hover-only visual content. */
  .hover-only-term {
    text-decoration: underline dotted;
    position: relative;
  }
  .hover-only-term::after {
    content: "Application Programming Interface: a connection between computer programs.";
    position: absolute; left: 0; top: 100%;
    background: #333; color: #fff; padding: 5px; border-radius: 3px;
    white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity 0.2s;
  }
  .hover-only-term:hover::after { /* This pseudo-class only responds to mouse hover */
    visibility: visible; opacity: 1;
  }
</style>
Copy text

Best Practices and Common Pitfalls

Best Practices

• Define Your Target Audience: What's "unusual" is relative. Tailor your language and definitions to your primary audience's expected knowledge level.
• Contextual Relevance: Define terms where they are most relevant, preferably at their first significant appearance on a page.
• Consistent Definitions: Ensure that a term is defined consistently throughout the site, even if using multiple mechanisms (e.g., inline and in a glossary).
• Accessible Mechanisms: Any mechanism for definitions (tooltips, pop-ups, links) must be fully keyboard navigable and perceivable by screen readers. Use appropriate ARIA attributes to enhance accessibility.
• Simple Language for Definitions: Definitions themselves should be easy to understand and avoid introducing new jargon or complex sentence structures.
• Consider User Feedback: Regularly test content with users, especially those with diverse cognitive abilities, to identify terms that are unclear or mechanisms that are difficult to use.

Common Pitfalls

• Over-defining Simple Words: Providing explanations for terms that are genuinely common or universally understood can clutter content and annoy users.
• Under-defining Truly Unusual Words: Missing key jargon or idioms that are crucial for comprehension, thus failing the criterion.
• Inaccessible Definition Mechanisms: Creating pop-ups or tooltips that are only triggered by mouse hover, disappear too quickly, or cannot be dismissed via keyboard (e.g., Escape key).
• Definitions That Are Also Complex: Explaining a complex term with equally complex language or new jargon defeats the purpose of providing a definition.
• Broken Links to Glossaries: If relying on links to external or internal glossaries, ensure all links are functional and lead to the correct definition.
• Relying Solely on the title Attribute for Complex Definitions: While title can provide simple explanations for abbr or similar, it's not always ideal for longer or more critical definitions due to inconsistent support across devices and assistive technologies.

Conclusion

WCAG 3.1.3 "Unusual Words" is a critical criterion for creating inclusive and understandable web content. By proactively identifying and providing accessible definitions for jargon, idioms, and complex terms, we empower all users to fully comprehend and interact with digital information. Embracing plain language first, and then supplementing with robust, accessible mechanisms for definitions, ensures that your content is truly readable and welcoming to everyone.