The lang Attribute and Screen Readers
Declare page and element language for correct pronunciation.
The lang Attribute and Screen Readers is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What the lang Attribute Does
The lang attribute declares the language of an element's content using a BCP-47 language tag. Screen readers use it to select the correct pronunciation engine and voice, and search engines use it to index by language.
Setting on the html Element
Every page must declare its primary language on the root: <html lang="en"> for English, <html lang="tr"> for Turkish, <html lang="ja"> for Japanese. Without it, screen readers fall back to the user's system default, often mispronouncing every word.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>BCP-47 Tags
Tags follow BCP-47: language code (en, tr, ja), optionally a region (en-US, en-GB, zh-Hant, zh-Hans), and rarely a script. Use the most specific tag that is accurate; "en" alone is fine when regional spelling does not matter.
Mid-Page Language Changes
For a section in a different language, mark it with its own lang attribute: <blockquote lang="fr">Bonjour</blockquote>. The screen reader switches voices for that section, producing accurate pronunciation even on multilingual pages.
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>CSS Language Selectors
CSS can target language via :lang(en): blockquote:lang(fr)::before { content: "« "; }. The selector matches the closest ancestor's lang attribute. Use for typographic conventions (quotation marks, spacing) that vary by language.
Why It Matters for Pronunciation
"Live" in English vs. French changes pronunciation. "Wir" in German is "veer", not "wear". A screen reader configured for English will mispronounce both unless told the surrounding section is German or French.
hreflang for Linked Languages
The hreflang attribute on links (<a href="/fr/" hreflang="fr">Français</a>) tells search engines and assistive tech the language of the linked page. Combine with site-wide hreflang link tags for full international SEO coverage.
Detecting User Language
JavaScript can read the user's preferred languages from navigator.languages (an array of BCP-47 tags in priority order). Use it to choose a default locale or to suggest a language switch — but always honor a user's explicit choice over the browser default.
Server-Side Detection
The HTTP Accept-Language request header lists the user's language preferences from the browser config. Use it on the server to send the right localized HTML on first request, so the user sees their language before any JavaScript executes.
Multiple Languages in One Page
Wikipedia articles, language-learning apps and dictionaries routinely mix languages. Mark every passage with its own lang attribute, even short ones. Without per-section lang, screen reader voice and CSS quotation marks revert to the page default.
Common Mistakes
Missing lang on <html> (very common), wrong language code (lang="english" instead of lang="en"), or using regional codes when language alone suffices. Use the W3C validator and Lighthouse accessibility audit to catch these in CI.
Knowledge Check
Why is the lang attribute on particularly important for screen reader users?
Summary
Declare the page language on <html> with a BCP-47 tag (en, tr, ja, zh-Hant). Mark mid-page language changes with span/section lang attributes so screen readers switch voices. CSS :lang() can apply language-specific typography. Always set lang — it costs nothing and dramatically improves screen reader pronunciation, SEO and CSS targeting.
Frequently asked questions
Is the “The lang Attribute and Screen Readers” lesson free?
Yes — the full text of “The lang Attribute and Screen Readers” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “The lang Attribute and Screen Readers”?
Declare page and element language for correct pronunciation. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The lang Attribute and Screen Readers” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The lang Attribute and Screen Readers
- dir=rtl for Right-to-Left Text
- The bdi and bdo Elements
- charset and Unicode Handling Special Characters