Adding a language tag to image elements
By @edent
· a11y accessibility HTML HTML5 · 2 comments · 350 words · read ~333 times.
(You may already know this, but I didn't. Every day is a school day.)
HTML has the concept of the lang attribute. It allows you to say that a specific element contains text in a specific human language. For example, this page starts with:
<html lang="en-GB">That says the entire page is written in English, with the sub-type of Great Britain. This means your browser might offer to translate the page, if that isn't a language you can read. Or it might read the page aloud in a "British" accent (as opposed to American or Australian).
You can mix and match languages in a document. For example:
<p lang="en">My favourite book is "<span lang="fr">Les Misérables</span></p>".If you don't do this, you can end up with some weird results. Imagine a page in en-AU which contained a quotes in German, which didn't use lang="de". Your computer might read it out loud and it would sound like this:
Yikes!
It turns out, you can add the lang anywhere:
The
langattribute in no namespace may be used on any HTML element.
HTML specification
So, why would you want to add language to an image?
For accessibility, of course!
Consider this image
The HTML behind that image is:
<img lang="zh-CN" alt="大型载客汽车" src="example.jpg" />That means a user-agent can offer a translation, or read the text with the correct voice Nifty!
There is, of course, a drawback. You can't include multiple languages.
Consider this photo:
There's no way to add multiple langs in an element. This is similar to the limitations of HTML's title element.
There are a bunch of ways to add long and complex descriptions to images which are probably a more appropriate way to add multilingual text.
But, there you go. If you need to add a specific language to an image, you can!
Mastodon
Twitter
Facebook
LinkedIn
Reddit
HackerNews
Lobsters
Pocket
WhatsApp
Telegram
For photos of traffic signs, I’m not sure that the text of the sign is sufficient as alt text. I’d probably write something like
alt=”A No U-turn traffic sign above a sign that contains the text “large passenger cars” in Chinese”
This whole article obviously just t demonstrate the female Ozzy voice reading German…