Missing lang attribute

What the attribute is for

Assistive technology reads a page aloud using a voice for a particular language. When the page does not say which language it is in, a screen reader falls back to the user's default, so an English page can be read with the wrong accent or a French page can be read letter by letter in English. That makes the page harder to use for people who rely on it, and accessibility audits list a missing lang attribute among the first findings.

Browsers use the same information. Translation tools decide whether to offer to translate a page by comparing its language to the visitor's, and spell checkers and hyphenation pick their rules from it. Search engines mostly detect language from the content itself, so this is not a ranking switch, but it is cheap to get right and part of a finished handoff.

How Skewcheck detects it

Skewcheck reads the HTML as served and looks at the lang attribute on the <html> element. If it is present and not empty, the check passes. If it is missing or empty, the check warns with low severity and removes 2 points from the score. The check does not validate the value: lang="en", lang="en-GB" and even a wrong code all pass, so make sure the code matches the language of the visible text.

Because Skewcheck reads the HTML the server sends, a language set later by a script is not seen. Attributes on other elements, such as lang on a quoted foreign phrase inside the body, are fine to use but are not looked at.

curl -s https://example.com | grep -oiE '<html[^>]*>'

Setting it on your platform

In plain HTML, add lang to the opening <html> tag with a BCP 47 code, such as en, en-GB, fr or hi. In the Next.js App Router, set it on the <html> element in app/layout.tsx. WordPress writes it from the language chosen under Settings, General, Site Language, so a missing attribute there usually means a theme that prints its own <html> tag without calling language_attributes(). In Webflow and Framer, look in the site settings for a language option, and if you cannot find one for your plan, check the published page source before assuming it is missing, since platforms differ and change their settings screens.

If the site has pages in several languages, give each page the code for its own language rather than one value for the whole site. Re-check after publishing, and view the page source to confirm the attribute appears on the root element.

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Before and after

<html>

<html lang="en-GB">