设置 HTML 输入的语言

Question

我目前正在开发一个处理翻译的应用程序。在原型中，该应用程序可以处理从英语到德语的翻译。

目前，我的<textarea>元素被元素包围<label>：

<label className="m-translation-card__native-field-label" 
       aria-label="Original (English)">
    English

    <textarea className="m-translation-card__native-field-input"
              placeholder="English translation"
              onChange="..." 
              value="..."
    />
</label>

<label className="m-translation-card__translated-field-label"
       aria-label="Translation (Deutsch)">
    Deutsch

    <textarea className="m-translation-card__translated-field-input"
              placeholder="German translation"
              onChange="..."
              value="..."                            
    />
</label>

当通过键盘导航到“英文翻译”文本区域时，屏幕阅读器将以value英文大声朗读文本区域属性内容。这是有道理的 -标签lang的属性<html>设置为“en” - 并且是预期的功能。

但是，当导航到“德语翻译”文本区域时，屏幕阅读器会再次用value英语发音文本区域属性内容 - 这种发音通常与正确的德语发音有很大不同。理想情况下，发音是德语。

我想添加一个属性，以便屏幕阅读器知道第二个文本区域的内容是德语。我尝试过使用该lang="de"属性，但它并没有影响发音。

有办法实现这一点吗？

Answer 1

屏幕阅读器不会猜测或自动检测字符串的语言，但需要 HTML 的lang属性才能使用适当的语音合成引擎或盲文表（或两者）。（我从未见过屏幕阅读器支持xml:lang其他答案之一中提到的 XHTML 属性。）该lang属性可用于任何元素，包括表单元素及其标签。

例如，您可以在lang="en"已在祖先元素上设置 的文档中使用以下代码，例如html：

 <label className="m-translation-card__native-field-label" for="english-translation">English </label>
 <textarea id="english-translation" className="m-translation-card__native-field-input"></textarea>

 <label className="m-translation-card__native-field-label" for="german-translation">German </label>
 <textarea id="german-translation" className="m-translation-card__native-field-input" lang="de"></textarea>

其他一些评论：

• 你不需要aria-label元素label；元素label标记表单元素，并且自身不需要标签。
• 您可以将标签包裹在表单元素周围，但将其用作同级元素应该可以让您通过 CSS 更好地控制放置（例如，在文本区域的旁边或上方）。
• JAWS 似乎“通过任何受支持的语音合成器提供语言切换”（请参阅​​ Internet 上的使用 JAWS 和 MAGic 的语言）。但情况并非总是如此。曾经有一段时间，自动语言切换只能在同一品牌（而不是每个品牌）的语音合成引擎之间起作用。
• 在 NVDA 中，自动语言切换应与Vocalizer for NVDA以及支持语言切换的 Eloquence 版本配合使用。
• 许多屏幕阅读器用户习惯于听语音合成器为其母语朗读的外语文本。
• 语言切换不仅会影响语音合成，还会影响为盲文显示器加载的盲文表。由于不同语言的标点符号盲文代码有所不同，因此自动语言切换对于盲文显示器用户来说不一定是一个优势。