Missing lang attribute on <html> in Svelte
The <html lang> attribute tells screen readers which pronunciation rules and voice to use, and tells search engines the content language for regional ranking. Without it, a screen reader may read English content with a French synthesizer, and translation tools guess. AI scaffolds that generate the app body rarely set the document language.
Symptoms
How VibeCheck catches it
In your widget · Problems
Missing lang attribute on <html>
To your coding agent · MCP
agent › get_detected_issues
→ { detector: "web-essentials", issue: "Missing lang attribute on <html>", threshold: "document.documentElement has no non-empty lang attribute" }
The same string in your widget and in your agent’s context — no screenshot, no copy-paste.
Root causes
The fix for Svelte
SvelteKit sets it in app.html on the <html> tag. For per-request locales, use the lang placeholder and set it in a hook.
<html lang="en">Steps
- Find where the root
<html>element is defined - Add
lang="en"(or your primary locale) - For multilingual pages, tag individual sections with their own
lang
FAQ
- What value should
langbe? - A BCP-47 tag: "en" for English, "en-US" for US English, "de", "pt-BR", etc. Use the most specific tag that is accurate for your content.
- Do I need
langon elements other than<html>? - Only if part of the page is in a different language. Then add
langon that element so assistive tech switches pronunciation just for that region.