Lang attribute
Lang with language code and country code
What screenreader will use which voice when using the country code in your HTML? This is work in progress. More results will follow. Also your input is welcome.
Results
The test set was used for these results:
- VoiceOver with macOS does not deal with the country code. When both a Dutch and Belgian voice is installed only one of those voices is used. Apparantly the preferred voice.
- VoiceOver with iOS does change voices between Netherlands (Dutch) and Belgium (Flemish).
- JAWS - work in progress
- NVDA - default settings uses the computer voice and there is an option to switch change in dialects on. This setting is off by default. Text is read both in Dutch and in English. For 1 computer NVDA read the text marked with "en-US" with the Dutch computer voice.
- Narrator - with the Dutch Narrator, 'Verteller' on a Windows machine all texts are read in Dutch. The lang attributes on the li elements are seen by Narrator, for 'en-GB' it reads "E N Verenigd Koninkrijk" in Chrome. In Firefox however only the next line is read at the start as "E N Verenigde Staten". So browser and lang attribute matters.
- Talkback - uses 1 voice for English and 1 voice for Dutch
Thanks to Gijs Veyfeyken for his input.
Any thoughts or other results? Your input is appreciated.
Test set
- nl: Deze alinea is in het Nederlands waarbij het lang-attribuut is gezet op "nl".
- nl-NL: Deze alinea is in het Nederlands waarbij het lang-attribuut is gezet op "nl-NL". Wist je dat "Vijgen na Pasen" hetzelfde betekent als "Mosterd na de maaltijd"?
- nl-BE: Deze alinea is in het Nederlands waarbij het lang-attribuut is gezet op "nl-BE". Wist je dat "Vijgen na Pasen" hetzelfde betekent als "Mosterd na de maaltijd"?
- en: This paragraph is in English. The lang attribute is set to "en".
- en-GB: This paragraph is in English. The lang attribute is set to "en-GB". Do you know the difference between vacation and holiday?
- en-US: This paragraph is in English. The lang attribute is set to "en-US". Do you know the difference between vacation and holiday?
Language code vs country code
I stumbled upon Belarusian using 'be', where I thought that 'BE' always stood for Belgium, except for their cars. These are marked with B on a blue backrground on their license plates. And than there is football where Belgium mostly is shortened to 'BEL'.
| Country | Language | Two Letter | Three Letter | Number |
|---|---|---|---|---|
| Belarus | Belarusian | be-BY | be-BLR | |
| Belarus | Russian | ru-BY | ru-BLR | |
| Belgium | Dutch (Flemish) | nl-BE | nl-BEL | |
| Belgium | English | en-BE | en-BEL | |
| Belgium | French (Walloon?) | fr-BE | fr-BEL | |
| Belgium | German | de-BE | de-BEL | 4096 |
Show lang-code bookmarklet
Sometimes it's hard to find out where a lang-attribute is set and which language it is set. If you are checking on success criterion 3.1.1 Language of Page or success criterion 3.1.2 Language of Parts this bookmarklet will visually help you.
Bookmarklet
The bookmarklet shows every lang-setting on the page.
Save the following link in your bookmarks/favorites: Check lang.
The bookmarklet injects some CSS. This CSS code looks like this:
[lang] {
outline:2px solid yellow
}
[lang]::before {
content:attr(lang);
display:block;
position:absolute;
color:black;
background:yellow;
}
Test language with screenreaders
- Install files with voices of different languages you want to work with.
- VoiceOver will recognize the code and automatically change langauge.
- NVDA needs some settings:
- Automatic Language switching: checked
- Automatic Dialect switching: checked
- Select the Text-To-Speech synth that is able to switch.
Resources
- Reused the bookmarklet text spacing bookmarklet of TPGi
- CSS code - some hero's code - I have Googled where I got it from but couldn't find it. Let me know if this is your work.
