Accessibility Tips: Setting language

Christopher Hall — Sun, 21 Jul 2019 16:52:43 +0000

It helps to set the language of a page when you're developing to meet WCAG 2.0 standards. Specifically, the 3.1.1 - Language of Page rule.

You can accomplish this with the lang attribute on the html tag, like so:

<html lang="en"></html>

Besides the language code, you can also add a country code to make the language more specific. For example, this would indicate British English:

<html lang="en-GB"></html>

If you would like to set a specific piece of content to a different language, use the lang attribute there as well. This will help screen readers pronounce the content correctly.

For example, a link to the Japanese version of a website would be pronounced "Nihongo", not "Ideographic Character Ideographic Character Ideographic Character".

<a href="#" lang="ja">日本語</a>

DEV Community: Christopher Hall

Accessibility Tips: Setting language