WCAG 2.2 Demo Suite

3.1.1 Level A Guideline 3.1 Readable Added in WCAG 2.0 Partly detectable automatically

Language of Page

The default human language of each page can be determined programmatically, using the lang attribute on the html element with a valid BCP 47 language tag.

Note on language

This demo is presented in Bangla to show a correctly declared non-English page (lang="bn").

Who this affects

Screen reader users hear the page read with the wrong pronunciation rules when the language is missing or wrong — English phonetics applied to Bangla text produce noise, not words. Braille translation, hyphenation, and machine translation all depend on it.

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

Open the failing example in a new tab

fail.html — the problem

<!-- The whole page below is written in Bangla, but <html> carries no lang
     attribute. A screen reader falls back to its default voice - usually
     English - and applies English pronunciation rules to Bangla script.
     The result is not "accented"; it is unintelligible noise.

     This also breaks automatic translation, hyphenation, and the correct
     choice of font by the browser. -->

<h1>রিভারলাইন বইঘর</h1>

<h2>আমাদের সম্পর্কে</h2>
<p>আমরা ১৯৯৮ সাল থেকে পুরনো ও নতুন বই বিক্রি করছি। নদীর ধারে আমাদের ছোট দোকানটিতে
   প্রায় বিশ হাজার বই আছে।</p>

<h2>খোলার সময়</h2>
<ul>
  <li>সোমবার থেকে শুক্রবার: সকাল ৯টা – সন্ধ্যা ৬টা</li>
  <li>শনিবার: সকাল ১০টা – বিকাল ৪টা</li>
  <li>রবিবার: বন্ধ</li>
</ul>

Meets 3.1.1

Open the passing example in a new tab

pass.html — the fix

<!-- With lang="bn" on <html>, a screen reader switches to its Bangla voice and
     pronunciation rules, the browser picks an appropriate font, and translation
     tools know what they are translating from. -->

<h1>রিভারলাইন বইঘর</h1>

<h2>আমাদের সম্পর্কে</h2>
<p>আমরা ১৯৯৮ সাল থেকে পুরনো ও নতুন বই বিক্রি করছি। নদীর ধারে আমাদের ছোট দোকানটিতে
   প্রায় বিশ হাজার বই আছে।</p>

<h2>খোলার সময়</h2>
<ul>
  <li>সোমবার থেকে শুক্রবার: সকাল ৯টা – সন্ধ্যা ৬টা</li>
  <li>শনিবার: সকাল ১০টা – বিকাল ৪টা</li>
  <li>রবিবার: বন্ধ</li>
</ul>

How to test it

Check the html element has a lang attribute whose value is a valid, correct language subtag matching the page's actual primary language. lang="en" on a Bangla page fails just as surely as no lang at all.

  • Automated

    Scanners verify that lang is present and is a syntactically valid tag. They cannot tell whether the declared language matches the text actually on the page.

    Relevant axe rules:

    • html-has-lang
    • html-lang-valid
    • 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