WCAG 2.2 Demo SuitePronunciation
A mechanism is available for identifying specific pronunciation of words where meaning is ambiguous without it.
Who this affects
Screen reader users encountering heteronyms — words spelled alike but pronounced differently, where the wrong reading changes the meaning. Also relevant for names and loanwords.
The failure and the fix
Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.
Fails 3.1.6
Open the failing example in a new tab
fail.html — the problem
<h1>This month's reading</h1>
<!-- FAILURE 1: heteronyms - words spelled the same but pronounced differently,
with different meanings. A screen reader must guess, and when it guesses
wrong the sentence changes meaning.
"read" (present) vs "read" (past); "lead" (the verb) vs "lead" (the metal);
"live" (verb) vs "live" (adjective); "tear" (to rip) vs "tear" (crying);
"wound" (an injury) vs "wound" (past tense of wind). -->
<p>We read the winning entry aloud last night. Anna will read the runner-up tonight.</p>
<p>The chapter about the lead mines will lead us into a discussion of the strike.</p>
<p>Come to a live reading, or listen to where the authors live.</p>
<p>She wound the clock, then described the wound in careful detail.</p>
<!-- FAILURE 2: a name whose pronunciation is not obvious and is never given. -->
<p>Our guest is the poet Siobhán Ó Ceallaigh.</p>Meets 3.1.6
Open the passing example in a new tab
pass.html — the fix
<h1>This month's reading</h1>
<!-- FIX 1: the cheapest and most reliable fix is to REWRITE so the ambiguity
disappears. No markup needed, and it helps every reader, not just those
using speech output. -->
<p>We heard the winning entry aloud last night. Anna will present the runner-up tonight.</p>
<p>The chapter about the lead mines takes us into a discussion of the strike.</p>
<p>Come to a reading in person, or find out where the authors are based.</p>
<p>She wound the clock, then described the injury in careful detail.</p>
<!-- FIX 2: where the word must stay, give the pronunciation in text next to
it. Plain text works everywhere - it is read by every screen reader, shown
on every device, and needs no support from anything. -->
<p>The mines produced <span>lead</span> <span class="say">(pronounced "led", the metal)</span>
until 1974.</p>
<!-- FIX 3: names get a phonetic respelling. A short spoken clip is even better
for a person's own name - being able to hear it is what people actually
want. -->
<p>Our guest is the poet Siobhán Ó Ceallaigh
<span class="say">(pronounced "shiv-AWN oh KYAL-ee")</span>.</p>
<!-- FIX 4: ruby annotation, the markup route. It is designed for East Asian
scripts, where it is standard for giving readings of characters, and is
well supported by browsers and screen readers there. -->
<p>The Japanese edition is titled
<ruby>干潟<rp>(</rp><rt>higata</rt><rp>)</rp></ruby>.</p>
<!-- Scope: 3.1.6 applies only where MEANING IS AMBIGUOUS without knowing the
pronunciation. It does not ask you to annotate every unusual word - only
the ones where a wrong reading changes what the sentence says.
Note that the lang attribute (3.1.1 and 3.1.2) does much of this work for
free: correctly marking a passage's language switches the screen reader to
the right pronunciation engine, which resolves most cross-language cases
before 3.1.6 is even reached. -->How to test it
Find words whose meaning depends on pronunciation and confirm a pronunciation guide, phonetic spelling, or ruby annotation is available.
-
Automated
Requires linguistic judgement about ambiguity.
No axe rule maps to this criterion. It has to be checked by a person.
-
Keyboard
Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.
-
Screen reader
Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.
-
Visual
Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.
Related criteria
In the specification
- Understanding 3.1.6 Pronunciation — the W3C explanation, intent and exceptions
- 3.1.6 in the WCAG 2.2 Recommendation — the normative wording