4

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.

Improve this question
5
  • 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?
    – Nicholas Pappas
    Commented Apr 24, 2019 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
    Commented Apr 30, 2019 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.
    – Lokesh Dhakar
    Commented Apr 30, 2019 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
    Commented Oct 29, 2020 at 12:58
  • Thanks @Connie for the info. Noted. 🙏
    – Lokesh Dhakar
    Commented Nov 4, 2020 at 20:21

2 Answers 2

Reset to default
1

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.

Improve this answer
2
  • 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
    Commented Apr 30, 2019 at 10:54
  • @Victor, thank you I appreciate the feedback.
    – ciammarino
    Commented May 1, 2019 at 14:59
1

From the users pov, this is a question of percentage to completion, so having English labels in place at the very least is +%. Otherwise you're covering 0% of user needs in the realm of html accessibility.

Whether this leads to rework and tech debt later on, it depends on how you finally propose to include multi-lingual labels later on.

Screen readers should pick up on the fact the site is set to lang=eng. So the user potentially expects any written content or labels to be in English.

Ultimately, if your user base has large percentages in different langauges, this needs to be made a priority as soon as possible for the sake of user retention, and being perceived as valuable in any way by those groups. It becomes a business decision at that point, whether you know the percentages of non english reading users or not.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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