vibecheck0.3.0
Web essentialsweb-essentialslangwarning

Missing lang attribute on <html> in Vue

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.

Framework fixes
GeneralReactNext.jsVueSvelte

Symptoms

  • Screen readers use the wrong voice or pronunciation
  • Browser “translate this page” offers to translate content that is already in the user’s language
  • Lighthouse/axe report "html element does not have a [lang] attribute"

How VibeCheck catches it

In your widget · Problems

warningweb-essentialsMissing 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 root <html> element was generated without a lang attribute
  • A single-page app renders into <body> and never sets the document language

The fix for Vue

Set lang on the <html> element in index.html. For Nuxt, configure it via app.head.htmlAttrs.lang.

index.htmlhtml
<html lang="en">

Steps

  1. Find where the root <html> element is defined
  2. Add lang="en" (or your primary locale)
  3. For multilingual pages, tag individual sections with their own lang

See the general, framework-agnostic fix →

FAQ

What value should lang be?
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 lang on elements other than <html>?
Only if part of the page is in a different language. Then add lang on that element so assistive tech switches pronunciation just for that region.