React Accessibility & Internationalization

Modern web applications must be accessible to everyone and usable in any language. Accessibility ensures inclusivity for users with disabilities, while internationalization (i18n) enables global reach.

In React, both are vital for building scalable, user-friendly, and globally adaptable applications.

This module covers:

1. Semantic HTML & ARIA Roles – Accessibility Fundamentals

Semantic HTML and ARIA roles form the foundation of accessibility in React apps.

Semantic HTML elements like <header>, <main>, <button>, and <form> carry meaning that screen readers and search engines can interpret.

Why It Matters

• Improves SEO and discoverability
• Enables screen reader support
• Reduces the need for extra ARIA attributes
• Ensures better keyboard and voice navigation

Example:

<header>Welcome to My React App</header>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

If you’re using non-semantic elements (like <div> for a button), add ARIA roles to describe their behavior:

<div role="button" tabIndex="0" aria-label="Submit Form">Submit</div>

2. Keyboard Navigation & Focus Management – a11y Best Practices

Accessibility isn’t just about visuals — it’s about interaction.

Many users navigate your site using only a keyboard (Tab, Shift+Tab, Enter, Space, and Arrow keys).

React apps must manage focus and keyboard events correctly for full accessibility.

Best Practices

• Always make interactive elements focusable (tabIndex={0})
• Use visible focus indicators (:focus CSS state)
• Manage focus when components mount/unmount (especially in modals and dialogs)
• Handle key events properly (onKeyDown, onKeyUp)

Example:

function AccessibleButton({ label, onClick }) {
  return (
    <divrole="button"
      tabIndex="0"
      onClick={onClick}
      onKeyDown={(e) => e.key === "Enter" && onClick()}
      style={{
        padding: "10px 20px",
        borderRadius: "5px",
        cursor: "pointer",
        backgroundColor: "#007bff",
        color: "#fff",
      }}
    >
      {label}
    </div>
  );
}

3. Screen Reader Support – Ensuring Content is Accessible

Screen readers convert on-screen content into speech or Braille output, enabling visually impaired users to navigate your app.

To ensure compatibility, developers must use proper semantics, labels, and ARIA attributes.

Techniques for Screen Reader Support

• Use descriptive labels via aria-label or <label for="">
• Avoid hiding interactive elements using display: none or visibility: hidden
• Use aria-live regions for dynamically updated content (like notifications)
• Provide alt text for all images

Example:

<img src="profile.jpg" alt="User profile picture" />
<div aria-live="polite">Message sent successfully!</div>
<button aria-label="Open Settings Menu">⚙️</button>

4. Internationalization (i18n) & Localization (l10n) – Multi-language Support

If your app targets a global audience, it should adapt to different languages, date formats, and regions.

React provides flexibility through internationalization (i18n) and localization (l10n) libraries.

Difference Between i18n and l10n

Popular Libraries for i18n in React

1. react-intl – Provides components and APIs for formatting messages, dates, and numbers.
2. react-i18next – Simple and powerful i18n library for React, based on i18next.
3. FormatJS – Great for internationalization with message formatting support.

Example using react-i18next

Install:

npm install react-i18next i18next

Setup:

import React from "react";
import { useTranslation } from "react-i18next";

function Welcome() {
  const { t } = useTranslation();

  return <h1>{t("welcome_message")}</h1>;
}

export default Welcome;

Translation file (en.json):

{
  "welcome_message": "Welcome to our website!"
}

Now you can easily switch languages dynamically, and the app will render the correct translations.