a11yTips

Accessibility Guide for Internationalization

Mar 28 2020

Different Globes

If you are working on a web project which is going to be used in different countries and languages then you need to understand that accessibility plays a big role in that too.

Apart from semantic code, content, color-contrast, there are a few other things to take care of making sure your 'localized' website is accessible to your users.

lang attribute

The first and most important thing to do is to update lang attribute in your HTML page as per the language you will be using.

<html lang="en">

Dates

Most of the country has a different date format. Eg, India has DD MM YY whereas USA has MM DD YY. When working on i18n make sure that you are changing the date as per the country's preferred format.

Eg: For USA 03/03/2020 means March 3rd 2020 but for Indian, it is 3rd March 2020 and for China, Korea the date format is 2020/03/28

Phone number

Same as dates, phone number formats also differ from country to country. Make sure that as per the country the format of the phone number is also changing.

Eg: For India we have +91-0XXXXXXXXXX but for USA they follow XXX-XXXX-XXXX

Time Zone

Time zones are very important. Make sure all the time-related content is getting converted as per the country's TZ or provide a way to user select the timezone.

Currency

If you are an e-commerce website or site dealing in the money. Do make sure you are converting the amount to the country's currency or a way to change the currency.

RTL and LTR

When moving from RTL to LTR the whole experience gets changed. So, make all the assets are also changing accordingly.

Graphics

If the graphics hold the content then make sure those graphics are getting translated to all languages you will be supporting.

alt and ARIA

Just like Graphics, alt and ARIA tags should also get converted to the respective languages.

What to take care in CSS

CSS is very powerful. A lot can happen through CSS. This is also risky wrt to accessibility. For i18n make sure that there is no fixed width and height of the elements. Content should not be the part of the CSS and if it then does make sure it is getting converted.

Happy Learning!!

Photo by João Silas on Unsplash

Go to Next Article