The Language Setting on a Bilingual Site

French read with English rules

A bilingual site has a French version of every page, carefully translated. A visitor using a screen reader opens one and hears the French words pronounced as if they were English.

The translation is fine. The problem is one setting in the page's code, which still tells the screen reader the page is in English.

Sighted visitors never notice. For a visitor who is listening, the page is close to unintelligible, and many simply leave.

One attribute at the top of the page

Every web page can state its language in an attribute called lang, set once at the top of its code: en for English, fr for French.

Regional codes such as en-CA and fr-CA are valid as well, and some screen readers use them to choose a regional voice where one is installed.

Screen readers rely on the setting to pick their pronunciation rules. Browser translation tools also read it when deciding whether to offer a translation, and automatic hyphenation follows it.

The accessibility guidelines most rules refer to treat it as basic. In WCAG 2.0 it is called Language of Page, at level A.

How French pages end up marked English

• A theme that writes English into the top of every page.
• A site language setting left as English for the whole site.
• French pages copied from English ones, settings and all.
• A translation plugin never set to switch the language per page.
• Landing pages and forms built in other tools with their own defaults.
• PDF documents, which carry a language setting of their own.

The third is the most common on small sites. A French page made by duplicating its English twin inherits everything, including the language setting, the image descriptions and the form's messages.

Passages in another language

A second requirement, Language of Parts, at level AA, covers passages in a different language from the rest of the page.

A French quotation on an English page, course titles in Spanish, a customer review written in French: each should be marked with its own language, so the screen reader switches for that passage and back again.

The guideline exempts proper names, technical terms, words of no particular language, and borrowed words that have become part of the surrounding language. Nobody needs to mark rendezvous.

In most editors, marking a passage means adding the attribute in the code view, a quick job for whoever maintains the site.

The switcher

The link between versions is itself a passage in another language. A link reading Français on an English page should be marked as French, or a screen reader will pronounce it as an English word.

Write each language's name in that language: Français and English, not FR and EN, which may be read out as letters. Avoid flags, which stand for countries rather than languages.

And make the switcher go to the equivalent page. Somebody reading about evening classes who switches to French should land on the French page about evening classes, not the French home page.

A worked example

A language school in Vancouver, teaching English, French and Spanish to adults, had a site in English and French, with each French page made by copying the English one and translating it.

A prospective student who uses a screen reader tried the French registration page, heard the French read with English rules, and phoned to ask whether the course really was taught in French.

Every page declared itself English, because the theme took its language from the site's main setting. The translation plugin could change it page by page, but nobody had switched that on.

The French pages also carried English image descriptions, English page titles on two of them, and a registration form whose error messages appeared in English.

Whoever maintains the site turned on the plugin's per-language setting, translated the descriptions and form messages, and marked the Spanish course titles on the English pages as Spanish.

The switcher now says Français and English and goes to the matching page. Before calling it done, the school listened to three pages in each language.

Everything else that was copied

Duplicated pages carry more across than the language setting.

Image descriptions, the alt text read out in place of each picture, stay in English. So do page titles, button labels, and the messages a form shows when something is missing.

Plugins add English of their own: cookie notices, booking widgets, search boxes. Most have a French version that has to be selected.

PDF documents need checking too. A PDF keeps its language in its document properties, and a French form saved from an English template keeps the English setting.

Listening to the result

The quickest check needs nothing special. Open a French page, view its source code, and look near the top for lang. It should say fr.

The real test is listening. VoiceOver is built into Macs and iPhones, and NVDA is a free screen reader for Windows. Play the first paragraph of a French page, then of an English one.

If French sounds like French and English like English, the switcher link included, the settings are doing their job.

Search engines use a separate setting

The lang attribute is mainly for browsers and assistive technology. Search engines largely work out a page's language from its text.

To tell Google that two pages are translations of each other, sites use a separate annotation called hreflang. It does nothing for a screen reader, so a bilingual site needs both, checked separately.

The counter-case

A site in a single language has one setting to get right, and an occasional borrowed word needs no marking at all.

A site with a short French summary page, rather than full translations, needs that page set correctly and its link marked, not a full multilingual system.

Separately, a business selling to customers in Quebec may have French-language obligations under Quebec law that go beyond accessibility. That is a question for a lawyer, and this setting is only a small part of the answer.

Whatever the scope, every page should say which language it is in, and say it truthfully.

The check

1. View the source of a French page.
2. Confirm the language setting says fr.
3. Turn on per-language settings in the translation plugin.
4. Mark passages in another language.
5. Label the switcher Français and English.
6. Translate alt text, titles and form messages.
7. Listen to both versions with a screen reader.

Step seven proves the rest. Code can look right and still produce English vowels on a French page, and a few minutes of listening settles the question.

The other requirements a bilingual site should now be aiming for are covered in WCAG 2.1 is published.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.