Language of parts bookmarklet
When you are publishing content on a website, you need to make sure you indicate the main (human) language that the content has been written in. You also need to make sure you indicate when you have used language that deviates from the main language.
This is important from an accessibility point of view as it indicates to assistive technology, such as screen readers, what language the content should be read in.
It also gives a machine-readable signal which can be made use in other ways, such as offering to translate the page if it isn't written in a language you have said that you understand.
WCAG Criteria
WCAG 2.2 has two criteria that deal with indicating the language of content. Success criteria 3.1.1 Language of page (Level A) and 3.1.2 Language of parts (Level AA). They are also included in the European standard EN 301 549 as 9.3.1.1 and 9.3.1.2 respectively.
Technically, both of these criteria are quite easy to meet. The challenge often lies in lack of functionality in publishing systems combined with a lack of awareness by content creators.
Language of page
To indicate the language of the page, you just need to include a "lang" attribute on the HTML element at the beginning of the page with the appropriate language tag.
So for a webpage in English, that would be "en".
To be completely correct, this webpage should really include a regional sub tag. Which means it should use a language tag of "en-GB" to indicate British English.
That isn't really going to make much of a difference, as a screen reader would likely just read the page in the user's chosen English dialect. It might be relevant in other languages (such as Mandarin and Cantonese). If you want to learn more about language tags and choosing an appropriate value, then Document and Content Language on Webaim is a good read.
Here's an example that shows how a page would be correctly marked up as having a main language of English (and meet the success criteria of 3.1.1).
<!doctype html>
<html lang="en">
<head>
<title>An example webpage in English</title>
</head>
<body>
<h1>An English webpage</h1>
<p>With some English text.</p>
</body>
</html>Language of parts
If you have content on your webpage that isn't in the same language as the main human language you've indicated with the language tag on the HTML element, then you point this out. This is where language of parts comes in.
To indicate the language of a piece of content that's in another language, you include a "lang" attribute (with the appropriate language tag) in the HTML element that surrounds the content.
Here's an example that shows how a page would be correctly marked up as having a main language of English, but contains some Swedish (and some British English).
<!doctype html>
<html lang="en">
<head>
<title>An example webpage in English</title>
</head>
<body>
<h1>An English webpage</h1>
<p>With some English text.</p>
<p lang="sv">Och någonting på svenska.</p>
<p lang="en-GB">and something internationalised as British English.</p>
</body>
</html>When you're checking a page to see if it has correctly handled the language of the page and the language of any content that deviates from that - it generally involves "going under the hood" and looking at the HTML.
Not everyone is comfortable with that, and even if you are, it's not always easy to scan through the code and see if content that is in another language has the correct attribute.
As someone who regularly deals with website that contain a mix of Swedish and other languages. I wanted a way of checking that was a little bit quicker and a little bit easier for those who don't like inspecting the source code of web pages.
So I've created a bookmarklet to make the task easier.
The bookmarklet
Drag or copy the "Lang of parts" link to your Bookmarks bar to create a bookmarklet that when activated will highlight all the elements on the page with a "lang" attribute.
To run it, visit the page you want to test and click on the bookmark you've added.
What this bookmarklet does
The bookmarklet when run counts the total number of "lang" attributes in the body of the webpage (it doesn't include the "lang" attribute of the HTML element in the total that it displays).
If a "lang" attribute is present on the HTML element, it will tell you what language tag it contains. It will also say if this attribute is missing.
If any hidden elements with "lang" attributes are found, it will tell you how many.
Stockholms stad example
The municipal website for the City of Stockholm has content in a number of languages. 13 including Swedish. Running the bookmarklet on the Other languages page is therefore a useful test.
It shows that the language of the page is Swedish (sv) and that there are 30 elements in the body of the page that have a lang attribute. In addition, 2 of them aren't currently visible.
Running the bookmarklet reveals that the City of Stockholm has done a pretty good job at indicating the language of parts on the page - including all the 12 links to other language versions.
What the bookmarklet also reveals is that they have missed adding a "lang" attribute to the text "Other languages" that is shown in the breadcrumbs.
Limitations
Depending on the element where a "lang" attribute is attached, the highlighting might not be visible. For example, if the "lang" attribute has been placed on a div but a child div has a background and its size equals the parent div.
In practice, I don't think this limitation will affect you too much as if you notice a piece of content that is in another language but not highlighted you'll need to make a note of it (so you can pass it on to someone who might be able to investigate it further) or "dive under the hood" and check the HTML to see if it is actually missing a language tag.
I've published the Language of parts bookmarklet on Codepen. If anyone with better coding skills than me has ideas about how to improve it, then please go ahead and fork it!
Hopefully this bookmarklet helps you check a little bit earlier that all the content on a page is marked up correctly with the appropriate language tag.
References
Bookmarklet icon used in the feature image is CC BY 3.0 Lorc.