1. Getting Started
  2. Installation: Preline UI

Accessibility

HTML elements with lang and xml:lang must have the same base language

When configuring a screen reader, users select a default language.

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. Multiple languages are an issue for users who speak and access websites in multiple languages. It is essential to specify a default language and ensure that it is valid for screen readers to function correctly.

Screen readers use different sound libraries for each language, based on the pronunciation and characteristics of that language. Screen readers can switch between language libraries easily, but only if documents specify which language(s) should to read. If the language is not specified, screen readers read documents in the user's default language, resulting in garbled language. It can be challenging to understand anything when screen readers are using the wrong language library.

Fixing the problem

Add a lang attribute value to the html element (e.g. <html lang="en">) indicating the primary document language.

If required, duplicate the value of the lang attribute as the value of the xml:lang attribute on the html element.

Remember to set the lang attribute value in the opening html element and spell the value correctly. For example, if the primary language of a document is English, specify the language as:

<html lang="en">
<!--document head and body-->
</html>

Language value codes include some dialects such as "en-US" to differentiate American English from UK English< or "fr-CA" to differentiate Canadian French from European French. You can find a list of language and dialect codes on the ISO Codes for the Representation of Names of Languages web page.

In the event of a document containing multiple languages, specify language values as required:

<p>Text in one language <span lang="es">text in another language</span></p>

Be sure to specify languages written right-to-left using the dir attribute:

<p lang="ar" dir="rtl">Arabic text here</p>

Conversely, you may also specify left-to-right languages via the dir="ltr" attribute value.