2

the accent of the screenreader is controlled by the <html lang="[language]"> element. When the lang attribute is set to "de" some english words like "email" pronounced like "Emil" (a german first name). Is there a way to switch the accent for single words in an aria-label to another language or other well known workarounds to achieve this?

something like

<button aria-label="(lang=en:E-Mail) schreiben">
fastr.de
  • 1,413
  • 12
  • 23

1 Answers1

5

For your specific question regarding individual words in an aria-label, the answer is no.

However, if you use aria-labelledby to point the label to another element (or several other elements), then you could split the words up and use the lang attribute on whatever words you want.

<div class="sr-only" id="mylabel">
  <span lang="en">email</span>
  <span lang="de">schreiben</span>
</div>

<button aria-labelledby="mylabel"></button>

The <div> is visually hidden (see What is sr-only in Bootstrap 3? for info on the "sr-only" class) but is available to screen readers.

Update Jan 14, 2019

If the screen reader (whether VoiceOver, as asked for in the OP, or JAWS or NVDA) does not change languages with aria-labelledby, then you'll have to embedded the "hidden" text (class="sr-only") inside the <button> as follows:

<button>
  <div class="sr-only">
    <span lang="en">email</span>
    <span lang="de">schreiben</span>
  </div>
</button>

Although I just tried a simple example and VO did not change languages. That sounds like an Apple bug. I also tried reversing the words in case VO was looking at the first language attribute and using that for the entire button:

<button>
  <div class="sr-only">
    <span lang="de">schreiben</span>
    <span lang="en">email</span>
  </div>
</button>

But that had the same result. The entire button was read in English.

If I put the label as plain text itself, 

<div>
  <span lang="en">email</span>
  <span lang="de">schreiben</span>
</div>

VO works correctly and reads the first word in English and the second in German.

slugolicious
  • 8,671
  • 1
  • 20
  • 30
  • This is technically the correct answer, but the voice-over in iOS and Mac OS didn't switch the language ;-( Mac OS reads everything with the german or englisch language setup in the settings and iOS uses the voice indicated by the attribute, but didn't switch later on. – fastr.de Jan 14 '19 at 10:55
  • @fastr.de I just tried the UPS site where it lets you choose another country, https://www.ups.com/us/en/global.page, and VoiceOver switches languages on the non-English choices (try expanding Europe), but those are done with content text rather than `aria-labelledby`. The spec for the `lang` attribute (https://www.w3.org/TR/html53/dom.html#the-lang-and-xmllang-attributes) says "*The `lang` attribute specifies the primary language for the element’s contents **and for any of the element’s attributes that contain text***". So this sounds like a VoiceOver bug and should be addressed with Apple. – slugolicious Jan 14 '19 at 15:40
  • Although, technically speaking, the `aria-labelledby` attribute does not strictly contain text. The attribute itself contains an ID, and the ID points to an element that contains text, so there's one level of indirection. It would be nice if this worked. To work around it, the
    in my code example would have to be inside the
    – slugolicious Jan 14 '19 at 15:46