Identify the Primary Language of the Page
Why It Matters
Screen readers use the declared language to load the correct pronunciation rules and character sets. If the language is not specified or is incorrect, the screen reader may mispronounce words, making the content difficult or impossible to understand for visually impaired users relying on text-to-speech.
Fixing the Issue
Add the lang attribute to the <html> tag at the beginning of your HTML document. The value should be the appropriate ISO language code (e.g., en for English, es for Spanish, fr for French, en-GB for British English). If parts of the page are in a different language, use the lang attribute on the element containing that content.
Good Code Example
Specifying the primary language of the page and a language change within the content:
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My English Page</title> </head> <body> <h1>Welcome</h1> <p>This page is primarily in English.</p> <p>However, here is a quote in French: <span lang="fr">"Je pense, donc je suis."</span> </p> </body> </html>
Bad Code Example
Missing or incorrect language declaration:
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Page</title> </head> <body> <p>This content's language is unknown to assistive technology.</p> </body> </html> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>My English Page</title> </head> <body> <p>This English text might be read with Spanish pronunciation rules.</p> </body> </html>
