Businesses that operate in multiple regions, their target audience differs in many ways and one of the profound aspects is language.
To reach distinct audiences and cater to their expected experiences, websites must talk to them in their local dialect. This is the reason why organizations have started making multiple-language websites.
These websites offer users to explore the information in their preferred language. However, there is no chance of skipping accessibility. Just like other important facets of website creation such as platform, domain name, hosting, and type of website, multiple language website accessibility is also among those facets that no organization is supposed to evade.
Let’s see how to make an accessible multiple-language website.
Importance of Multiple Language Website Accessibility
English is one of the de-facto languages for website creation across the world. But there are users who don’t know English and can only understand some specific language. And if such users rely on screen readers to explore your website, what will happen if their screen readers read the content in English? You can also check our full article on screen reader accessibility.
Thus, website language should be comprehensive for everyone and their assistive technologies as well.
WCAG Standards for Multiple Language Website Accessibility
Web content accessibility guidelines (WCAG) have defined rules for multiple-language websites in order to help them achieve accessibility. It says the language used on each page of a website including phrases must be programmatically accessible by assistive software such as screen readers.
It means the HTML code of the website must specify the language attribute to make it comprehensive for assistive tools. For example, if a page is written in English, its HTML will look like this-
<html lang = “en”>
And if the web page has some phrases written in another language let’s say French, that phrase should have proper language attributes.
<phrase lang = “fr”>
WCAG’s conformance level AAA also has some additional criteria to make accessible multiple language websites, such as:
- There should be some way to understand unfamiliar words like jargon, idioms, and abbreviations.
- A simpler text summary with illustrations is recommended to make complex content easy to understand for users with cognitive disorders.
- Word’s context must be clear in a sentence to understand its exact perception. For example, if a word is pronounced the same in both past and present tense, the website must identify the correct pronunciation of the word in a specific sentence.
YOU MAY ALSO LIKE: WCAG AA VS AAA
Building an Accessible Multiple-Language Website
Language coding
As mentioned above, the very first thing a website should focus on, correcting each page code so that language gets identified in the code of the page. Assistive technologies like screen readers, Braille devices, etc. can’t understand the language of the website by reading texts. Instead, they read the code and then identify which language is there on the web page.
As soon as these tools recognize the language, the software adjusts its speaking pace, pitch, and accent as per the language. Now, there are modern screen readers available for example Jaws and Window Eyes. These screen readers can speak multiple languages with precise pronunciation.
Set the language code as shown above by setting the ‘lang’ attribute.
If you forget to provide the primary language code, there are chances that screen readers will start reading the content in its default set language. For example, if screen readers’ default language is English and content is also written in English, then it will be not an issue for the user.
However, if you provide the wrong language code, for instance, if the web page is written in English and you’ve set the ‘lang’ attribute as French, it will be a problem. Because screen readers will read English content in French and users will not be able to understand anything.
Moreover, if your website content is written in multiple languages, according to Web Content Accessibility Guidelines, the human language of every passage and phrase in the written content should be programmatically determined other than proper names, technical terms, words of indeterminate language, and words that have become part of the language of that specific region.
Set the phrases or words that are different from the primary language by setting the ‘lang’ attribute for them as well.
Language direction
It is one of the important facets of multiple-language websites. If your website has language written from right to left instead of left to right, make sure to specify the direction of the text in the code of the page. For this purpose, you need to set the ‘dir’ attribute in the HTML part of your website.
Languages like Urdu, Persian, and Arabic are being written from the right-to-left (rtl) direction. So, set the ‘dir’ attribute for these languages:
<html dir=”rtl”>
Please note, the ‘dir’ attribute is not needed to specify for left-to-right languages (for example, English) since it is the default text direction.
RTL language pages require to have different layouts because they are supposed to be aligned right side and not on the left side. It implies that the page layout must be adapted for rtl languages.
Example – The United Nations website is created in such a way that its layout has adapted to the Arabic language for the whole setting in right-to-left and the website’s English version has an exactly reversed layout.
Links
There are chances that your website and some of the external links have different languages. In that case, you need to provide proper information for assistive technologies so that users who will use these tools, will be able to peruse those links as well.
This can be done by using the ‘hreflang’ attribute. This attribute helps you to let screen readers know the primary language and language of the links on the page. And then, screen readers pass on the same information to the users who are using those web pages.
Font sizes
Different language needs distinct font sizes. Users cannot read every language font in the same size. For example, Chinese, Arabic, and Japanese are a little difficult to read in the same font size as English, French, and German languages. So, web pages are expected to have font size according to the language they have content in.
To achieve this, either set CSS ‘lang’ pseudo-class for different font sizes or make changes in the HTML code to specify which language and font size is used on the page.
Language recognition by Google
Assistive technologies understand the code; however, Google doesn’t recognize the language code. Google uses its own technology to read the language of the web page. Thus, it has been suggested by Google not to use more than one language per page.
Words’ length
Every language has its own essence and length of words. A sentence can be written in lesser space in some languages, whereas the same sentence might take more space in other languages. Thus, a multiple-language website must have a design that can cater to every language with a similar presentation.
For example, Amazon made its website design flexible for each language. The word ‘search’ has 5 characters in English, but it takes up to 10 characters in French. Similarly, ‘basket’ has 6 characters in English, and in German, it goes up to 13 characters. Amazon put elements wisely in its website’s design, they’ve removed the wish list button from the search bar for languages with longer words like Italian and German.
Though it may not be possible in every case. Thus, to overcome such issues, you can use words those are shorter with similar meanings. Also, make sure the content is translated properly before you make changes to the design.
Encoding characters
Website content has many characters (collection of letters and symbols) that must be comprehensive for screen readers. So, character encoding helps to decipher these letters and symbols. Ensure to use the right character encoding because there are myriad characters you use in your content and wrong encoding will confuse assistive technologies.
Most organizations use ‘Unicode’ for character encoding. It contains maximum characters for several languages, scripts and mostly all operating systems support it as well. And thus, it is a good choice to use Unicode to encode multiple languages and scripts for multi-lingual websites.
Wrapping up
Building multiple language websites isn’t an easy job. Like other facets of the website, focusing on each language translation and ensuring that the website is accessible in every language is what an organization is expected to do.
If there is any confusion, hiring a web development agency is a good choice to have an accessible multiple-language website.
As an associate member of International Association of Accessibility Professionals (IAAP), Skynet Technologies is a part of Global accessibility community. We are also an official member of W3C.
Skynet Technologies is a one-stop solution to build an accessible multi-language for UI/UX web design, ADA web accessibility services, and digital marketing services under one roof. Create an accessible multiple language website and grow your business globally. We have also developed an All In One Accessibility PRO widget which will make your website compliance up to 40% and available in multiple language. Fill out the form below to request a free quote or send mail at [email protected] for more information.
