React Accessibility & Internationalization — Interview Questions & Answers

Ques 1: What does “Accessibility (a11y)” mean in React?

Ans: Accessibility (often written as a11y) means designing and developing applications that everyone can use, including people with disabilities.

In React, it involves using semantic HTML, ARIA attributes, focus management, and keyboard navigation to ensure all users can interact with the app.

Ques 2: Why is accessibility important in React applications?

• Improves usability for all users.
• Helps users with screen readers or keyboard navigation.
• Required for legal compliance (e.g., WCAG, ADA).
• Enhances SEO, since accessible apps use semantic markup.

Ques 3: What is Semantic HTML and why is it essential for accessibility?

Ans: Semantic HTML uses elements that clearly describe their purpose — e.g., <header>, <main>, <button>, <nav>.

Screen readers depend on these tags to interpret the page correctly.

Example:

<button onClick={submit}>Submit</button>

Ques 4: What are ARIA roles in React?

Ans: ARIA (Accessible Rich Internet Applications) attributes help make dynamic or custom elements accessible.

They describe UI roles and states to assistive technologies.

Example:

<div role="alert" aria-live="assertive">
  Error: Please fill out this field.
</div>

Common roles include:

• role="button"
• role="navigation"
• role="dialog"

Ques 5: When should you use ARIA roles?

Ans: Use ARIA only when native HTML elements can’t express the correct role or state.

Example: A custom modal, slider, or dropdown.

Don’t use ARIA to override correct semantic HTML (e.g., <button> doesn’t need role="button").

Ques 6: How does React handle accessibility automatically?

Ans: React supports built-in HTML accessibility features such as:

• Automatic label association via htmlFor.
• Handling of focus and tab order.
• Compatibility with screen readers through the Virtual DOM.

Ques 7: What are some best practices for keyboard navigation in React?

• Use tabIndex to control focus order.
• Implement keyboard event handlers (onKeyDown, onKeyUp).
• Always provide a visible focus indicator.
• Avoid trapping keyboard focus inside components.

Example:

<button onKeyDown={(e) => e.key === 'Enter' && submitForm()}>
  Submit
</button>

Ques 8: How can you manage focus in React components?

Ans: Use the useRef Hook to manage focus programmatically.

Example:

const inputRef = useRef(null);
useEffect(() => inputRef.current.focus(), []);

Ques 9: How can you make React modals accessible?

• Use role="dialog" and aria-modal="true".
• Trap focus within the modal (libraries like focus-trap-react).
• Return focus to the triggering element on close.
• Provide a clear close button.

Ques 10: What is Screen Reader Support in React?

Ans: Screen readers interpret page content for visually impaired users.

React apps should include:

• Semantic HTML
• ARIA landmarks
• Alternative text (alt) for images
• Clear and descriptive labels

Ques 11: How do you test accessibility in React apps?

Ans: Tools for accessibility testing include:

• axe DevTools (browser extension)
• Lighthouse (Chrome DevTools)
• React aXe (runtime analyzer)
• NVDA / JAWS / VoiceOver (screen readers)

Ques 12: What is Internationalization (i18n) in React?

Ans: Internationalization (i18n) is the process of designing your app to support multiple languages and locales without changing the code.

Ques 13: What is Localization (l10n)?

Ans: Localization is adapting an app to a specific region or language — e.g., translating content, formatting dates, currencies, etc.

Example: Showing dates as MM/DD/YYYY (US) vs DD/MM/YYYY (India).

Ques 14: How can you implement internationalization in React?

Ans: Popular libraries:

• react-intl
• react-i18next
• FormatJS

Example using react-i18next:

import { useTranslation } from 'react-i18next';

const App = () => {
  const { t } = useTranslation();
  return <h1>{t('welcome_message')}</h1>;
};

Ques 15: What are key components of i18n in React?

• Translation keys for text (t('welcome')).
• Locale files (e.g., en.json, fr.json).
• Dynamic locale switching.
• Date and number formatting (Intl API).

Ques 16: How do you handle dynamic language switching?

Ans: React i18n libraries allow users to switch locales at runtime.

Example:

i18n.changeLanguage('fr');

This re-renders the UI with the new language instantly.

Ques 17: What is the JavaScript Intl API?

Ans: The Intl API provides built-in support for internationalization — formatting dates, times, numbers, and currencies.

Example:

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1000);

Ques 18: How to handle Right-to-Left (RTL) languages in React?

• Add dir="rtl" to the root element.
• Adjust CSS accordingly (e.g., margin-right ↔ margin-left).
• Many libraries like Material UI and Tailwind have built-in RTL support.

Ques 19: What is a locale in React i18n?

Ans: A locale represents a user’s language and regional settings, like "en-US", "fr-FR", or "hi-IN".

It determines text direction, formatting, and translation source.

Ques 20: What are common accessibility and i18n mistakes to avoid?

• Missing alt text on images.
• Using <div> for interactive elements.
• Ignoring keyboard navigation.
• Hardcoding text instead of using translation keys.
• Forgetting to set correct language or locale.