CODEWITHSUNDEEP
htmlwai-aria
fastr.de
fastr.de

Reputation: 1525

How can i use partly another language in html5 aria-label?

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">

Upvotes: 7

Views: 5537

Answers (1)

slugolicious
slugolicious

Reputation: 17445

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.

Upvotes: 6

Related Questions