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”-并且是预期的功能。

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

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

有没有办法做到这一点？

Answer 1

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

但是，并非所有的屏幕阅读器都支持lang，对于那些支持它的用户来说，不一定支持所有的语言。

如果屏幕阅读器声称支持该功能，但仍然无法正常工作，则可以尝试添加一个具有div属性的lang容器（只是在这里大胆猜测，也许仅在textarea元素上指定的屏幕阅读器会出现问题。

（请注意，德语placeholder的{{1}}也应使用德语。）

Answer 2

您正在按照正确的方式进行操作，但是除非屏幕阅读器安装了其他语言，否则您可能不会听到任何区别。您没有提到正在使用哪个屏幕阅读器。

借助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>上，因为它是获得焦点的文本区域。但是，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>

（请注意，在我所有的示例中，我总是在for上指定<label>属性，以明确将标签与其各自的<textarea>关联，甚至如果文本区域嵌套在标签内，则屏幕阅读器和浏览器会有一些组合，即使文本区域嵌套在标签（隐式标签）中，标签也无法与文本区域正确关联。我总是放心，并指定for。）

Answer 3

屏幕阅读器不会猜测或自动检测字符串的语言，但需要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>

其他一些评论：

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

设置HTML输入的语言

3 个答案: