Clean β’ Professional
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?
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:
htmlFor.Ques 7: What are some best practices for keyboard navigation in React?
tabIndex to control focus order.onKeyDown, onKeyUp).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?
role="dialog" and aria-modal="true".focus-trap-react).Ques 10: What is Screen Reader Support in React?
Ans: Screen readers interpret page content for visually impaired users.
React apps should include:
alt) for imagesQues 11: How do you test accessibility in React apps?
Ans: Tools for accessibility testing include:
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:
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?
t('welcome')).en.json, fr.json).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?
dir="rtl" to the root element.margin-right β margin-left).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?
alt text on images.<div> for interactive elements.