Website Localization & Accessibility: How It Works
Jonar Sabilano
Creating a globally accessible website with localized content helps create barrier-free access for visitors in multiple languages. Localizing a website enables target readers and audiences to engage with content in specific languages. This includes website visitors with disabilities using assistive technology. Comprehensive website localization means updating both visible and hidden content, (not directly visible on screen), like image alt text.
When performed with the right tools, process, and teamwork, website localization amplifies the ability for language speakers with disabilities to interact with your site using screen readers, braille displays, and other assistive tech tools. Website owners can increase traffic, engagement, and sales by broadening audience reach using website localization best practices. While specific insights and information should be localized for optimal web accessibility, other elements like programmed functions and roles of controls using certain buttons should not.
In this blog post we reveal the critical accessibility elements and content of a website that should be localized. We’ll provide some tips, touch on best practices, and suggest tools to help ensure accurate, efficient, and easier website localization.
First let’s take a quick look at the current market landscape and factors for the rising demand of localized content, backed up with some statistics. Then we’ll shift over to exploring some of the most integral information to prioritize and make accessible to all users when creating localized content for your website. Finally, we’ll break down ways to check, find, and remediate the content for an organized, streamlined website localization process.
Some statistics on the benefits of localized content online
In their article “Top 10 Best Practices for Multilingual Websites,” Digital.gov, (an official website of the United States government), shares the value of localized content on various levels. They indicate that multilingual websites should offer equivalent digital features and capabilities to those found on the English version, alongside emails, RSS feeds, podcasts, and access to social media profiles.
Another source underpins the need and demand for localized content in delivering inclusive user experience (UX) for optimal engagement levels with the data below:
- A staggering 4.72 billion individuals across the globe are connected to the internet. It may come as a surprise that English-speaking users make up just 25.9% of this figure, with a meager 313 million residing in the United States.
- Merely a quarter of internet users can access content in English, even though it’s the language of choice for just over 50% of websites globally.
- An impressive 55% of worldwide consumers favor purchasing from websites that present product information in their mother tongue.
- When it comes to engagement and conversions, localization proves to be especially valuable, with localized Facebook pages boasting a 50% higher engagement rate compared to non-localized counterparts.
The benefits of website localization and adopting website localization best practices are clear.
Now let’s segue into a drill down of the key website elements organizations can and should prioritize when creating localized content online. Then we’ll move on with a closer look at how to create a more accessible digital experience for multilingual target audiences.
Website localization: key elements to prioritize
Some aspects of websites that are often forgotten in the localization process play a key role in the accessibility of critical insights. This is particularly true for users who rely on assistive technologies. Prioritizing testing of online localized content increases user inclusion and enhances UX. We’ll be looking at how to check and remediate the following website aspects to help you learn how to deliver accessible, localized content.
- Language – across the board
- Titles – page titles for blog posts, product descriptions & all title attributes
- ARIA-labels – to ensure button functionality, accessible navigation & interaction
- Images – alt text for images and other visual elements
- All off-screen text – specifically creating localized CSS for sr-only class
Website owners should test localized content accessibility and usability of various page states. This includes checking and verifying localized content with and without message errors displayed. Websites can also be programmed with different types of dynamic content, like layers and dialogs. Make sure to check accessibility of localized website content with and without dynamic content displayed.
Important tip: check localized content in responsive modes
Website owners and key players of the localization process should confirm accessibility of localized content of both desktop and mobile versions. When using different devices, a website can automatically be displayed in a responsive mode that adapts to screen size and type.
Meeting WCAG guidelines for accessibility features, like zoom and magnification capacity, for example, plays an important role in UX and inclusion. It also helps prevent issues that can occur when checking content accessibility in the various responsive website modes.
To help ensure content is accessible and readable when magnified, for example, website owners can integrate an AI-powered accessibility widget. A solution like this offers a range of settings for various disabilities, including vision impairments. This kind of tool can provide near-instant zoom and readability of content with just one click.
Favlets or bookmarks: test & remediate elements in the website localization process
How to check & remediate localized content accessibility
Checking accessibility of content in target languages
To check accessibility of on-screen and off-screen localized content in target languages, start by activating the language bookmark. This allows you to then pinpoint every instance of incorrectly coded lang attributes.
Important note: specifying the language within an HTML document is essential at the page level for the document as a whole. It is also important to do so in an inline manner when writing specific segments of the text in a different language than the document’s primary language.
Remediating language accessibility issues
Once you’ve identified areas of a website or page with incorrect language codes, make them accessible in target languages by following these steps:
1. Update and include the language tribute of HTML elements in the coding document.
2. Similarly, update language attributes to ensure specific sections of pages appear in target languages.
3. Use the language bookmark to check and confirm language codes are correct.
Titles
Page titles play a critical role in giving users an accurate sense of what they can expect to read and gain from proceeding content. This is why writing titles with clear, concise, simple, and direct language will also help increase SEO ranking.
Search engine crawlers scan titles and headers to evaluate accuracy in relation to the body of content. Artificial Intelligence algorithms of search engine crawlers simulate how a person would respond to a title. If it’s clear and coincides with the body of the content, it will increase SEO ranking, and potentially drive more traffic.
The title attribute can be found on a range of integral aspects of a website, including images, anchors, abbr elements, form fields, iframes, and others.
Best practice: the title attribute must consist of text corresponding to the primary language of the page. For example, if a web page’s main language is French, then the title attribute for images should be in French. Adopt this as best practice, unless a title attribute is indicative of a product name or other term that should not be translated.
Checking that all page and content titles are accessible in the website localization process can be performed by following these steps:
1. Select the title attribute bookmark.
2. Locate and record every instance of title attributes.
Remediate accessibility issues of titles to meet website localization needs
Once identifying every occurrence of of the title attribute on your website, you can help ensure accessibility and accuracy of localized titles with the following steps:
1. Replace the title attribute with the appropriate localized text or string.
2. Select the title attribute bookmark again, and confirm that the title attribute text is in the intended language.
ARIA-labels
Aria-labels provide descriptive text for an element, like a button. When a screen reader, braille display, and other assistive technologies encounter the element, the text of the ARIA-label text is used to inform users of function or purpose. The “submit” button of forms, for example, will relay that users need to click or engage with the button using keyboard commands to complete form submission.
Best practice: ARIA-labels are commonly found on website elements like anchors and images. Like titles, aria-label attributes must be written in or have text in the relevant and main language of a web page. If a web page’s primary language is Russian, the text of ARIA-label attributes of form fields, for example, or buttons of form fields, should also be in Russian.
Like title attributes, the only exception to the above best practice is if an ARIA-label attribute is used for a product name, (or other website text that should not be or can’t be translated).
Important note: the ARIA bookmark also displays supplementary content, like button and link roles – (“aria-labelledby” and “aria-describedby” content). Do not change these roles, as they do not need to be localized and must always be written in English.
Website owners and developers can check and remediate accessibility of ARIA-labels to help ensure universal usability and interactivity levels. Testing and checks of ARIA-labels will also support a more seamlessly navigable website using assistive technologies.
Just follow these steps:
1. Select the ARIA bookmark.
2. Locate and record every instance of aria-label attributes.
Remediate accessibility issues of ARIA-label attributes for website localization needs
1. Replace the ARIA-label attribute with the appropriate localized text or string.
2. Select the ARIA-label attribute bookmark again, and confirm that each one is written in the right language.
Image Alternative Text
Images can provide additional value and enrich written text for various types of online content. Integrating images, collages, infographics, image carousels & sliders, animation, video, and GIFs can bring websites to life. Eye-catching visuals can increase the impact of messages, key insights and takeaways, along with statistics. Visual content can add a dynamic, innovative touch that enhances UX and online interactivity.
Creating image alternative text, (also known as alt text, alt attribute, or in its abbreviated form img alt text), empowers users with visual, learning, cognitive, and other disabilities to gain insight and understand the value of visuals. When assistive technologies come across image alt text, they will relay it to users – audibly or in the form of braille, or other ways.
As with on-screen content like page titles, apply the same principles and practices to image alt text. Product names should stay in their original language, and the like for other content elements that should not or can not be translated.
Website owners can take a deeper look at how to write image alt text for various types of visuals. A few of the web localization best practices for image alternative text include:
- Use of clear, concise, accurate, and easy to understand language.
- Writing alt text in the appropriate language for a web page. (As in the case of titles and ARIA-labels, if a web page’s main language is Dutch, then the alternative text for visuals should also be in Dutch).
- Match alt text to contain the precise words in the same language as they appear on an image. So, if the words “get started,” for example, are hyperlinked on a picture, then text of the alt attribute should also include the words “get started” in English.
To help every reader engage and access the value of visual content, website owners can check accessibility of localized alt text by following these steps:
1. Select the alt text (or alternative text) bookmark
2. Find and record every instance of alt attributes for images and other visual content.
Remediate accessibility issues of localized alt text for images & other visual content
- Replace the alt attribute on images with a localized string, as needed according to the guidelines above. (Again, you can reference this in-depth look at how to create image alt text for more best practices, details, and insights).
- Select the image alternative bookmark again, and ensure that the alternative text is in the appropriate language where needed and applicable.
Pro tip: millions of websites have integrated a powerful web accessibility solution to make it even easier for users with various disabilities to access image alt text. A cost-effective, reliable, and user-friendly web accessibility widget can help make sure all images have corresponding, correctly written alt text. The solution will automatically detect violations and provide suggestions for remediations.
Solutions like this help websites maintain ADA compliance, mitigating potential legal risk that comes with web accessibility violations. This can be particularly useful for:
- Websites with a high volume of visual content
- Websites with frequent content additions and updates that include images and other visual content, like videos, GIFs, and more.
Off-screen text: zooming in on sr-only class
Certain types of off-screen text can give screen readers information to relay, and it can often be found in the CSS code (Cascading Style Sheets code) of a website. Since the insights of CSS code need to be accessible audibly or with a braille reader, it’s important to ensure the text is localized.
Creating localized text of CSS code is usually done with the use of a class called sr-only. CSS properties are then set up to hide or position text so it’s not visible. The sr-only class has certain CSS properties set to position the text off the edge of the screen, or in such a way that the text is clipped and hidden from normal view.
Take into account that the class name can be any valid className. Bookmarks can be modified to test and inspect localization of a specific className. In this particular instance, we’ll look at “sr-only” as an example for how to check and remediate required fixes.
Some web localization best practices, insights, & tips for CSS:
- Apply the above-listed localization best practices, guidelines, and rules for visual content when localizing text of CSS code.
- The class for off-screen text, for instance, “sr-only,” can be utilized on a variety of element types, including form fields, labels, links, headings, or paragraphs.
- Choose the appropriate language for the text of the sr-only case. (As mentioned above for alt text and ARIA-labels, if the primary language of a web page is German, for example, then the guiding text of sr-only code should also be in German.
To test websites for accessibility of localized sr-only class CSS:
- Select the sr-only bookmark.
- Pinpoint and record every instance of sr-only class in a website.
Remediate accessibility of localized alternative text for images & other visual content
- Replace existing content that sr-only class has been applied to with localized text.
- Select the sr-only bookmark to confirm the text has been updated in the right language for localization.
UserWay helps resolve accessibility issues of localized content
Technology has the power to transform every user’s online experience into an engaging and inclusive journey. UserWay’s AI-driven digital accessibility widget can help website owners find and fix accessibility issues in alt text and PDFs. Automating the search for violations saves time and helps reduce legal risks with ADA compliance.
Integrating UserWay’s winning digital accessibility widget also empowers website visitors with the ability to engage with online content in over 40 languages with just one click.
Find out more about UserWay’s world-leading inclusive technology, and join millions of websites creating inclusive UX for their visitors.
Talk to an expert today.
Answers to common FAQs
What is the purpose of website localization?
Website localization is the process of creating content in a language for a specific target audience. By creating localized content for online environments, websites, platforms, and apps, organizations can extend their offering or valuable information to potential customers or readers worldwide in multiple languages.
With localized content online and adoption of website localization best practices, organizations can increase opportunities for equal access to their key messages, products, and/or services. Website localization will essentially enhance accessibility and user experience for readers of specific languages. Localized content online can also improve UX for anyone using assistive technology like screen readers or braille displays.
What is localization in SEO?
SEO localization helps enhance website traffic through organic search results in the specific target language. Localizing websites and localized content online empowers marketers to boost an organization’s online presence in various global regions.
How can UserWay’s technology help with web page localization?
UserWay’s world-leading AI-powered web accessibility widget can help by automating the process of finding and remediating accessibility issues in the website localization process. The solution also offers a vast range of disability profiles for individuals with visual, learning, and cognitive disabilities. And when it comes to website localization, widget users can translate website content in over 40 languages with just one click.
Share