What does this accessibility issue mean?
Accessibility issue summary: Missing HTML lang attribute
HTML lang attributes identify the language used on a webpage.
For screen readers and other assistive technologies, the language attribute helps ensure the correct pronunciation and presentation of a website’s content to users. If a screen reader user speaks multiple languages and accesses websites in multiple language, missing or invalid HTML lang elements will lead their screen reader technology to present the website in the user’s default language setting, which may not be correct for the content at hand.
Additionally, search engines use the lang attribute to determine the language of the content, which can improve search results for users searching for content in a specific language.
Pages without any HTML lang attributes present violate WCAG (Level A) guidelines. This accessibility issue is related to WCAG rules around Page Language.
Solution:
Ensure every HTML document has a lang attribute.
Example HTML violation: Missing HTML lang attribute (WCAG Level A Issue)
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>My Ecommerce Store</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/products">Products</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
</header>
<main>
<!-- Main content goes here -->
</main>
<footer>
<!-- Footer content goes here -->
</footer>
</body>
</html>This HTML code violates the accessibility rule html-has-lang which specifies the need for a lang attribute in the html tag. The lang attribute is used by screen readers to correctly pronounce text in the specified language, so it's important for accessibility.
Here's an updated version of the HTML code with the issue resolved:
How to fix "Missing HTML lang attribute (WCAG Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>My Ecommerce Store</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/products">Products</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
</header>
<main>
<!-- Main content goes here -->
</main>
<footer>
<!-- Footer content goes here -->
</footer>
</body>
</html>In this corrected version, lang="en" is added to the `` tag. This means the page content is in English, and screen readers will pronounce the text correctly.
