Article 8: Accessibility (a11y) and Internationalization (i18n) — Build React Apps that Welcome Everyone

Learning Objectives

By the end of this article, you will:

• Understand the business and ethical “why” behind accessibility (a11y) and internationalization (i18n).
• Build React components that are accessible and usable by all users—including those using screen readers or assistive technology.
• Make your app multi-lingual and region-friendly using trusted i18n libraries.
• Apply best practices and patterns for modern, inclusive, and globally ready web applications.

Why Accessibility and Internationalization?

Accessibility (a11y)

In a country as vibrant and diverse as India, millions of users rely on accessible digital experiences—think of visually impaired users, those navigating by keyboard or voice, or aging family members exploring UPI payments for the first time. Ignoring accessibility leaves users (and even compliance, like ADA for global products) behind.

Accessible apps aren’t just required—they’re better for everyone.

Internationalization (i18n)

Noida or New York, people want digital experiences in their own language. Your React app may need to greet users in Hindi, Bengali, Kannada, or English—sometimes on the same page! Supporting multiple languages and formatting (dates, numbers, currencies) can 10x your reach and product-market fit.

Accessibility in React: Practical Guide

Key Principles

• Semantic HTML first—use elements for their intended purpose: <button>, <nav>, <header>, etc.
• All interactive controls must be keyboard accessible.
• All meaningful images and icons need descriptive alt text.
• Label all form fields and controls.

Using ARIA and Semantic Markup

ARIA (Accessible Rich Internet Applications) attributes help fill gaps when semantic HTML isn’t enough.

• aria-label, aria-labelledby, aria-describedby — for labeling interactive elements.
• role — to explicitly describe the purpose of elements (use sparingly, only when needed).

Example: Accessible Search Input

<input
  type="search"
  aria-label="Search"
  placeholder="Search products"
/>

Example: Accessible Button with Keyboard Focus

<button
  onClick={onSubmit}
  aria-label="Submit Form"
>
  <SendIcon aria-hidden="true" /> {/* Mark icons as decorative */}
  Submit
</button>

Keyboard Navigation

• Never trap keyboard focus!
• Use the tabIndex attribute to ensure users can tab through interactive elements.
• Test navigation in your app without touching the mouse.

Accessible Forms

• Always associate labels with inputs:

<label htmlFor="email">Email Address</label>
<input id="email" name="email" type="email" />

Color and Contrast

• Ensure text/background contrast passes WCAG AA or AAA (use online checkers).
• Never use color alone to convey information (always pair with icons/text).

Testing for Accessibility

• Use screen readers: (VoiceOver, NVDA, TalkBack on Android)
• Automated testing:
  • axe extension or jest-axe in tests.
  • Lighthouse audits for scoring and tips.

Internationalization (i18n) in React

Core i18n Challenges

• Translating UI text
• Adapting layout for LTR and RTL languages
• Formatting dates, times, numbers, and currencies

Popular i18n Libraries

• react-i18next — hooks-based, widely used, dynamic and easy to integrate.
• react-intl — great for date/number formatting, plurals.

Setting Up react-i18next

Installation:

npm install react-i18next i18next

Example: Basic Usage

import { useTranslation } from 'react-i18next';

function WelcomeBanner() {
  const { t, i18n } = useTranslation();
  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => i18n.changeLanguage('hi')}>हिन्दी में देखें</button>
      <button onClick={() => i18n.changeLanguage('en')}>English</button>
    </div>
  );
}

Translation files (e.g., en.json, hi.json):

// en.json
{
  "welcome": "Welcome to React Shop!"
}

// hi.json
{
  "welcome": "React दुकान में आपका स्वागत है!"
}

Date, Number, and Currency Formatting

Use i18n features to format for the user’s locale:

const amount = new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(1500);
// ₹1,500.00

Best Practices

• Keep text out of components, use translation keys everywhere.
• Organize translations by feature for maintainability.
• Test UI in every language and on accessibility devices.
• Don’t hardcode direction/layout—support RTL (right-to-left) when needed.

Practice Exercises

1. Make it Accessible:
   • Refactor a product list so all interactive elements (cards, buttons) are focusable and screen-reader friendly.
2. Language Switcher:
   • Add a button to your app that toggles between Hindi and English using react-i18next.
3. Form Audit:
   • Audit a signup form using only the keyboard and a screen reader, fixing any issues you find.

Project Idea

Professional Feature: Localize your main dashboard or checkout flow for Hindi/English with react-i18next.

• All UI text switches language instantly.
• Currency amounts and dates adapt to Indian formats.
• Verify screen-reader and keyboard navigation for all pages.

Further Reading & Resources

• React Accessibility Guide
• react-i18next Docs
• axe Tool for Automated a11y Testing
• MDN Accessibility Resources

Final Thoughts: Build for Everyone, Everywhere

Building your React app with accessibility and i18n in mind multiplies your impact and reach. You don’t just make apps for “users”—you make them for people—of all abilities, languages, and backgrounds.

Next: Take your professional workflow further: deploy and automate with modern CI/CD—so your accessible, global-ready app is always “just a push away” from your users!