Accessibility
<html> element must have a lang attribute
When configuring a screen reader, users select a default language.
If the language of a webpage is not specified, the screen reader assumes the default language set by the user. Language settings become an issue for users who speak multiple languages and access websites in more than one language. It is essential to specify a language and ensure that it is valid so website text is pronounced correctly.
Screen readers use different sound libraries for each language, based on the pronunciation and characteristics of that language. Screen readers can switch between these language libraries easily, but only if the documents specify which language(s) to read and when. If the language is not specified, the screen reader reads the document in the user's default language, resulting in a strange accent! It is impossible to understand anything when screen readers are using the wrong language library.
Fixing the problem
Add a lang
attribute to the html
element (e.g.
<html lang="en">
) whose value represents the primary language of
document.
Make sure you
<html>
element and
spell the attribute correctly. For example, if the primary language of a document is
English, you could specify the language as follows:
<html lang="en">
<!--document head and body-->
</html>
If you would like, you can even specify some dialects with codes such as "en-US" to signify American English or "fr-CA" for Canadian French. You can find a list of language and dialect codes on the internet.
If the language changes within a document, you can specify this as follows:
<p>Text in one language <span lang="es">text in another language</span></p>
If you are using a language that is written right to left, be sure to specify this using
the dir
attribute:
<p lang="ar" dir="rtl">Arabic text here</p>
If you would like to specify that a language is written left to right, you can fill the
value of the dir
attribute with the value "ltr".