设置 HTML 输入的语言答案

【问题标题】：Set the language of an HTML input设置 HTML 输入的语言
【发布时间】：2019-02-06 09:21:32
【问题描述】：

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

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

<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 的英文属性内容。这是有道理的 - <html> 标签的 lang 属性设置为“en” - 并且是预期的功能。

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

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

有没有办法做到这一点？

【问题讨论】：

标签： html internationalization accessibility markup

【解决方案1】：

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

例如，您可以在文档中使用以下代码，其中 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>

其他几个cmets：

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

【讨论】：

【解决方案2】：

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

不过，并非所有屏幕阅读器都支持lang，而且对于那些支持它的人来说，不一定支持所有语言。

如果屏幕阅读器声称支持它，但它仍然不起作用，您可以尝试添加一个带有lang 属性的div 容器（这里只是猜测一下，也许屏幕阅读器有问题仅在 textarea 元素上指定时）。

（注意德语textarea的placeholder也应该是德语。）

【讨论】：

【解决方案3】：

您的操作方式正确，但除非您在屏幕阅读器中安装了不同的语言，否则您可能听不出差异。您没有提及您使用的是哪个屏幕阅读器。

使用 VoiceOver，至少在 iOS 上，我认为您可以默认使用大多数语言。我不确定 Mac 上的 VoiceOver。使用NVDA 和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>，因为它是 textarea 接收焦点。但是，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> 关联起来，即使 textarea 嵌套在其中标签。在屏幕阅读器和浏览器的某些组合中，即使 textarea 嵌套在标签中（implicit 标签），标签也没有与 textarea 正确关联。我总是小心翼翼并指定for。）

【讨论】：