accessibilityscreen-readersnvda

Screen reader isn't reading Korean and Russian

I am working on an angular application, that has localisation implemented, it has a drop down that helps user select languages, NVDA the screen reader only reads english, Spanish( Espanol )... but doesn't read Korean nor Russian which is written in there native language, please Advise

NVDA identifies, reads english, Spanish without adding the aria-label tag even after adding the tag it doesn't work for Korean and Russian

Solution

  • The problem you are having is two fold, the first is that your HTML does not identify the languages as they change, the second is a possible unfamiliarity with the usage of a screen reader.

    Adding the lang attribute

    To fix the first problem of identifying the language of a particular section is straight forward, we use the HTML lang attribute.

    You will probably have used this on a whole document but you can use it on any sectional / flow content element such as a <div>, <p> etc. to signal to screen readers and assistive technology that the language has changed.

    In certain screen readers this will then automatically switch to that language pack (if installed on the client computer).

    There is a list of the ISO language codes here that you can use.

    Example HTML for the lang attribute in a list

    <ul>
  <li>
      <a lang='en'>English</a>
  </li>
  <li>
      <a lang='ko'>한국어</a>
  </li>
  <li>
      <a lang='ru'>русский</a>
  </li>
</ul>

    aside - please be aware that an anchor (<a>) should only be used if navigation takes place and should have a valid href attribute (not href="#"), this would probably be better as a <select>.

    Screen reader usage

    Even with the above mark-up you may still have issues if the client screen reader does not support the given language.

    In some screen readers this can be fixed by installing the relevant language packs on the OS.

    For Windows it is "Settings" -> "Time & Language" -> "Language" -> "Add Language"

    On other screen readers it is the actual synthesizer that needs to be changed.

    In your case NVDA needs to use the "eSpeak NG" synthesizer for it to identify different languages correctly. (other synthesizers may work but I am unfamiliar with them, the default "Windows Speech API version 5" synthesizer does not switch languages automatically (it does for whole documents in a language if the language pack is installed, not for document fragments though))

    To change the synthesizer "Windows Speech API version 5" to "eSpeak NG" you right click on the NVDA icon in the toolbar and go to "Preferences" -> "Synthesizer..." -> change the "synthesizer" drop down and press "ok".

    If you update the synthesizer and update your HTML to use the lang attribute (not the link attribute as you kept putting in your example fiddles) a screen reader will identify the languages correctly.

    My Advice

    Despite all of the above being a valid solve for your problem I would recommend that if your page language is English then all options are in English.

    Then if someone chooses another language (Korean) you can then present all the options in that language (Korean).

    Although this may seem like it would be less accessible most browsers offer an "auto translate" feature that will translate the menu correctly if it is all one language (make sure to declare the correct language for the page (<html lang="en">) as this is important).

    It also means that screen reader users don't need to know how to change their synthesizer etc.

    Finally it saves you having to add lang attributes to the list of options, making your markup cleaner.

    This is my personal advice not official guidance