Установить язык ввода HTML - PullRequest
Новая
       13

Установить язык ввода HTML

0 голосов
/ 06 февраля 2019

В настоящее время я разрабатываю приложение, которое обрабатывает переводы.В прототипе приложение может обрабатывать переводы с английского на немецкий.

В настоящее время у меня есть <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>

Когда вы переходите на "Английский перевод "textarea через клавиатуру, программа чтения с экрана будет читать вслух текст атрибута textarea value на английском языке.Это имеет смысл - атрибут lang тега <html> установлен на "en" - и является предполагаемой функциональностью.

Но, когда вы переходите к текстовой области "Немецкий перевод", программа чтения с экранаснова произносит содержание атрибута textarea value на английском языке - произношение, которое часто сильно отличается от правильного немецкого произношения.В идеале, произношение должно быть на немецком языке.

Я хотел бы добавить атрибут, чтобы программа чтения с экрана знала, что содержимое второй текстовой области является немецким.Я пытался использовать атрибут lang="de", но это не повлияло на произношение.

Есть ли способ добиться этого?

Ответы [ 3 ]

0 голосов
/ 06 февраля 2019

Вы делаете это правильно, но если у вас нет разных языков, установленных с вашей программой чтения с экрана, вы можете не услышать разницу.Вы не упомянули, какую программу чтения с экрана вы используете.

С VoiceOver, по крайней мере на iOS, я думаю, вы получаете большинство языков по умолчанию.Я не уверен насчет VoiceOver на Mac.С NVDA и JAWS я уверен, что вам нужно установить языковые пакеты.

Следующие все автоматически переключают языки.Он работал с VoiceOver на iOS. 

<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> в качестве братьев и сестер, то я мог бы иметь *Контейнер 1027 * с установленным языком. 

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

(Обратите внимание, что во всех моих примерах я всегда указываю атрибут for в <label> - , явно ассоциирует метку ссоответствующий <textarea>, даже если текстовая область вложена в метку. Существуют некоторые комбинации программы чтения с экрана и браузера, где даже если текстовая область вложена в метку ( неявная метка), метканеправильно связано с текстовой областью. Я всегда осторожно говорю и задаю for.)

0 голосов
/ 11 февраля 2019

Программы чтения с экрана не угадывают или не определяют язык строки автоматически, но им необходим атрибут lang HTML для использования соответствующего механизма синтеза речи или таблицы Брайля (или обоих).(Я никогда не видел поддержку средства чтения с экрана для атрибута xml:lang XHTML, который упоминается в одном из других ответов.) Атрибут lang можно использовать с любым элементом, включая элементы формы и их метки.

Например, вы можете использовать следующий код в документе, где 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 помечает элемент формы и не требует метки для себя.
  • Вы можете обернуть метку вокруг элемента формы, но использование его в качестве родственного элемента должно дать вам больше контроля над размещением (например,следующий или выше текстовой области) с помощью CSS.
  • JAWS, по-видимому, "обеспечивает переключение языков с помощью любого поддерживаемого синтезатора речи" (см. Языки с JAWS и MAGic в Интернете ).Это не всегда было так;было время, когда автоматическое переключение языков работало только между механизмами синтеза речи одной и той же марки (и не всех марок).
  • В NVDA автоматическое переключение языков должно работать с Vocalizer для NVDA ис версией Eloquence, которая поддерживает переключение языков .
  • Многие пользователи программ чтения с экрана привыкли слушать тексты на иностранных языках, произносимые синтезатором речи для их родного языка.
  • Переключение языков влияет не только на синтез речи, но и на таблицу Брайля, которая загружается для дисплея Брайля.Поскольку коды Брайля для пунктуации различаются в зависимости от языка, автоматическое переключение языков не обязательно является преимуществом для пользователей дисплея Брайля.
0 голосов
/ 06 февраля 2019

Использование атрибута lang (и xml:lang в XHTML) является правильным способом.

Однако не все программы чтения с экрана поддерживают lang, а для тех, кто его поддерживает, не обязательно всеподдерживаются языки.

Если программа чтения с экрана заявляет о ее поддержке, но она все еще не работает, вы можете попробовать добавить контейнер div с атрибутом lang (просто сделайте здесь дикое предположение, возможно, программа чтения с экрана имеет проблемы, если она указана только для элемента textarea.

(Обратите внимание, что placeholder для немецкого textarea также должен быть на немецком языке.)

...