3.1.2 Language of Parts: The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text. (Level AA)
Requirements
Content that is written in a different language from the main language of the page, should be identified in code.
For multi-lingual content, the language for anything that varies from the default language of the page or app must be defined in the local code for the correct speech synthesizer to be used. This includes image alternatives, form labels, quotes, objects, media alternatives, and other elements. It will over-ride the specified default language and any language and dialect setting specified on the users device.
Example: The homepage of the website of the Canadian Government is written in English, so it has <html lang="en">. On the homepage, there’s link to access the version written in French. The link text reads “Français”. The link text is written in French, so the language of the link text is identified with <a lang="fr">.
Why is it important?
- This ensures that screen readers switch to the appropriate accent and pronunciation for that language.
- When listening, correct pronunciation helps understanding. For users of assistive technologies such as screen readers it is particularly important, as some have different speech synthesizers for different languages. For example, “chat” means something different when using English pronunciation rather than French.
Summary
- If the page has content in more than one language (for example, if a page in English has a button labelled in Welsh), identify the language of each part in code.
- When content is displayed in a language that is different from the primary language of the page, it must be indicated in a way that assistive technologies understand.
Common mistakes
- Content uses a different language, but the change in language is not identified in code.
- Content uses a different language, but the wrong language is identified in code.
Design Guide
- If a part of a page/screen (like a section or a button) will be written in a language that’s not the same as the main language of the page, make sure that you highlight this to developers on your designs.
Language of Parts Example for Android
Starting on Android O (API level 26), Text-To-Speech services added support for reading and switching between languages automatically. In order to apply a language to a text, you need to wrap it with a LocaleSpan (min API level 17).
Here’s an example for setting different languages for texts:
// Text is in English
val spannable: SpannableString = SpannableString("This text is in English")
spannable.setSpan(LocaleSpan(Locale.ENGLISH), 0, spannable.length, 0)
return spannable
// Text is in Spanish
val spannable: SpannableString = SpannableString("Este texto está en Español")
spannable.setSpan(LocaleSpan(Locale("es", "ES")), 0, spannable.length, 0)
return spannableLanguage of Parts Example for Web
- After having identified the main language of the page using the
langattribute on thehtmlelement, use thelangattribute again on any part of the document that is written in a different language.
Note: It’s better to only use the two-letter code representing the language (likelang="en"), rather than including the country as well (likelang="en-gb"orlang="en-us"):- If you use
lang="en-gb", the content will be pronounced by screen readers with a British accent, regardless of the users’ preferences. That’s not ideal. - If you use just
lang="en", the content will be pronounced with the accent that matches the users’ preferences.
- If you use
Examples:
<html lang="en">
...
<body>
<p>This page is written in English.</p>
<p lang="fr">Sauf pour ce qui est écrit en français.</p>
</body>
</html><html lang="en">
...
<h2>Upcoming Spanish Holidays</h2>
<p lang="es">Les Fogueres de Sant Joan.</p>
...
</html> Failure example:
<html>
...
<h2>Upcoming Spanish Holidays</h2>
<p>Les Fogueres de Sant Joan.</p>
...
</html> References
- Using language attributes on the html element technique in the Web Content Accessibility Guidelines
- Using language attributes to identify changes in the human language technique in the Web Content Accessibility Guidelines
- Using the HTML lang attribute by The Paciello Group
- Working with Language on the Web – W3C i18n tutorial
- Language on the Web
- On Use of the Lang attribute by Adrian Roselli
- Accessibility Guidelines- Github.io
2 responses to “WCAG – 3.1.2 Language of Parts (Level AA)”