Language Change

A language change is a word or passage written in a language different from the main language of the page. In HTML, it is marked with the lang attribute on the element containing this text. Without this markup, screen readers pronounce the foreign text with the accent of the main language.

On an English page, the word café passes without issue. But a Shakespeare quote without the lang="fr" attribute? The screen reader pronounces it in English. Every syllable. With the accent.

#When to mark up, when to skip

The WCAG 3.1.2 criterion (level AA) requires that each passage in a foreign language be identifiable in the code. RGAA echoes this requirement at criterion 8.7.

Implementation boils down to a single attribute :

<p>She said <span lang="fr">"Bonjour le monde"</span> when she arrived.</p>
 
<blockquote lang="fr">
  "Je pense, donc je suis."
</blockquote>

But not everything gets marked up. The WCAG provide four exceptions :

  • Proper nouns : Google, Shakespeare, Berlin.
  • Technical terms : HTML, USB, API.
  • Words in common usage : café, fiesta, karaoke.
  • Words of indeterminate language : a neologism that belongs to no single language.

#The trap of over-marking

A conscientious contributor might want to mark up every foreign word. Bad idea. Each lang attribute triggers a voice change in the screen reader : the speech synthesizer loads a new pronunciation engine, pauses, pronounces the word, then returns to the original voice. For café or fiesta, the result is worse than no markup at all.

The rule : if the word is pronounced correctly with an English accent and appears in an English dictionary, do not mark it up.

#What screen readers actually do

Without a lang attribute, a screen reader like NVDA or VoiceOver applies the phonetic rules of the language declared on <html>. The French word château in a page with lang="en" will be read as if it were English. With lang="fr" on the <span>, the reader switches to French voice, pronounces the word correctly, then returns to English.

This markup also serves braille displays : contraction rules change depending on the language.

#In summary

Mark up passages in a foreign language with lang, but only when pronunciation requires it. Proper nouns, technical terms, and words in the English dictionary do not need markup. Good practice comes down to a single question : would a screen reader mispronounce this text without a language indicator ?

Back to glossary
Share this article

Learn more

Default language

The default language of a web page is the primary language in which its content is written. It is declared in HTML with the lang attribute on the document's root element. Without this declaration, screen readers do not know which pronunciation rules to apply and read the text with the accent of the language configured on the user's system.

Page Title

The page title is the content of the HTML <title> tag, displayed in the browser tab. It is the first information a screen reader announces when opening a page. WCAG criterion 2.4.2 (level A) requires that each page has a title describing its subject or function.

Document structure

Document structure is the logical organization of a web page through hierarchical headings (h1 to h6) and semantic HTML5 tags. Screen readers use them to build a navigable table of contents and allow their users to jump directly to the desired section.