When building websites, it is crucial to declare the language used on the page or for any parts of pages when the language changes throughout the content. This declaration, using a lang attribute, helps to ensure accessibility for blind and visually impaired users and can help to ensure the fonts on the website are correctly formatted for sighted users.
How Language Attributes Support Accessibility
Lang Attributes Help People With Disabilities
Screen readers heavily rely on language attributes to accurately read the content of a page. Without these attributes, screen readers may struggle to determine the language of the page or post, resulting in missed sections of text or incorrect pronunciation to the listener.
For people utilizing braille keyboards and refreshable braille displays (typically people who are Deaf-blind), language attributes enable substituting control codes for accented characters, ensuring that words, phrases, and text sections are correctly translated into Braille.
Speech synthesizers that support multiple languages also require language attributes to orient themselves and utilize correct pronunciations and syntax. Without proper language attribution, a speech synthesizer may mispronounce the text, leading to difficulties in understanding for the user.
Lang Attributes Help Language Learners
Language attributes not only benefit individuals with disabilities but also assist those who speak different languages or who are translating your website. Some translation tools required the language to be declared in order to be able to accurately translate the page.
Adding a language attribute will help to ensure that special characters are formatted appropriately for the language, which makes them easier for sighted people to read.
Here is an example of a post title written in Korean that is missing the language attribute:
Compare that to this image of the same title with the lang attribute defined:
Adding the lang attribute tells the browser that these are Korean characters and allows it to display the characters with proper font styling: showing brushstrokes, varied weight on the characters, and wider spacing. This makes the Korean characters easier to read for someone who is a native Korean speaker or someone who is just learning Korean.
Bonus: Lang Attributes Help SEO
Search engines utilize language attributes to understand the content on the page. Proper use of lang attributes can help improve search ranking, especially for searches in that language, and may bring more speakers of that language to the page.
How to Declare the Language in HTML
In HTML, you can declare the language of a page by using the “lang” attribute. There are two places that you might need to declare language: on the entire page itself and for any sections of text where the language changes within the page.
Setting a Lang Attribute for the Entire Page
To declare the language of the entire page, a lang attribute should be applied to the opening HTML tag, indicating the primary language used throughout the document.
In WordPress, this should be handled by the theme, and most modern themes do this for you. However, if the theme author has failed to define the language, you may see a Missing Language Declaration error in accessibility testing tools like Equalize Digital Accessibility Checker or WAVE.
Here’s an example of how the lang attribute can be set for the entire page on the HTML tag at the start of the page. Note that this should be before the <head> tag, not in it.
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>Website Title</title>
</head>
<body>
<!– website content goes here –>
</body>
</html>
In the example above, the “lang” attribute is set to “en-US” to indicate that the primary language of the page is United States English. If you’re using a different language, you would replace “en-US” with the appropriate language code, such as “fr” for French or “es” for Spanish.
Setting a Lang Attribute for Parts of a Page
You should also specify the language for specific elements within the page if the language changes for a particular part of the page, for example, if you’re including a quote from another language or providing a translation on the same page.
Here’s an example of a page that mixes English and Korean and also includes a sentence in Spanish.
To set the language for a part of a page, you can add the “lang” attribute to any HTML element. For example, here’s how it is added to the alternate language lists shown in the left sidebar of the image above:
<ul class=”resource-alternate-language-posts”>
<li>This resource has an English version. <a href=”https://resourcesharingproject.org/[…]”>Click here to view it in English.</a></li>
<li lang=”es”>Este recurso tiene una versión en español. <a href=”https://resourcesharingproject.org/resources/[…]”>Haga clic aquí para verlo en español.</a></li>
</ul>
In the example above, the page language is set to English, so nothing needs to be declared on the first list item, but the second list item is in Spanish, so it has lang=”es” on it to indicate the language is changing to Spanish.
Lang Attributes in WordPress
In the aria-hidden article, we discussed some ways attributes can be added to elements in various builders – without having to flip to the edit HTML view. In much the same way, you can add the lang attribute to declare the section of the page.
Bricks, Elementor Pro, and Oxygen support adding custom attributes out of the box. Here are the instructions for each one:
Other builders require the addition of plugins to be able to set language attributes.
- Beaver Builder Custom Attributes plugin (hat tip to Zack Pyle for telling me about this)
- Divi Supreme extension
If you are using the WordPress block editor (a.k.a Gutenberg), you can add attributes with either the Attributes for Blocks plugin, which allows you to add any attributes within the editor, or the Lang Attribute for the Block Editor plugin. Both are free.
If you’re doing lots of language switching within elements (such as words in a paragraph), Lang Attribute for the Block Editor is a better plugin to use because it gives you the ability to include the attribute on parts of a block, whereas the Attributes for Blocks plugin will add it on the entire block.
If you’re coding a page template that includes language changes, don’t forget to include the language declaration in your template. By correctly declaring the language of your HTML pages, you enhance accessibility for assistive technologies, aid in accurate translations, and enable search engines to understand and better rank your content.
Additional Resources
Join the Conversation!
There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!
Group Thread
Amber Hinds
Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.
Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since.
