Goal
Ensure that the page language is set accurately, so that screen readers read the page in the right language.
Why this matters
If the language is set incorrectly or not at all, a screen reader will read the page in the user’s default language. That can result in the wrong accent being applied to words, making it so the page isn’t understandable.
The lang attribute: browsers telling lies, telling sweet little lies by Manuel Matuzovic describes a situation where a page on a major Austrian news site was marked as being in English instead of German. Users who’d used Google Chrome’s translate feature in the past found the page was automatically translated from English to German… meaning some German town names were considered English words and translated into other German words.
Their testing didn’t catch it because the language attribute was set to a valid value, so there was nothing for automated testing to check.
How to implement
Writer
By default, the page language should be set to English (or the language of your region).
- Read On Use of the Lang Attribute by Adrian Roselli regarding the benefits and expectations of the
langattribute. - Ensure your team is aware if the page language should be set to something else.
Developer:
For instructions on using the lang attribute, see MDN’s page:
Tester:
The lang attribute: browsers telling lies, telling sweet little lies offers suggestions for adding CSS attributes — presumably in a CSS test file — to put visible borders on the page if the language attribute is missing or incorrect. You may want to work with your Developer to implement these changes, or use them as a testing method of your own.
How to test
Manual testing
Right-click the page and ensure that the <html> element contains a lang attribute. By default, it should be lang=”en” (or language code for your region), but if your Writer has specified the page is in another language, ensure the lang attribute reflects that language correctly.
Automated testing
HTML validators should report back an error if no lang attribute is present. Note that automation cannot determine if the right attribute is present.
See “How to Implement” for more suggestions on testing this guideline.