如何在 html5 aria-label 中部分使用另一种语言?

fas*_*.de 3 html wai-aria

屏幕阅读器的重音由<html lang="[language]">元素控制。当 lang 属性设置为 "de" 时,一些英语单词如 "email" 发音为 "Emil"(德语名字)。有没有办法将 aria-label 中单个单词的重音切换为另一种语言或其他众所周知的解决方法来实现这一点?

就像是

<button aria-label="(lang=en:E-Mail) schreiben">
Run Code Online (Sandbox Code Playgroud)

slu*_*ous 5

对于您关于 a 中单个单词的具体问题aria-label,答案是否定的。

但是,如果您使用aria-labelledby将标签指向另一个元素(或多个其他元素),那么您可以将单词拆分并lang在您想要的任何单词上使用该属性。

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

<button aria-labelledby="mylabel"></button>
Run Code Online (Sandbox Code Playgroud)

<div> 在视觉上是隐藏的(有关“sr-only”类的信息,请参阅Bootstrap 3 中的 sr-only 是什么?)但可供屏幕阅读器使用。

2019 年 1 月 14 日更新

如果屏幕阅读器(无论是 OP 中要求的 VoiceOver,还是 JAWS 或 NVDA)不使用 更改语言aria-labelledby,则您必须将“隐藏”文本 ( class="sr-only")嵌入<button> 中,如下所示:

<button>
  <div class="sr-only">
    <span lang="en">email</span>
    <span lang="de">schreiben</span>
  </div>
</button>
Run Code Online (Sandbox Code Playgroud)

虽然我只是尝试了一个简单的例子,VO并没有改变语言。这听起来像是苹果的错误。我还尝试反转单词,以防 VO 正在查看第一个语言属性并将其用于整个按钮:

<button>
  <div class="sr-only">
    <span lang="de">schreiben</span>
    <span lang="en">email</span>
  </div>
</button>
Run Code Online (Sandbox Code Playgroud)

但结果是一样的。整个按钮都是用英文阅读的。

如果我把标签本身作为纯文本,

<div>
  <span lang="en">email</span>
  <span lang="de">schreiben</span>
</div>
Run Code Online (Sandbox Code Playgroud)

VO 正常工作并阅读英语的第一个单词和德语的第二个单词。