Understandable · 3.1 Readable

Pronunciation WCAG 3.1.6 · Level AAA

A mechanism must be available to identify the pronunciation of words whose meaning stays ambiguous in context unless the pronunciation is known, such as phonetic spelling beside the word, a glossary with pronunciations, audio clips, or ruby annotations.

Level
AAA
Since
WCAG 2.0
Principle
Understandable
Guideline
3.1 Readable

Live demo

Listen to words that can be said two ways

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Press Listen on each line in both versions. The passing version gives the pronunciation in the text and uses it in the speech.

Live example

Passes

Updates

Divers find lead near the old mine.

Say lead like "led": it means the metal, not a clue.

Message from your bank. Status: read.

Say read like "red": you have already opened this message.

What happened

    Why it passes

    Each ambiguous word has its pronunciation beside it, and the speech uses it, so you hear "led" for the metal and "red" for a message you have already opened.

    Why it fails

    Nothing says how to pronounce the words, so the speech has to guess. It may say "leed" or "reed", and then the sentence means something else.

    Examples

    Code that fails, and the fix

    Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 2 lines

    Fails

    Ambiguous word with no pronunciation

    Live preview

    HTML
    <h2>Divers find lead near the old mine</h2><p>The find was made on Tuesday morning.</p>

    Lead can be the metal, said "led", or a clue, said "leed". The text does not settle which, and nothing tells the reader how to say it.

    Passes

    Pronunciation right after the word

    Live preview

    HTML
    <h2>Divers find lead near the old mine</h2><p>Lead (said "led") is the heavy grey metal once dug from this mine.  The find was made on Tuesday morning.</p>

    The first sentence gives the pronunciation straight after the word, so readers know it is the metal before they read on. This is technique G120.

    02What changes 1 line

    Fails

    Japanese word with two readings

    Live preview

    HTML
    <p lang="ja">この箱には生物が入っています。</p>

    生物 read as せいぶつ means living things, and read as なまもの means perishable food. Without the reading, the label can be understood either way.

    Passes

    Ruby text gives the reading

    Live preview

    HTML
    <p lang="ja">この箱には<ruby>生物<rp>(</rp><rt>なまもの</rt><rp>)</rp></ruby>が入っています。</p>

    The ruby text shows the reading なまもの above the word, which tells the reader the box holds perishable food. The rp brackets appear only where ruby is not supported. This is technique H62.

    Why it matters

    Who it helps

    Screen reader users, people with reading disabilities, and readers of languages such as Japanese or Hebrew, where one written form can have several readings, may otherwise misread a word and misunderstand the sentence.

    W3C: Understanding 3.1.6
    • Level AAA

      Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.

    • In WCAG versions

      Part of WCAG 2.0 since December 2008, and of every version after it.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      No law on this site requires Level AAA criteria for whole sites.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Identify words whose meaning remains ambiguous in context unless the reader knows how they are pronounced.
    2. Confirm a pronunciation is provided for each, for example inline, in a glossary, through ruby text, or as an audio clip.
    3. Check that the pronunciation given matches the intended meaning in that context.

    Common failures

    Where it breaks

    • Japanese text uses kanji with several possible readings and gives no ruby text or other pronunciation aid.
    • A word with more than one pronunciation and meaning is used where context does not settle the meaning, and no pronunciation is given.