时间戳

首页 > 解决方案 > 设置 HTML 输入的语言

html - 设置 HTML 输入的语言

问题描述

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

目前，我有<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用英语发音 textarea 属性内容——这种发音通常与正确的德语发音大不相同。理想情况下，发音应该是德语。

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

有没有办法做到这一点？

标签： htmlinternationalizationaccessibilitymarkup

解决方案

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

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

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

（请注意，placeholder德语的 thetextarea也应该是德语。）

推荐阅读