Don't forget to translate your alt text
If your website has multiple language versions, you've probably put a lot of work into getting the translations right. But there's one thing that consistently slips through the net, even on well-built, carefully translated sites. Alt text!
This is a common WCAG failure that can easily fly under the radar. It's easy to miss, easy to ship, and a lot more common than you'd expect. I've seen it on government websites, e-commerce platforms, and well funded projects that clearly had accessibility in mind. The lang attribute is set correctly. The visible text is properly translated. But buried in the markup, the alt attributes are all hard-coded in English.
Why it happens
This usually happens for one of several reasons.
Translation processes often just target the visible content. Somebody does a copy and paste on all the visible content from the pages, hands it off to translators, and the translations are then dropped back in. If the alt text isn't part of that pipeline, it just doesn't get done.
Another common issue is that some alt text is just hardcoded directly into the template, rather than pulled from a content management system or translation key. Even when looking at the markup for products using a library like i18n, you'll often still see images with alt text that is never surfaced for translation. So, site administrators physically can't access certain images to change their text descriptions.
If you're using a Content Management System (CMS), you're also at the mercy of the people that designed it. I've seen some custom solutions which are well thought out. They offer solutions for translations on body copy, but the feature just isn't there when you go to write alt text on your images.
What WCAG actually says
To meet WCAG 2.2 SC 1.1.1 Non-text Content, images which are not decorative must have a text alternative that serves the equivalent purpose.
The key phrase here is equivalent purpose. If a Spanish person using a screen reader is navigating a page written in Spanish, and they hit an image described in English, the text alternative is not serving an equivalent purpose. They're likely getting information in a language they don't understand, which is not an equal experience.
It also fails WCAG 2.2 SC 3.1.2 Language of Parts, which requires that any passage of text written in a language different from the page's primary language must have its language programmatically identified. An English alt attribute on a Spanish page technically contains a language change without a lang attribute. So, a screen reader using a Spanish voice pack will attempt to pronounce English words using Spanish phonics, which can make them unintelligible.
A quick example
Here's what the problem looks like in a real world scenario. Imagine you have a product image on your English site. For example:
<!DOCTYPE html>
<!-- English language correctly set -->
<html lang="en-GB">
…
<h1>Trainers</h1>
<!-- Alt text is also in English -->
<img src="trainers.jpg"
alt="Jordan 1 high-top basketball shoes in a classic Chicago colourway.
Featuring red and white panelling, a black swoosh and cuff, a white
mid-sole and a red sole.">On the Spanish version of the page, the language is set by the lang attribute on the <html> element with the value es, but the alt text hasn't been translated:
<!DOCTYPE html>
<!-- Spanish language correctly set -->
<html lang="es">
…
<h1>Zapatillas</h1>
<!-- Alt text is still in English instead of Spanish -->
<img src="trainers.jpg"
alt="Jordan 1 high-top basketball shoes in a classic Chicago colourway.
Featuring red and white panelling, a black swoosh and cuff, a white
midsole and a red outsole.">A screen reader on the Spanish page will correctly announce the heading in Spanish, then it will hit the image and attempt to read out English words using Spanish phonetics. It's not the experience you wanted to provide, and it's not the experience the user wanted to have!
Instead, it should have looked something like the following:
<!DOCTYPE html>
<html lang="es">
…
<h1>Zapatillas</h1>
<img src="trainers.jpg"
alt="Zapatillas de baloncesto Jordan 1 de caña alta en una combinación
de colores clásica de Chicago. Cuentan con paneles rojos y blancos,
un Swoosh y un ribete negros, una entresuela blanca y una suela roja.">How to catch it
The frustrating thing about this failure is that most automated tools won't flag it. They simply check for missing alt text, and this isn't missing. They aren't checking the language of the alt text matches the language of the page, unless you're running bespoke checks specifically designed to catch that.
You could probably build an automated checker to do it. Throw the text at a language detection library or an LLM. But the reliable way is probably just a manual check.
When reviewing a translated page, scan through the markup and check that the alt text has actually been translated. You can use one of the many awesome tools by Ian Lloyd to make life even easier. I recommend going to ally-tools.com and getting his list images bookmarklet to quickly view all images and their alt text in isolation.
If you have a lot of translated content, it's worth auditing your translation pipeline. Work out where alt text lives, whether it's in your CMS, in code, or in a design tool, and make sure there's a way to make it translatable.
A note on decorative images
It's worth mentioning, the WCAG failure only applies to images that carry meaning, and therefore need a description. So, even if it doesn't need a translation, you need to make sure you don't accidentally use a vague or tokenistic description.
If an image is genuinely decorative, the correct approach is to use an empty alt attribute, for example alt="". If it's an SVG, you can use aria-hidden="true".
Inversely, don't just mark an image as decorative to try and get out of translating it, when it actually contains meaningful content. Getting that distinction right matters or you'll fail 1.1.1 Non-text Content.
For more information on how to write good text descriptions, you can check out my post on how to write good alt text for screen readers.
Final thoughts
Translating a website properly is genuinely hard work. Getting the language attributes right, managing multiple content workflows, making sure the layout looks correct, and keeping everything in sync takes real effort. Don't do all of that hard work just to create a bad experience by leaving English text descriptions scattered across all your translated pages.
It's a very small thing to fix once you know to actually look for it. So, here are three tips for making sure you don't make this mistake:
Before sending content for translation: Add alt text for images to your translation checklist, or create a checklist if you don't have one. Make sure that the text is actually pulled out as part of that content curation step.
Translation process: Include text descriptions are part of your content pipeline. Make sure that before sending content over to translators that text descriptions are present. If there is no sign of it, then step 1 probably hasn't been done!
Post translation: Manually check the markup of your images on translated pages, or use a screen reader. Make sure that your alt text accurately reflects the language shown in the
langattribute on the<html>element for the page.
Doing these steps won't take long, especially once it becomes part of your BAU (business as usual) process. And, it means all that hard work you've put into your translations actually reaches the people it was intended for!
As always, I hope this was useful!
Thanks,
Craig
Post details
- Published:
- Read time:
- 5 minutes