gpt4 book ai didi

html - 设置 HTML 输入的语言

转载 作者:太空宇宙 更新时间:2023-11-04 13:58:32 24 4
gpt4 key购买 nike

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

目前,我有 <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"属性,但不影响发音。

有什么办法可以实现吗?

最佳答案

屏幕阅读器不会猜测或自动检测字符串的语言,但需要 HTML 的 lang 属性才能使用适当的语音合成引擎或盲文表(或两者)。 (我从未见过屏幕阅读器支持其他答案之一中提到的 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-labellabel 元素标记一个表单元素,它自己不需要标签。
  • 您可以将标签包裹在表单元素周围,但将其用作同级元素应该可以让您通过 CSS 更好地控制放置(例如,在文本区域旁边或上方)。
  • JAWS 似乎“通过任何受支持的语音合成器提供语言切换”(参见 Languages with JAWS and MAGic on the Internet)。情况并非总是如此。曾经有一段时间,自动语言切换只在同一品牌(而不是每个品牌)的语音合成引擎之间起作用。
  • 在 NVDA 中,自动语言切换应该与 Vocalizer for NVDA 一起使用并带有 version of Eloquence that supports language switching .
  • 许多屏幕阅读器用户习惯于收听语音合成器为他们的母语朗读的外语文本。
  • 语言切换不仅会影响语音合成,还会影响为盲文显示器加载的盲文表。由于盲文标点符号代码因语言而异,因此自动语言切换不一定对盲文显示器用户有利。

关于html - 设置 HTML 输入的语言,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54550172/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com