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

时间:2019-01-10 08:19:46

标签: html5 wai-aria

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

类似

<button aria-label="(lang=en:E-Mail) schreiben">

1 个答案:

答案 0 :(得分:1)

对于有关remark.js中单个单词的特定问题,答案是否定的。

但是,如果您使用aria-labelledby将标签指向另一个元素(或其他几个元素),则可以将单词分割开,并在需要的任何单词上使用aria-label属性。 / p>

lang

在视觉上是隐藏的(有关“仅sr”类的信息,请参见What is sr-only in Bootstrap 3?),但屏幕阅读器可用。

更新2019年1月14日

如果屏幕阅读器(无论是OP中要求的VoiceOver,还是JAWS或NVDA)都没有使用<div class="sr-only" id="mylabel"> <span lang="en">email</span> <span lang="de">schreiben</span> </div> <button aria-labelledby="mylabel"></button> 更改语言,则您必须嵌入“隐藏”文本({{1 }}),如下所示:

aria-labelledby

尽管我只是尝试了一个简单的示例,但VO并没有更改语言。听起来像是苹果的虫子。如果VO正在查看第一个语言属性并将其用于整个按钮,我还尝试过反转单词:

class="sr-only"

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

如果我将标签本身设置为纯文本,则

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

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