*This article is an English translation of a Japanese article.
The “Language of Parts” guideline in web accessibility standards requires that the language of text and content on a webpage be properly specified. For websites that need to support multiple languages, setting the language for each content part is essential to ensure users can understand information smoothly. Adhering to this guideline particularly improves accessibility for screen reader users by allowing content to be read in the correct language. In this article, we’ll discuss the importance of “Language of Parts” and methods to implement it effectively.
The Importance of “Language of Parts”
When different languages are mixed within a website or content, failing to specify the correct language can lead to the following issues:
-
Screen readers may read content in the wrong language
Screen readers switch pronunciation settings based on language settings, but without proper language specification, content may not be read correctly. -
Confusion and decreased comprehension for users
When language is not correctly specified, it can make understanding more difficult, particularly for multilingual users. -
Reduced accuracy in search engine indexing
Search engines reference content language settings, so improper language specification may negatively impact SEO.
Methods for Implementing “Language of Parts”
1. Specifying the Language for the Entire Page
Set the primary language for the entire page in the lang attribute of the HTML tag. For example, if the webpage is in Japanese, specify it as follows:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>About Web Accessibility</title>
</head>
<body>
<!-- Content -->
</body>
</html>
2. Switching Languages for Specific Parts
If your webpage includes content in different languages, specify the language only for those parts, allowing users to naturally understand the content.
Example: Below, English is used for a quote within a Japanese page.
<p>The following is a famous English proverb:</p>
<blockquote lang="en">"Actions speak louder than words."</blockquote>
<p>Meaning: Actions are more expressive than words.</p>
3. Setting the Language for Dynamic Content
Apply language attributes to content generated dynamically, for instance, using JavaScript. Here’s how to set the lang attribute in JavaScript:
const message = document.createElement("p");
message.lang = "en"; // Set language to English
message.textContent = "This content is in English.";
document.body.appendChild(message);
4. Applying Language Settings to Short Phrases or Words
When short phrases or words in different languages are mixed into a sentence, specify the language for these parts to help assistive technologies handle them properly.
Example: Introducing “Internet” as an English term within Japanese content:
<p>The Internet (<span lang="en">Internet</span>) is an essential technology in modern information society.</p>
Checklist for Implementing “Language of Parts”
-
Verify language settings for the entire page and individual parts Ensure the whole page language is set (e.g.,
<html lang="ja">for Japanese). -
Test with a screen reader Use a screen reader to confirm that multilingual content is read in the correct language.
-
** Check with translation tools** Use browser translation features or tools to verify if the language specification is correct and functioning as expected.
Conclusion
“Language of Parts” is an essential factor in enhancing web accessibility. By specifying languages correctly for each content part, you can provide a web experience that is inclusive for both screen reader users and multilingual users. This ensures that all users can access and understand information more easily, creating a more accessible and user-friendly web environment.
We have released the UUU Web Accessibility Widget Tool, designed to make web accessibility easy to implement. This tool helps improve the accessibility of websites quickly and efficiently, even without specialized knowledge.
If you’re interested in enhancing your website’s accessibility, please check out the details. We are here to support you in making your website more user-friendly and accessible to a wider audience.