WCAG 3.1.2 Language of Parts (level AA) explained

What it asks for, in plain English

When a sentence, quote, heading or block is written in a different language from the rest of the page, wrap it in an element with its own lang attribute. A French quotation on an English page gets lang="fr"; a Welsh heading on a bilingual site gets lang="cy". A screen reader switches voice at that point and switches back afterwards.

Proper names, technical terms and words English has absorbed (café, rendezvous, déjà vu) do not need marking, and nor do words whose language is unclear. The test is whether the passage is clearly in another language and would be badly mispronounced without the switch.

Language pickers are the classic case. A menu reading Cymraeg, Français, Deutsch should mark each option in its own language, otherwise an English voice mangles every one of them.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 3.1.2 page has the full intent, techniques and definitions.

Who it affects

A screen reader user hears a Welsh paragraph read with English pronunciation rules, which turns it into noise, when one attribute would have switched the voice.

Someone with dyslexia using read-aloud loses the meaning of a bilingual notice when the software reads both halves in one voice.

A bilingual speaker choosing their language from a picker cannot recognise the option for their own language when it is read out in the wrong accent.

Example

Broken

<p>Our Cardiff office signs off every email with:</p>
<blockquote>Diolch yn fawr am eich amser.</blockquote>

<nav aria-label="Language">
  <a href="/cy/">Cymraeg</a>
  <a href="/fr/">Français</a>
</nav>

Everything inherits the page's English. The Welsh sign-off and both picker options are read with English pronunciation.

Fixed

<p>Our Cardiff office signs off every email with:</p>
<blockquote lang="cy">Diolch yn fawr am eich amser.</blockquote>

<nav aria-label="Language">
  <a href="/cy/" lang="cy">Cymraeg</a>
  <a href="/fr/" lang="fr">Français</a>
</nav>

Each passage carries its own language. The screen reader changes voice for the quote and for each menu option.

How to check it

Read through the page for passages in another language: quotes, mottos, bilingual notices, language picker options.
Inspect each one. The passage, or an element around it, should have its own lang attribute with a valid code.
Listen with a screen reader if you can. The voice should change at the passage and change back after it.
Ignore single borrowed words and proper names; they do not need marking.

What Websight checks for 3.1.2

Websight runs this automated check for 3.1.2:

AA Language codes on page sections must be valid valid-lang When part of a page is in a different language from the rest, put a lang attribute on that element.

Websight checks that any lang attribute it finds on an element holds a valid language code. It cannot spot a passage in another language that has no attribute at all; only a person reading the page can.

Practical tips

Put the attribute on the smallest element that contains the whole passage: a blockquote, a span, a list item.
In a language picker, mark each option in its own language and keep the native names (Deutsch, not German).
If your CMS has a field for quotes or testimonials, add a language field beside it so editors can set it.

3.1.1 Language of Page (level A)

3.1.2 Language of Parts