aria-description Does Not Translate

It does, actually. In Firefox. Sometimes.

A major risk of using ARIA to define text content is it often gets overlooked in translation. Automated translation services often do not capture it. Those who pay for localization services frequently miss content in ARIA attributes when sending text strings to localization vendors.

Content buried in aria-label, aria-placeholder, aria-roledescription, or aria-valuetext can end up being presented to users in a language different than their own. The very thing we add to help users can exclude them instead.

Demo

The embedded page uses the Dutch translation of WCAG and specifies the page language as Dutch. You should visit it directly to trigger browser auto-translation features (assuming you are not Dutch, I guess?).

The modal dialog that you can trigger will not load the W3C page and that’s fine. It doesn’t matter for the scope of the demo.

The uses of aria-description in the demo:

<a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html" 
  target="_new"
  aria-description="Opent in nieuw venster">
    Niet-tekstuele content begrijpen
</a>

<button
  aria-description="opent ingesloten inhoud">
    Hoe te voldoen aan Niet-tekstuele content
</button>

<iframe
  title="Hoe te voldoen aan Niet-tekstuele content"
  aria-description="Engelstalige inhoud">
</iframe>

Browsers

Browsers may or may not help users. I tested the following desktop browsers.

Firefox

Firefox 133 translated the aria-description on the link and the button, but not the nested iframe (before or after the dialog was opened).

Chrome

Chrome 131 did not translate any aria-description.

Edge

Edge 131 did not translate any aria-description.

Safari

Safari 18.2 did not translate any aria-description.

Auto-Translators

If your browser can’t do it, you can always hop over to an online translation service. Though I only know of one still running (Bing’s went away a few years ago).

Google Translate

I fed the page into Google Translate and it did not translate any aria-description.

For Developers

If you have no localization budget, don’t use aria-description.

Don’t expect your users to rely on machine translation services that don’t work.

If you already have a process (and budget) to translate (localize) text strings with humans, then you will need to ensure you capture all the strings that may not be visible on the page. If you don’t have one for aria-label then you won’t have one for aria-description.

Instead, lean on traditional ways of assigning an accessible description, such as visible text associated via aria-describedby. If you want to visually hide it, understand that if the content is useful for screen reader users then it might be useful for all users.

After years of seeing untranslated aria-labels strand users, anecdotal evidence suggests the lower support for auto-translation of aria-description will result in even worse outcomes for users.

Recap

Avoid using ARIA to hold content. In particular, instead of aria-description, lean on:

1. aria-describedby pointing at existing visible text,
2. aria-describedby pointing at visibly-hidden content that is in the page.

Related

• aria-label Does Not Translate, 7 November 2019
• My Priority of Methods for Labeling a Control, 9 January 2020
• aria-label is a code smell, Eric Bailey, 31 October 2022
• aria-description, ARIA 1.3 Editor’s Draft