This post is based on a presentation I gave in 2019 for Intuit’s Accessibility Week in Bangalore, India: Accessibility, Globalization, and Internationalization.
When we talk about building global products, we often throw around acronyms like G11n (Globalization), I18n (Internationalization), and A11y (Accessibility). Too often, these are treated as separate silos. But the truth is, if you aren’t designing for accessibility, you aren’t designing for the world.
Based on Intuit’s global accessibility standards, here is a guide to the technical and design intersections where accessibility meets internationalization.
The Global Standard
The business case for international accessibility is driven by a patchwork of legal requirements—from the UN’s Convention on the Rights of Persons with Disabilities to the US Section 508 and India’s Rights of Persons with Disabilities Act2. However, there is a unifying technical standard: WCAG 2.1 AA3. This is the benchmark for Intuit and the safest target for any global application.
1. Define Your Language
The most fundamental step in localized accessibility is programmatic language definition. This ensures that assistive technologies, like screen readers, switch to the correct voice and inflection4.
-
HTML:
<html lang="en"> -
iOS:
var accessibilityLanguage: String? { get set } -
Android:
LocaleList.getDefault()
2. Stress Test with the “Big Three”
To ensure your layouts are robust enough for global deployment, you don’t need to speak every language. You just need to test your designs with three specific ones5:
-
German: To test for text expansion and wrapping (German words are notoriously long).
-
Arabic or Hebrew: To test Right-to-Left (RTL) flipping and layout integrity.
-
Chinese: To test symbolic language density.
If your UI works in these three, it will likely work everywhere.
3. The CSS Trap: Hiding Text Safely
For years, developers hid text for screen readers using text-indent: -1000em or absolute positioning off-screen to the left. Stop doing this.
When you localize for a Right-to-Left language (like Arabic), left: -1000em can cause massive horizontal scrollbars or layout breaking6.
The Solution: Use the “Clip” pattern. It crops content to a 0-pixel space without shifting the layout engine.
CSS
.sr-only {
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}4. Contextualize Your Links
“Learn More” links are a usability nightmare for screen reader users and a translation headache. Translating the phrase “Learn More” often results in varying sentence structures that lose context.
Use aria-label to provide the full context for the link, ensuring clarity regardless of the visual label7:
HTML
<a href="..." aria-label="Learn more about TurboTax">Learn More</a>
5. Color and Culture
Color perception is not universal. While red signifies “danger” or “error” in the US, it represents “prosperity” or “positive” in China8. Furthermore, color-blind users may not distinguish between red and green at all.
Rule of Thumb: Never depend on color alone to convey meaning. Always use icons (✓, ✘, +, -) or text labels to supplement color indicators.
6. Typography and Layout
Avoid justified layout (text aligned to both left and right edges). While it might look clean to a designer, it creates inconsistent “rivers” of white space between words. This makes the text significantly harder to read for users with dyslexia or reading disabilities9. Stick to left-aligned (or right-aligned for RTL) text for better readability.
7. Terminology Matters
Finally, the words we use in our code and documentation matter. Move away from negative or outdated stereotypes (“suffering from,” “confined to”) and embrace People First language:
-
Instead of: “Autistic student” -> Use: “Student with autism”
-
Instead of: “Wheelchair bound” -> Use: “Person who uses a wheelchair”
2025 Note: Many communities are moving away from People First and embracing identity first. For instance Deaf engineer and Autistic CEO. It’s important to respect community and individual preferences.