We have a set of buttons that have a single icon for the content and no text content. One example, a button in the top left of a modal that has an 'X' icon which is an image file. To better communicate the button's action to those with using screen reading technology we are looking to add an aria-label attribute, in this case, one that has a value of Close.

Our application supports multiple language, but, for technical reasons, these buttons would not get their aria-labels translated.

So the question: If the aria-labels were English only, and using simple language like 'Close' and 'Go back', would they provide any value to non-English users, most likely be ignored, or cause confusion?

Thanks! And please let me know if you need extra details about the scenario.

  • 2
    What exactly is the "technical reason" the property meant to be used by a screen reader can't be translated into the users language? Apr 24 '19 at 1:56
  • 1
    +1 on the question above - are you sure you can't localise this? Else, see this great blog post that suggests alternatives on using elements you can perhaps translate with your CMS. You could use hidden text, or aria-labelledby on a hidden element which can be translated easier. Or just make the text label actually visible.
    – Victor
    Apr 30 '19 at 10:58
  • 1
    I'd like to focus this question on the value of the English labels for non-English speakers, and not the technical issues. But, since people are curious... we are exploring adding the aria-labels in our design system which has a component library. The component library does not include translations, and in general, avoids hardcoding any strings. We could have the apps that consume the component library pass in the translated aria-label values but I'm trying to understand if there is any incremental value of starting by hardcoding the English string into our component library. Apr 30 '19 at 23:47
  • 1
    As a translator looking for this info, I just want to clarify that the word is wrong. The infinitive of the verb "to close" in Spanish is "cerrar", and if you are using the second person formal/informal it would still be "cierre/cierra".
    – Connie
    Oct 29 '20 at 12:58
  • Thanks @Connie for the info. Noted. 🙏 Nov 4 '20 at 20:21

I believe you can embed the language attribute into the tag, and then write what you want the screen reader to say in the specified language: webaim designing for screen readers

I would have just made this a comment, but I don't have enough reputation points on this one, sigh.

For example, you may try something like this:

<button><span lang="es" class="sr-only">cerra</span><img src="something" alt="close" aria-alt-text="cerra"/></button>

However, I've only done a quick preliminary search to get you going in the right direction. I found this article by level access which may be exactly what you're looking for.

  • 1
    Using the lang attribute doesn't mean that it will only be read to speakers of that language: it just switches the voice of the screen reader to use the correct pronunciation. In the example you give, an English SR user would hear “cerra” in a Spanish voice then “close” in English; a Spanish SR user would hear “cerra close” both in the Spanish voice (if lang="es" is, correctly, used at the page level rather than per element). Not sure where that aria-alt-text is coming from either, but it won't have any effect.
    – Victor
    Apr 30 '19 at 10:54
  • @Victor, thank you I appreciate the feedback.
    – ciammarino
    May 1 '19 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.