如何为输入字段的标签元素添加属性 lang="en"？

Question

我有一个德语 Vaadin 网站。属性 lang="de" 设置在 html 元素上。一些技术术语是英文单词。出于网络可访问性的原因，我必须将属性 lang="en" 添加到带有英语术语的元素中。这使得屏幕阅读器可以用正确的英语读出它们，从而提高了可理解性。

像 TextField 这样的 Vaadin 输入字段只有 setLabel(String label)。关于标签没有其他方法。并且标签元素本身并不（容易）访问。

无法将属性 lang="en" 设置为 TextField。这将使屏幕阅读器以英语读出 TextField 的所有元素。但输入、帮助文本、错误消息和所需指示符应以德语阅读。

在 Vaadin 博客上，我发现了提高可访问性的基本技巧。有一些在 inputElement 上设置 aria-label 的代码：

// Use placeholders with a label or aria-label
TextField search = new TextField();
search.setPlaceholder(“Search”);

textfield.getElement().executeJs(
  "this.inputElement.setAttribute(
    'aria-label', ‘Search'
)");

textfield.getElement().executeJs(
  "this.inputElement.removeAttribute(
    'aria-labelledby'
)");

（我知道文本字段从未定义。应该是搜索。哦，你不能像这样在多行上有一个字符串。并且有不同的引号。复制此内容不变。）

该代码给了我一个想法，如何向标签添加属性：

// Set lang="en" on label
TextField myTextfield = new TextField();
myTextfield.setLabel(“AD Identifier”);

myTextfield.getElement().executeJs(
    "this.labelElement.setAttribute('lang', 'en')"
    );

但这行不通。 JS 找不到 labelElement:

JS代码出现错误：'$0, return (function() { this.labelElement.setAttribute('lang', 'en')}).apply($0)'

这是在 Vaadin 输入组件的标签元素上设置属性的方法吗？ 这保证可以在未来的 Vaadin 版本中使用吗？

Answer 1

通过 aria-label 设置的标签的语言不能与输入元素不同。

如果您需要为标签指定不同的语言，那么您可以选择使用

<label>

元素，还是使用 aria-labelledby 引用的其他元素。

<label>

元素更好，因为您可以避免在不必要的地方使用 ARIA（ARIA 的第一条规则），并且您可以免费获得一些非常方便的功能，例如单击标签即可将焦点集中到领域。

这给出了以下 HTML 代码：

<label for="field" lang="en">English label</label>
<input type="text" id="field" lang="de" value="Wert auf Deutsch"/>

或者：

<span id="label" lang="en">English label</span>
<input type="text" aria-labelledby="label" lang="de" value="Wert auf Deutsch"/>