Accessibility Considerations for Localization

Localization is the process of translating a product into different languages or adapting a product for a specific country or region.   When localization is performed on web content, information such as alternatives used by people with disabilities may inadvertently be overlooked.  When pages are localized, language teams often update strings of content and view the visual changes on the web page.  Some accessibility information is not visible on a web page but still must be localized, e.g. alternative text for images and text positioned off-screen for screen readers. Localization teams need procedures and tools to help them find this accessibility information to localize, while not accidently localizing content that they should not be localizing such as the programmatic role of a control, e.g. role=”button”. The process described in this article should assist localization teams in uncovering accessibility information that needs to be remediated.

Aspects of accessibility information that are often overlooked include:

• Language attributes (i.e. the lang attribute)
• Image alternatives (e.g. alt attributes)
• Title attributes
• ARIA-label attributes
• Off-screen positioned CSS text (e.g. className sr-only)
• Table summary attributes
• Page titles (these are hidden more in tabbed browsing and may be overlooked)
• Long descriptions (e.g. the longdesc attribute)

All of the checks should be verified in the different responsive modes of a page. For example, when desktop users with low vision use the zoom feature in the browser, the web page may go into responsive mode based on a breakpoint for device width being triggered. The same issue may occur on mobile devices. Sometimes, triggering responsive mode causes different information to be displayed. WCAG success criteria indicate that browser zoom of up to 200% must be available to users. Therefore, pages should be checked at 100% and 200%, unless multiple responsive breakpoints occur between these two settings. Browser zoom can be tested in most desktop browsers by holding down the control key and using the wheel on the mouse. On mobile devices, pinch zoom can be used in most browsers to increase the size of web content.

Those testing localization should consider using the checks below with different page states. For example, the checks should be applied with and without error messages displayed. Another example is when dialogs, layers, or other dynamic page content appears. The page should be checked with and without the dynamic changes, layers, or dialogs to ensure all states of the page have been evaluated for accessibility.

Whenever a page cannot be made accessible or a page represents the long description for an image, that page also needs to be localized. Most sites do not require alternative pages or long descriptions; however, these pages may exist in certain situations.

Favlets are an easy way to expose accessibility information and can be easily made available to localization teams that do not have experience with development.

Favlets

A favlet (or sometimes called a bookmarklet) is a favorite or bookmarked item in a web browser (e.g., Internet Explorer, Firefox, Chrome, Safari, etc.) that allows you to perform some sort of function via scripting, such as changing the page or performing a test on the page. An accessibility favlet is a script that makes the page more accessible for a user or that helps testers and developers assess a web page for accessibility violations.(https://www.levelaccess.com/blog/accessible-social-media/)

**NOTE: Favlets can be downloaded directly to the favorites folder within any browser. Outlined below is a method where the favlets are downloaded in Firefox and Chrome.

Direct download: To directly download the favlet to Firefox, activate https://labs.ssbbartgroup.com/index.php/Category:Favlet

The following favlets are available

• ARIA Favlet
• Img Alt Favlet
• Lang Favlet
• Sr-only Favlet
• Table Summary Favlet
• Title Attribute Favlet

Activate the link to favlet. Activate the context menu on the favlet link and activate Bookmark this Link. Save the favlet in the Favlets folder.

Direct download for Chrome:  Select the Favlet link from https://labs.ssbbartgroup.com/index.php/Category:Favlet;  Create a folder named ”Favlets.”

• Drag and drop the favlet on the bookmarks bar (Ctrl+Shift+B).
• Alternately, activate the favlet link; activate the context menu and select copy link address
  • Open Bookmarks manager (ALT+ E, press B)
  • Navigate to folders and select Favlets. Navigate to and activate Organize; select Add page
• Enter the name of the favlet. Navigate to URL edit field and paste the URL

Check and Remediation

Language

Check

Activate the language bookmark.

Identify each occurrence of the lang attribute that does not contain the correct language code.

Language must be specified at the page level on the HTML element for the document, and inline when a language different from the main document is used for a passage of text.

Resolutions

• Update the document lang attribute on the HTML element
• Update any passage-specific lang attributes for the display language
• Re-run the language bookmark and verify the correct language code is displayed

Image Alternatives

Check

Click the image alternative bookmark.

Identify each occurrence of the alt attribute for images:

• The alt attribute should contain text in the proper language of the page (i.e., if the main language of the page is Spanish, then the alternative text for images needs to be in Spanish).
• Use the same rules for translating on-screen text content as you would for images. For example, in instances where the alternative is a product name (e.g., SSB University), it should not be translated. The alt text should remain “SSB University.”
• When an image contains text, the alternative text should match the visually displayed text (e.g., a graphical link that displays the word “Next” should have alt text stating “Next” or, in Spanish, an image of text indicating “Siguiente” would have alt text of “Siguiente”).

Resolutions

• Update the alt attribute on images with a localized string
• Re-run the image alternative bookmark and verify alt text is in the correct language

Title

Check

Click the title attribute bookmark.

Identify each occurrence of the title attribute.

The Title attribute may appear on many different types of elements, such as form fields, images, anchors, iframes, abbr elements, etc.

• Title attribute should contain text in the proper language of the page (i.e., if the main language of the page is Spanish, then the title attribute text for images needs to be in Spanish unless the title attribute represents a product name or other word that would not be translated).

Resolutions

• Update the title attribute with the localized string
• Re-run the title attribute bookmark and verify title attribute text is in the correct language

ARIA-label

Check

Click the ARIA bookmark.

Identify each occurrence of the aria-label attribute. The ARIA favlet indicates other content such as roles and aria-labelledby and aria-describedby content. These other properties should be ignored — do not change any roles, as these properties must be in English.

The Aria-label attribute may appear on many different types of elements such as form fields, images, anchors, etc.

• aria-label attributes need to contain text in the proper language of the page (i.e., if the main language of the page is Spanish, then the aria-label attribute text for a form field needs to be in Spanish unless the aria-label attribute represents a product name or other word that would not be translated).

Resolutions

• Update the aria-label attribute with the localized string
• Re-run the ARIA bookmark and verify aria-label text is in the correct language

Off-screen text (e.g. sr-only class)

Check

Sometimes text is positioned off-screen using CSS to provide additional information to screen reader users. This information will not appear on-screen but will be announced by a screen reader; therefore, it must be localized following the same localization rules for other visual content. This is typically done by using a class called sr-only that 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.  (note the class name can be any valid className, the Favlet can be updated to check for any particular className—in this example sr-only is used).

Activate the sr-only bookmark.

Identify each occurrence of the sr-only class.

The off-screen text class (e.g. sr-only) may appear on many different types of elements such as form fields, labels, links, or in a heading or paragraph, etc.

• Text included in the sr-only class needs to contain text in the proper language of the page (i.e., if the main language of the page is Spanish, then the text content within the sr-only class such as help for the current page must also be in Spanish, unless the text of the sr-only class represents a product name or other word that should not be translated).

Resolutions

• Localize the content that has the sr-only class applied
• Re-run the sr-only bookmark and verify the text is in the correct language

Page Title

Check

Check that the page title displayed in the browser title bar or browser tab has been localized.

Resolution

Update the page title to match the primary language of the document.