Define the human language in markup

HTML code with the human language attribute
Image description: A code editor displaying well-labeled HTML with the human language attribute. The code in the editor is displayed below.

<html lang=”en-US”> <p lang=”es-MX”>Oh Dios mío!</p> <p>In Chinese, <span lang=”zh-CN”>我的天!</span></p>

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

The correct language attribute ensures that screen readers process the content in the intended language.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts text, buttons, and other screen elements to audio and/or braille. If you are new to screen readers, I recommend watching a video to learn how it works.

In order to ensure the screen reader user experiences content in the intended language, the human language attribute must be correctly labeled.

This references WCAG criteria 3.1.1 Language of Page (Level A) and 3.1.2 Language of Parts (Level AA).

How to Implement This

Language of the Page

Add the language attribute to each page with the correct language code.

HTML Language Code Reference

<html lang="en-US">
<p>It's a beautiful day to not wear pants.</p>
</html>

Language of Phrases and Passages

For individual phrases and passages that differ from the page language, use the span element.

<p>Hungarians refer to themselves as <span lang="hu">magyarok</span>.</p>

Note on "Programmatically Determined"

WCAG often uses the phrase "programmatically determined" to mean that an element is defined in markup (HTML) and therefore available for assistive tech to access. I use the term "defined in markup" instead because I find it more simple and understandable. Just keep this in mind when reading WCAG source material.

How to Test This

Many automated testing tools check for the human language element, as this is considered a universal accessibility feature. Deque Axe and Google Lighthouse effectively detect and annotate this error.

Credits

No credits yet. But this could be you!

Code snippets written by Michellanne Li.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.