WCAG 3.1.6: Pronunciation

WCAG 3.1.6: Pronunciation (Level AAA)

The WCAG 3.1.6 Pronunciation success criterion is part of the Understandable principle, specifically under Guideline 3.1 Readable. This criterion addresses the need to provide assistance for understanding the correct pronunciation of words, particularly when their pronunciation is ambiguous or crucial for comprehension.

It is classified as a Level AAA success criterion, meaning it represents a higher level of accessibility and may not be feasible for all content and contexts, but it significantly enhances usability for specific user groups.

Why Pronunciation Matters for Accessibility

Ambiguous or unfamiliar pronunciations can create significant barriers for various users. Ensuring that users can determine the correct pronunciation of words is vital for comprehensive understanding and an inclusive web experience.

Accessibility Impact

• Cognitive Disabilities: Users with cognitive or learning disabilities, such as dyslexia, may struggle to decode words, especially those with irregular spellings or homographs (words spelled the same but with different meanings/pronunciations).
• Screen Reader Users: Text-to-speech (TTS) engines used by screen readers can mispronounce words, especially proper nouns, foreign words, technical jargon, or words with multiple pronunciations depending on context. Correct pronunciation information helps these technologies render content accurately.
• Non-Native Speakers: Individuals learning a new language often benefit greatly from pronunciation guides, as written forms do not always clearly indicate how a word should be spoken.
• Users with Deafness or Hearing Impairments: While they may not hear spoken words, understanding how words are pronounced can still be relevant for language comprehension, especially in educational contexts or when encountering names and technical terms.
• General Comprehension: In fields where precise terminology and pronunciation are critical (e.g., medical, legal, scientific), knowing the correct pronunciation can prevent misunderstanding.

Success Criterion 3.1.6 Pronunciation

The official wording for this success criterion is:

3.1.6 Pronunciation: When necessary for understanding, provide a way to determine the correct pronunciation of words. (Level AAA)

Key Requirements Explained:

• "When necessary for understanding": This clause is crucial. It does not mean every word needs a pronunciation guide. Instead, it applies to words whose pronunciation is essential for the user to grasp the meaning of the content, or when the written form alone is insufficient or misleading (e.g., homographs like "lead" – the metal vs. to guide, or "read" – past vs. present tense). This includes proper nouns, technical terms, foreign words, or words with context-dependent pronunciations.
• "Provide a way to determine": The method for providing pronunciation must be accessible and clearly associated with the word. This could be through visual phonetic guides, audio playback, or textual descriptions.
• "Correct pronunciation": The provided information must accurately represent the intended pronunciation of the word in its context.

Practical Guidelines for Compliance

Meeting WCAG 3.1.6 involves offering clear, accessible ways for users to discern the correct pronunciation of words where ambiguity could hinder understanding. Here are several methods:

1. Using the HTML <ruby> Element

The <ruby> element is specifically designed for phonetic annotations, often used in East Asian typography (e.g., furigana for kanji) but semantically appropriate for any language requiring phonetic guides. It associates a phonetic guide (ruby text) with a base text.

• The <rp> (ruby parenthesis) element provides fallback parentheses for browsers that don’t support ruby text, ensuring the phonetic guide is still presented in a readable way.
• The <rt> (ruby text) element contains the actual phonetic annotation.

2. Providing Audio Pronunciation

An audio clip of the word being spoken can be an effective way to convey pronunciation, especially for complex words or foreign languages. Ensure the audio player is accessible (e.g., keyboard navigable, provides controls).

3. Textual Phonetic Spellings or Descriptions

Including a common phonetic spelling (e.g., using IPA or a simplified English-based phonetic spelling) directly adjacent to the word, in a glossary, or as a tooltip can be helpful.

4. Linking to External Resources

For extensive or highly specialized vocabulary, linking to reputable dictionaries or pronunciation guides can be a practical solution.

Examples of Correct and Incorrect Implementations

Correct Implementations

<p>The capital of Australia is <ruby>Canberra<rp>(</rp><rt>KAN-buh-ruh</rt><rp>)</rp></ruby>.</p>
<p>He learned the term <ruby>résumé<rp>(</rp><rt>REZ-oo-may</rt><rp>)</rp></ruby> for his job application.</p>
  

<p>The ancient city of <strong>Pompeii</strong>
  <button aria-label="Listen to pronunciation of Pompeii" onclick="playAudio('pompeii.mp3')">
    <img src="speaker-icon.svg" alt="Pronounce Pompeii" style="width:1em; height:1em; vertical-align:middle;">
  </button>
  <audio id="pompeii-audio" src="pompeii.mp3" preload="auto"></audio>
  .</p>

<script>
  function playAudio(src) {
    const audio = document.getElementById(src.replace('.mp3', '-audio'));
    if (audio) {
      audio.play();
    }
  }
</script>
  

<p>The scientific name is <strong>Tyrannosaurus rex</strong> (tie-RAN-uh-SAWR-us reks).</p>
<p>For a full list of medical terms and their pronunciations, see our <a href="/medical-glossary#brachial">Medical Glossary</a> (e.g., <em>brachial</em>).</p>
  

Incorrect Implementations

<p>The patient was diagnosed with <strong>aphthous stomatitis</strong> during the examination.</p>
  

<!-- Using a `title` attribute for pronunciation -->
<p>The capital of Australia is <span title="Pronounced KAN-buh-ruh">Canberra</span>.</p>

<!-- Using an image of phonetic text without alt text or associated readable text -->
<p>The word is <img src="pronunciation-image.png" alt="">.</p>
  

Best Practices and Common Pitfalls

Best Practices

• Prioritize <ruby>: When applicable, use the HTML <ruby> element as it is semantically designed for this purpose and provides a robust, accessible solution for both visual and programmatic consumption.
• Provide Clear Triggers: If using audio, ensure the control to play the pronunciation is clearly identifiable, keyboard-operable, and has an appropriate accessible name (e.g., using aria-label).
• Use Standard Phonetics: If providing text-based phonetic spelling, use a widely understood system (like a simplified English-based phonetic spelling) or the International Phonetic Alphabet (IPA) if your target audience is familiar with it.
• Context is Key: Only provide pronunciation assistance when it is genuinely necessary for understanding. Over-use can clutter the interface and be distracting.
• Consistency: Maintain a consistent approach to providing pronunciation across your website or application.
• Test with Users: Involve users from affected groups (e.g., those with learning disabilities, non-native speakers, screen reader users) to ensure your solutions are effective and easy to use.

Common Pitfalls

• Forgetting About Screen Readers: Relying on visual-only cues or methods not exposed to assistive technologies.
• Lack of Association: Providing pronunciation information that isn’t clearly and programmatically linked to the word it describes.
• Inaccurate Pronunciation: Supplying incorrect or unclear phonetic guides or audio, which can be more detrimental than providing no guide at all.
• Over-Complication: Implementing overly complex solutions when simpler, effective methods exist.
• Ignoring Language Changes: Different languages and even different dialects within a language can have varied pronunciations for the same word. Ensure the provided pronunciation is appropriate for the content’s primary language.
• Not a Substitute for Clear Writing: While pronunciation helps, it doesn’t replace the need for clear, concise writing.

By carefully considering when and how to provide pronunciation information, you can significantly improve the comprehensibility and accessibility of your content for a diverse range of users, aligning with the highest level of WCAG compliance.