WCAG 2.2 Demo Suite

3.1.2 Level AA Guideline 3.1 Readable Added in WCAG 2.0 Partly detectable automatically

Language of Parts

The human language of each passage or phrase in the content can be determined programmatically, except for proper names, technical terms, and words that have become part of the surrounding language.

Note on language

This demo is an English page containing Bangla passages, each marked with lang="bn".

Who this affects

Screen reader users hearing a foreign phrase mangled by the wrong pronunciation engine. A Bangla quotation inside an English page read with English phonetics is unintelligible.

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.2

Open the failing example in a new tab

fail.html — the problem

<h1>Book review: Gitanjali</h1>

<p>Rabindranath Tagore's collection was first published in Bangla in 1910.
   The opening line is one of the most quoted in the language:</p>

<!-- FAILURE 1: a Bangla quotation inside a page declared lang="en".
     The screen reader stays in its English voice and applies English
     phonetics to Bangla script. -->
<blockquote>
  <p>আমার সোনার বাংলা, আমি তোমায় ভালোবাসি।</p>
</blockquote>

<!-- FAILURE 2: a Bangla term inline, unmarked. -->
<p>The word গীতাঞ্জলি translates roughly as "song offering".</p>

<!-- FAILURE 3: a language switcher whose options are written in the language
     they switch to. Each option needs its OWN lang attribute, or a screen
     reader reads every one of them with English pronunciation - making the
     switcher useless to the very users who need it. -->
<nav aria-label="Language">
  <ul class="plain">
    <li><a href="#en">English</a></li>
    <li><a href="#bn">বাংলা</a></li>
  </ul>
</nav>
<h2 id="en">English edition</h2>
<p>The English translation, 1912.</p>
<h2 id="bn" lang="bn">বাংলা সংস্করণ</h2>
<p lang="bn">মূল বাংলা সংস্করণ, ১৯১০ সালে প্রকাশিত।</p>

Meets 3.1.2

Open the passing example in a new tab

pass.html — the fix

<h1>Book review: Gitanjali</h1>

<p>Rabindranath Tagore's collection was first published in Bangla in 1910.
   The opening line is one of the most quoted in the language:</p>

<!-- FIX 1: the quotation carries its own lang, so a screen reader switches
     to a Bangla voice for this passage and switches back afterwards. -->
<blockquote>
  <p lang="bn">আমার সোনার বাংলা, আমি তোমায় ভালোবাসি।</p>
  <footer>— Rabindranath Tagore, <cite>Gitanjali</cite></footer>
</blockquote>

<!-- FIX 2: an inline span is enough for a single word or phrase. -->
<p>The word <span lang="bn">গীতাঞ্জলি</span> translates roughly as "song offering".</p>

<!-- FIX 3: each language option is marked with the language it names, so it is
     pronounced correctly by the user who is looking for it. The hreflang
     attribute describes the language of the destination page - useful, but it
     is lang, not hreflang, that controls pronunciation of the link text. -->
<nav aria-label="Language">
  <ul class="plain">
    <li><a href="#en" hreflang="en">English</a></li>
    <li><a href="#bn" hreflang="bn" lang="bn">বাংলা</a></li>
  </ul>
</nav>

<!-- Note what does NOT need marking: proper names, and words that have been
     absorbed into the surrounding language. "Rabindranath Tagore" stays
     unmarked here, and so would a word like "rendezvous" in English text. -->
<h2 id="en">English edition</h2>
<p>The English translation, 1912.</p>
<h2 id="bn" lang="bn">বাংলা সংস্করণ</h2>
<p lang="bn">মূল বাংলা সংস্করণ, ১৯১০ সালে প্রকাশিত।</p>

How to test it

Find every passage in a language other than the page default and confirm it carries its own lang attribute. Check quotations, names of foreign works, and multilingual navigation such as a language switcher.

  • Automated

    Scanners validate the syntax of any lang attribute they find. They cannot detect a foreign-language passage that has no lang attribute at all — the actual failure.

    This demo's failure is not machine-detectable. axe's valid-lang rule validates lang attributes that are present. The failure here is that the Bangla passages have NO lang attribute, and no scanner can detect a language change it was never told about - that would require language identification of the text itself.

    Relevant axe rules:

    • valid-lang

  • 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.

In the specification