3

What's the best practice regarding aria attribute translations? If a page is available in several languages, should aria attributes be too?

I am using react-i18next useTranslation hook to translate a site to a couple different languages, and I was wondering if I should also use the hook to translate my aria attributes.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Henri Willman
  • 119
  • 1
  • 5
  • 1
    I would disagree with attempts to close this as "opinion-based;" I highly doubt anyone believes screen reader visitors to a website shouldn't be able the access the content in their own language. – Alexander Nied Jul 29 '22 at 19:59

3 Answers3

4

I would limit the question a bit because not all ARIA attributes should be translated. In fact, most of them should not. For example, you don't want "true"/"false" (aria-hidden) translated to another language. You don't want "polite"/"assertive" (aria-live) translated to another language.

So you're really only talking about aria-label and aria-roledescription (the latter is not used very much). In ARIA 1.3, there will also be aria-description so it would be translated too.

But yes, if you translate the whole page (and set the lang attribute appropriately), you should also translate the aria attributes associated with string labels.

That's why I like using aria-labelledby instead of aria-label because the ID associated with the label will be translated (assuming it's a regular text HTML element) so your label gets translated for free.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • I’m afraid that the current list of aria attributes that need localisation is not complete in this answer. I could think also of `aria-placeholder`, `aria-roledescription` and `aria-valuetext`. – Andy Jul 30 '22 at 10:31
  • I mentioned roledescription but forgot placeholder and valuetext because I never use those, but you’re right. But my main point was that there are only a few that have to be translated. – slugolicious Jul 31 '22 at 13:06
4

As all text potentially presented by the user, of course they have to be translated.

All ARIA attributes containing plain text, such as aria-label, have to be translated, with the same care as if they were normally displayed on screen. This is also true for alt attribute of images, sr_only text, etc.

As a screen reader user speaking several languages living in a country with several official languages and so very often face multilingual websites, I can confirm that it's a common annoying oversight.

Of course, all what is purely technical, such as IDs, true/false values, etc. don't need to be translated, as no user will ever see them.

QuentinC
  • 12,311
  • 4
  • 24
  • 37
3

It’s a common misconception that all UI text was visible or in text nodes. Often there are plenty of texts that will only be seen under certain conditions (states), or that will be read by machines, including search engines and assistive technology, before being presented to the user.

ARIA attributes that include human readable text are part of it and need to be translated.

I read articles about always trying to put text in a text node, for example by preferring aria-labelledby over aria-label. In my personal opinion, there are too many use cases where this is simply not possible. So we need a better approach anyway.

In HTML, examples for attributes that need localization, are:

  • Head Metadata including OpenGraph for sharing like <meta property="og:description">
  • alt attributes and title, also for <iframes> or <style> elements
  • label for video tracks
  • placeholder and pattern attributes if the format needs localization
  • value of inputs if not user-defined
  • Human-readable ARIA attributes aria-description, aria-label, aria-placeholder, aria-roledescription, aria-valuetext, aria-braillelabel

And also text

  • visually hidden by CSS, often via .sr-only or .visually-hidden classes
  • added by CSS’s pseudo-elements like ::before

Text parts with the lang attribute should not get translated and keep that attribute.

Relatedly, there is the translate attribute …

[…] that is used to specify whether an element's translatable attribute values and its Text node children should be translated when the page is localized, or whether to leave them unchanged.

Andy
  • 4,783
  • 2
  • 26
  • 51