Localization - Get 'A' Certified

Accessibility and Localization

Accessibility means that anyone in the world can access and use your application. This, of course, includes people who understand languages other than English. We do this through localization, the process of converting your app content to the local language.

Services like Google Translate can translate your page easily for your users, but what can you do to ensure that your page is translated?  

HTML and localization

Use the lang attribute.
Put it on your top level tag, the html tag.  This way, all of its children will inherit the language as well.  


You may want to have more than one language in your application content.
For example, if your webpage teaches Chinese to its users you might have something like:



The lang attribute above would only apply to the span and its children tags, if it had any.

A Little Warning

You might have thought that the top level tag to place the lang attribute would be the DOCTYPE tag.

Eg.

And in fact, there is an attribute that indicates language on this tag.  But this is the schema language, and not the language of your content, so be careful not to mix the two up. You still need to use the lang attribute.

Language Direction

Some languages like Arabic, Farsi and Hebrew write their text from right to left. Setting the lang attribute in this case is not enough to ensure that the content will be understandable.

Use the dir attribute (dir stands for direction) to make the text be rendered from right-to-left.

You can also set the font in CSS to help with readability:



This way, if your application detects that the language being using is Arabic, it will choose Traditional Arabic as the font family. If the user’s browser doesn’t have that font, it tries “Al Bayan” and then finally “serif”

How it’s implemented at BigBlueButton

At BBB we have a JSON file that holds all the strings that are shown/read or otherwise presented to the user (eg. presented with an accessible device like a braille display).  

All of these strings have the ability to be translated to different languages.  We ask the open source community to help us translate these strings in all the languages of the world, and some of languages have complete translation at this point whereas some others don’t.  

To tie it all together, we use a react component called FormattedMessage. FormattedMessage has a few attributes:

1. Id: this id matches the key in the JSON file containing this same string
2. defaultMessage: The string in English (to default to in case there is no translation made for that string yet by our community)
3. description: A description of what the string is for, so that other developers working on the code can identify its use

References:

https://www.w3.org/International/questions/qa-html-language-declarations
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H57