Language of Parts
Success Criterion 3.1.2 (Level AA)
Question
If content on a page switches from one language to another language for a section, is that section’s language properly identified in the code?
Why is this important
Specifying any changes in language for the content enables browsers to present the characters accurately and assistive technologies to load the appropriate pronunciation values. This allows users of all abilities to better understand the material presented.
Whom does it benefit?
Example 1:
As a person who is blind,
I want my screen reader to load the appropriate pronunciation values for the language of the
content
so that I can comprehend the material presented.
Example 2:
As a person learning a new language,
I want my Text to Speech software to pronounce the content accurately
so that I can understand the material presented.
Example 3:
As a person with reading difficulties,
I want the content presented accurately
so that I can understand the characters and symbols.
What should you do?
When the language on a web page switches from a primary language to a secondary language for a part of the page, add a language attribute in the code to indicate the switch to the new language.
How do you do it?
- Be sure to initially indicate the primary language of the page. (See Success Criteria 3.1.1)
- Look up the appropriate language code for the secondary language being used. For example, if the content switches from English to Spanish, then the language part should be identified as Spanish - “es” with the lang attribute on the html element specific to the content.
- Insert the appropriate lang attribute into the code.
- If the language of the content switches back to the primary language of the page, indicate the switch using another lang attribute.
Need technical guidance?
Technical guidance is available for implementing this Success Criterion at the Understanding Success Criterion 3.1.2 - Language of Parts page.
Additional Resources to help you:
- WUHCAG - Language of parts
- HTML Language Code Reference – W3Schools.com