Creating inclusive and multilingual websites is complex but not without its benefits, especially to multilingual web users with disabilities. In Megan Jensen’s ‘kick off post’ on cultural inclusion she notes that “Undertaking a global multilingual website can be an intimidating and overwhelming project but it doesn’t have to be.”

We’ve outlined specific ways to deliver content to web users with or without disabilities, and to support their language of choice in ways they can understand. Here’s your get started guide.

Assuming is good. Knowing your web users is better!

Designing multilingual and inclusive web experiences takes “culturally-inclusive user research” says Jensen. Start by asking questions about people coming to your website. Where are they located? Which web pages do they engage with the most? What are their most frequent web transactions? Do they use the English version of the website instead of one in their native language? Why is that? And how frequently do they use translation apps? Do they only use a keyboard to navigate web pages? Are screen readers like VoiceOver for Apple iOS or Android’s Talkback used by a significant number of web users?

It’s worth noting that researcher bias comes into play here. My mantra is forget assumptions about the ideal web user who never encounters issues accessing online information. Every web user experiences barriers. They encounter words never heard before, jargon, acronyms and so on. Again, arm you and your team with target audience insights to ensure inclusive language experiences.

Keep it simple stupid “KISS”

For one, always consider the “understandability” of your multilingual and inclusive user experiences. Start by asking a series of questions. Does content appear in predictable ways across our websites? For example, if a link to the organization’s Site Map is in the home page Footer, this link should be in the Footer of all web pages.

And two, help web users by following familiar design patterns. This simplifies the learning curve, especially for web users with cognitive disabilities.

Appearance matters

How information appears on a web page influences web users’ ability to grasp information easily and accurately. Complicated user interactions and esoteric confusing language will waste users’ time. Note, I crossed out esoteric to make a point, “confusing” is a common term and easier to understand.

Text overlaid on images (a common design technique) makes it difficult to perceive and then act on information, especially when it’s not in your user’s preferred language. Take this example. In left-to-right languages (LTR) it is customary to visually position labels to the right of radio buttons and checkboxes, and to the left or directly above other form fields. Maintaining this practice increases predictability and understandability of your form for all web users​.

Designing page layouts for right-to-left (RTL) languages requires a different approach. “Spatial design changes are necessary when localizing for RTL languages (including navigation, visuals, general layout, etc.).”  For starters text alignment adjustments must be made. Apple’s best practice, “Align a paragraph based on its language, not on the current context.”

Also think about the font size and legibility of your default language. For low vision web users, legibility is critical. For instance, a legible font size in English, German, and French could be too small for Japanese and Arabic languages.

Getting into the code and “declaring” language

If most of your website users are native English speakers start by setting the language of the content for English. For example, the primary language of the page should agree with the human language of the page. On the other hand, if most of your target audiences speak French the primary language of the page would be French, to agree with the human language of the page. Comprendre?

There are times when a page has content in another language, so you add a language attribute to an element surrounding that content (see item #2 below). Also, identifying the language of your content (i.e., “lang” and sometimes “xml:lang”) prepares the web page to do a number of things such as change the look and behavior of a page. And include language information for a page at the start. It’s difficult to retrofit it as you develop content.

Three essential guidelines from the World Wide Web Consortium (W3C):

Use the html element (<html lang=”en”>) rather than the body element since the body element doesn’t cover the text inside the document’s head element.

Note: “en” is English.

When the page contains content in another language, add a language attribute to an element surrounding that content. This allows you to style or process it differently.

For example: <p>The title is “<span lang=”fr”>Le Bon Usage</span>”.

Use the lang attribute for pages served as HTML. For pages served as XML, including XHTML 1.x and HTML5 polyglot documents, see Choosing the right attribute.

If you’re designing for a global organization with several multilingual websites, provide links to the other language versions of your site.

And when a web user is accessing your English language site with a screen reader, give her advance ‘warning’ she is following a link to a page in a different language. You would use the ‘hreflang’ attribute as: <a href=”” hreflang=”fr”>French</a> for that situation.

Rules of thumb to keep handy!

The W3C’s Web Content Accessibility Guidelines (WCAG) are the go-to resource to create inclusive digital experiences for multilingual website users. Here are best practices to consider:

Suggest a translation app or provide one
Remove, or rewrite jargon, unfamiliar and unique terms
Provide the meaning of abbreviations
Indicate how to pronounce words (if it’s key to interpretation)
Write short, clear, and simple content (typically, at the sixth-grade level)
Provide glossaries and on-page help text when specific terminology must be used
Allow web users to add their preferred language to a virtual meeting
Provide non-text alternatives (e.g., graphs, charts, icons) or audio to increase comprehension
Make live and prerecorded video transcripts available in multiple languages for download
Write inclusively (e.g., older person, not senior or senior citizen)
Avoid text overlaid on images (not easily interpreted by multilingual and low vision web users)

Hmm, you don’t say

English is the most widely used language on websites (59.3%). However, non-native English speakers must be considered too. These web users include the most spoken languages in the world (e.g., Mandarin Chinese, Hindi, Spanish, French, etc.). For them, access to information might be out of reach. Our advice is to think inclusively!

Resources:

https://www.w3.org/International/questions/qa-html-language-declarations
https://www.w3.org/TR/WCAG21/#readable
https://www.w3.org/International/questions/qa-lang-why

So, What Comes Next?

To obtain more insights on creating a multilingual website on SiteCore Compostable DXP, follow Megan Jensen’s series.

The future of UX is digital accessibility, and Perficient has information to help. Download our guide Digitally Accessible Experiences: Why it Matters and How to Create Them, and there’s more to read on digital accessibility in our UX for Accessible Design series.

About the Author

Lisa McMichael, Senior Manager of Digital Accessibility at Perficient, is a Certified Professional Accessibility Core Competencies “CPACC”. She leads and evangelizes inclusive design for Perficient and its clients.