CODEWITHSUNDEEP
htmlmacosaccessibilityhtml-selectvoiceover
Swapnil Deo
Swapnil Deo

Reputation: 291

Voiceover having problem to pronounce non-english options from select dropdown

I am trying to implement Choose language drop-down in my web application, But it seems that content of option are not being pronounced by voice-over.

It echo's English language content properly, but as soon as non English option is selected from drop-down it is not echoing it.

Below is the html code

<label for="lang">Choose Language:</label>
  <select name="lang" id="lang">
    <option>English</option>
    <option>日本人</option>
    <option>русский</option>
    <option>中文</option>
  </select>

Please suggest,

Thanks

Upvotes: 2

Views: 995

Answers (1)

QuentinC
QuentinC

Reputation: 14882

First of all, add the lang attribute.

  <select name="lang" id="lang">
    <option lang="en">English</option>
    <option lang="ja">日本人</option>
    <option lang="ru">русский</option>
    <option lang="zh">中文</option>
  </select>

Using the lang attribute gives a chance to trigger automatic language switch, i.e. make the screen reader automatically select another speech synthesizer appropriate for the language indicated.

Then, don't be afraid. If your VoiceOver is unable to speak something written in another language, that's simply because you haven't installed any speech synthesizer for that language.

In the rewritten example above, you can be pretty confident that russians will hear русский correctly, if this text is correctly marked as being russian with the lang attribute, and if they have a russian speech synthesizer installed on their device. WE assume, of course, that it is naturally the case for a native russian person.

IF you are unsure, you can of course try yourself by installing an appropriate speech synthesizer on your device.

Addition following comments: it seems that VO doesn't take the lang attribute into account in an <option> element.

I suggest writing to [email protected]. That's a VO issue. VO should support the lang attribute in <option> elements. Nothing in the HTML5 spec forbids it, at least. The lang attribute is allowed in every elements that can include text.

However, The <option> element doesn't allow other elements inside it in the spec. Thus all solutions based on a .sr_only span + another aria-hidden span are invalid. So the lang attribute is the only correct valid way. It would be really sad to create a custom combobox just because of this issue.

You may be tempted to simplify / work around the problem by doing the following. Don't!

  <select name="lang" id="lang">
    <option>English</option>
    <option>Japanese</option>
    <option>Russian</option>
    <option>Chinese<option>
  </select>

The reason to not do this is quite simple: the chinese user landing on your english page may not know english at all, and in particular, don't know that "Chinese" is the right option to select. He/she's simply going to leave your site for ever, since anyway he/she doesn't understand anything. Always write the name of a language in the language itself, i.e. "english, français, español, deutsch" rather than "english, french, spanish, german".

Upvotes: 2

Related Questions