Part of making sure your website is accessible is making sure that someone can understand your website no matter what they’ve set their default language to — even if you aren’t specifically creating content in different languages. This overall concept is usually referred to as internationalization, which is often shortened to i18n because of the number of letters between the i and n.
There’s also localization, which is the process of making sure the content shown to different languages and cultures is specific to them, and usually happens after a website has been developed. Internationalization ensures a website is prepared for a browser to translate a website and for that localization process.
It’s not just that a site can be translated, but that it’s still usable when it’s translated. All the things we do to make sure people can understand and use our websites, like creating predictable user experiences, apply to a website whether it’s in the original language or translated to a different one.
Accessibility Requirements
There are two WCAG success criteria specifically related to internationalization:
- 3.1.1 Language of Page
- 3.1.2 Language of Parts
These are the most basic levels of configuration for your website that enable your visitors to access your content. Everything on your website will need to be displayed properly according to your platform’s documentation.
In WordPress internationalization, for example, there is a specific function for themes and plugins to display text to make sure it’s properly translated.
HTML & Content-Based Strategies
The lang Attribute
The main HTML tag of your page should define the language. For example: <html lang="en-US">. This helps with browsers that provide visitors the option to automatically translate content that’s in a different language. It also helps with screen reader pronunciation rules and braille display.
Unless it’s a commonly used word in the main language, any text in a different language should be wrapped in an element that has a lang attribute. This allows those assistive technologies to switch between the appropriate languages and voices at the right times. For example, rendezvous doesn’t need to be defined on an English website as French. But something like this would need the lang attribute: <h2 lang="es">Eres increíble</h2>.
Linking
If you’re linking to a document or website that’s in a different language, you can identify that with the hreflang attribute. And if you’re using a different language in the link text, you can combine hreflang and lang.
Forms
When you’re creating forms, it’s tempting to use fields and force formatting to make it easier to fill out. Unfortunately, most of these types of things end up making it harder or more confusing. This is especially true when it comes to internationalization.
Requiring a minimum or maximum character count or disallowing certain characters on a name field could end up making it impossible for someone to enter their name correctly.
And if you’re planning on catering to multiple countries, things like phone numbers and addresses have different formats and terminology depending on the country.
Text in Images
Aside from being much less accessible by default, text in an image is also not translatable by the browser. This includes SVGs as well. Depending on the browser and how an SVG is configured, it won’t be translated, especially if it’s being animated in some way.
Date Formatting
It’s important to be as clear as possible, so use the most understandable format as possible. Instead of m/d/y which can be confused for d/m/y, write out the month (which also makes it more easily translated).
Aria-Label
If you end up needing to use aria-label, you’ll need to take extra care, since it doesn’t always auto translate.
Design Strategies
Word Length and Line Breaks
Make sure your designs are flexible enough to accommodate different word lengths without breaking out of the container. This is important for things like card layouts where line length can be limited. It’s also relevant for things like navigation. You’ll want to test how different word lengths effect the layout of the page.
For languages that end up with shorter word lengths, setting a minimum width for buttons ensures the minimum size for clickable elements, but usually the minimum size is pretty small for a button. So instead of setting a minimum width of 44px, consider what looks best for your design.
When a button ends up with a longer word, you’ll want to make sure your buttons are designed to have words wrap properly.
Typography
Font family, font size, and line height are all relevant to internationalization. It’s important that your font choices include all the characters that will be needed to support any additional languages you’ll be using. Line height should accommodate accents and other types of characters. Some languages render fonts smaller than others, so minimum font size is also important.
Gradient Overlays
If your design uses a gradient over an image to make the text readable, make sure that gradient changes when the direction of the text changes. This could end up causing the main part of the image to be covered by the gradient, so keep this in mind when designing these types of elements.
Technical Strategies
Proper Spacing
The direction of languages change, which means elements on the page could end up in a different configuration from your original order. Using the correct type of margin and padding definitions will ensure that these shifts in layout keep the correct spacing around and between elements.
You’ll want to use logical instead of directional properties. For example, use text-align: end instead of text-align: right.
Final Considerations
If you plan on sharing your website with an audience that speaks more than one language, it’s going to be incredibly beneficial to manually translate your content rather than rely on the browser’s automatic translation. The same advice applies when you’re adding a language switcher to your site. If you relies on automatic translation, there are going to be errors and things will absolutely get lost in translation.
Our ultimate goal is to create a website that can be used under as many different circumstances as possible. We can’t predict what someone’s first language is. We’re trying not to throw up unintentional roadblocks, and internationalization is going to go a long way towards that.
