设置 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>

当通过键盘导航到"English translation"文本区域时，屏幕reader会用英文朗读文本区域value属性内容。这是有道理的 - <html> 标签的 lang 属性设置为 "en" - 并且是预期的功能。

但是，当导航到 "German translation" 文本区域时，屏幕 reader 再次用英语发音文本区域 value 属性内容 - 这种发音通常与正确的发音大不相同德语发音。理想情况下，发音应该是德语。

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

有办法实现吗？

Answer 1

使用 lang 属性（以及 XHTML 中的 xml:lang）是正确的方法。

并非所有屏幕 reader 都支持 lang，但是，对于那些支持它的屏幕，不一定支持所有语言。

如果屏幕 reader 声称支持它，但它仍然不起作用，您可以尝试添加一个具有 lang 属性的 div 容器（只需取一个大胆猜测，当屏幕 reader 仅在 textarea 元素上指定时可能会出现问题。

(注意德语textarea的placeholder也应该是德语。)

Answer 2

你的做法是正确的，但除非你的屏幕安装了不同的语言 reader，否则你可能听不出有什么不同。您没有提到您使用的是哪个屏幕 reader。

使用 VoiceOver，至少在 iOS 上，我认为默认情况下您可以使用大多数语言。我不确定 Mac 上的 VoiceOver。使用 NVDA and JAWS，我很确定你必须安装语言包。

以下都是自动切换语言。它在 iOS.

上与 VoiceOver 配合使用

<label for="eninput">this is in english</label>
<textarea id="eninput"></textarea><br>

<label for="deinput">das ist in deutsch</label>
<textarea id="deinput" lang="de"></textarea><br>

<label for="frinput">c'est en français</label>
<textarea id="frinput" lang="fr"></textarea><br>

<label for="ruinput">это по-французски</label>
<textarea id="ruinput" lang="ru"></textarea><br>

请注意，lang 属性在 <textarea> 而不是 <label> 上，因为它是接收焦点的文本区域。但是，VoiceOver 有一些细微差别。如果我使用正常的向右滑动手势在字段中导航，焦点会从一个字段移动到另一个字段，并且我会听到语言切换的声音。但是如果我直接点击标签并将焦点放在它上面，那么标签本身就是英文的，因为 <label> 没有 lang 属性。

在您的情况下，您将 <label> 作为容器，因此如果语言在容器上，那么容器中的所有内容也将具有该语言。所以以下也有效：

<label for="frinput" lang="fr">c'est en français
  <textarea id="frinput"></textarea><br>
</label>

当焦点移动到该字段时，将以法语阅读。如果我有意点击标签本身，它也会以法语阅读。

如果我想让我的第一个代码示例工作，让 <label> 和 <textarea> 成为兄弟姐妹，那么我可以有一个带有语言集的 <div> 容器。

<div lang="fr">
  <label for="frinput">c'est en français</label>
  <textarea id="frinput"></textarea><br>
</div>

（请注意，在我的所有示例中，我始终将 <label> 上的 for 属性指定为显式将标签与其相应的 <textarea>，即使文本区域嵌套在标签内。有一些屏幕 reader 和浏览器的组合，即使文本区域嵌套在标签中（隐式标签），标签没有正确地与文本区域相关联。我总是谨慎行事并指定 for。）

Answer 3

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

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

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

其他一些评论：

label 个元素不需要 aria-label； label 元素标记一个表单元素，它自己不需要标签。
您可以将标签包裹在表单元素周围，但将其用作同级元素应该可以让您通过 CSS.[=35= 更好地控制放置（例如，在文本区域的旁边或上方） ]
JAWS 似乎 "provide language switching with any supported speech synthesizer"（参见 Languages with JAWS and MAGic on the Internet）。情况并非总是如此。曾经有一段时间，自动语言切换只在同一品牌（而不是每个品牌）的语音合成引擎之间起作用。
在 NVDA 中，自动语言切换应该适用于 Vocalizer for NVDA and with a version of Eloquence that supports language switching。
许多屏幕 reader 用户习惯于收听语音合成器为他们的母语朗读的外语文本。
语言切换不仅会影响语音合成，还会影响为盲文显示器加载的盲文table。由于盲文标点符号代码因语言而异，因此自动语言切换对于盲文显示器用户来说不一定是优势。

设置 HTML 输入的语言

Set the language of an HTML input

html

internationalization

accessibility

markup