3.1.1 Language of Page
This document gives information about the related Acquia Optimize checks:
Document has required lang
attribute(s)
Document has a valid language code
Reading order direction is marked using the html element's "dir
" attribute if the document's primary language is read from right to left.
The human language of the page must be declared in the code of the page.
When the human language of your content is correctly declared, it allows software to function well with your content. Such software includes the following:
Screen reading software that reads your content to blind or dyslexic people using the right voice. For example, it will use an English voice for your English content rather than using a French voice for your English content.
Translation software that provides automated translations of your content to people of other languages.
Search engines that can more accurately show your content to the relevant people because it understands the language of your content.
Media players that can show captions correctly.
Assistive technologies and browsers may not render text content accurately if the language of the web page is not declared correctly.
User story¶
Maria, a Norwegian carpenter with dyslexia:
"When I go online to read user manuals for some of the machinery I use, they are written in English but my text-to-speech software will read the English text with a Norwegian voice. That makes it very hard for me to understand the instructions."
This check affects the following users who have:¶
Sight impairments: And others who access the site contents with a screen reader or other text-to-speech software.
Cognitive limitations: Such as dyslexia and others who might have any difficulty reading written material. Other users in this category include persons with any language or learning disability who use text-to-speech software.
Hearing impairments: And other users who rely on captions for video and audio.
Follow these steps to repair this issue.
Locate the opening HTML tag at the beginning of your webpage.
Add the lang
attribute to the HTML tag, followed by a valid two or three letter language code to the opening <html>
element.
In the following example code, the lang
value is set to en
for English:
For XHTML, both lang
and xml:lang
must be set to the same value.
<html xml:lang="en" lang=”en”>
For languages that are written from right to left, the “dir
” attribute should be added to the HTML element to ensure proper text directionality. This example shows the "lang
" attribute set to "ar
" for Arabic and the "dir
" attribute is set to "rtl
".
<html lang="ar" dir="rtl">
Who in your team can typically fix this?¶
In order to repair issues flagged by this check, refer the issue to:
Front-end Development. (HTML knowledge is needed.)
This section gives links to resources that help with the issues discussed in this document.