React में Accessibility (a11y)
React में Accessibility यह सुनिश्चित करने जैसा है कि एक building में सिर्फ stairs नहीं बल्कि ramps और elevators भी हो, ताकि हर कोई actually अंदर आ सके और इसे उपयोग कर सके, उनकी abilities कुछ भी हों।
In this page:
Syntax
<button onClick={handleClick}>Label</button>
<img src="image.png" alt="Description of the image" />
<label htmlFor="fieldId">Label</label>
<input id="fieldId" />
<button aria-label="Close">X</button>Semantic HTML Elements को Prefer करें
एक असली <button> element अपने साथ built-in keyboard support (Enter/Space इसे trigger करता है), correct screen-reader announcements, और proper focus behavior automatically लाता है।
एक <div onClick={...}> जो एक button जैसा दिखने के लिए styled है इसमें से कुछ भी default रूप से नहीं होता — आपको यह सब painstakingly खुद reimplement करना होगा।
Note:
किसी click handler वाले div/span के लिए reach करने से पहले, check करें कि क्या कोई semantic HTML element (button, a, nav, main, header) already purpose को fit करता है।
Warning:
बिना किसी keyboard handling वाला एक clickable div सिर्फ keyboard से navigate करने वाले किसी के लिए completely unusable है, कई screen-reader users सहित।
उदाहरण: Prefer Semantic HTML Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
return (
<div>
<button onClick={() => alert("Clicked")}>Good: real button, keyboard-accessible</button>
<br/>
<div onClick={() => alert("Clicked")} style={{cursor: "pointer", color: "blue"}}>Bad: div pretending to be a button</div>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Text Alternatives देना
हर meaningful image को उस content describe करने वाला एक alt attribute चाहिए उन users के लिए जो इसे देख नहीं सकते, और icon-only buttons को aria-label के through एक accessible label चाहिए क्योंकि screen reader के announce करने के लिए कोई visible text नहीं है।
Note:
बिना किसी informational content वाली purely decorative images के लिए, alt="" (empty, omitted नहीं) उपयोग करें ताकि screen readers इन्हें announce करना correctly skip करें।
Warning:
बिना aria-label वाला एक icon-only button एक screen reader user को सिर्फ button के रूप में announce होता है, कोई indication नहीं कि यह actually क्या करता है।
उदाहरण: Providing Text Alternatives
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
return (
<div>
<img src="chart.png" alt="Sales increased 20% in Q3" />
<button aria-label="Close dialog">✕</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Focus को Visible और Logical रखना
Keyboard users यह जानने के लिए एक visible focus outline पर निर्भर रहते हैं कि कौन सा element currently selected है, और expect करते हैं कि Tab interactive elements के through एक sensible, predictable order में move करे जो visual layout से match करे।
Focus outline को पूरी तरह हटाना, बिना किसी clear replacement के, keyboard users को यह बताने का कोई तरीका नहीं छोड़ता कि वे कहां हैं।
Note:
अगर एक default focus outline आपके design से match नहीं करता, इसे एक equally visible custom style से replace करें — बस इसे हटा न दें।
Warning:
बिना किसी visible alternative के outline: none keyboard navigation को effectively invisible बना देता है, एक serious accessibility regression।
उदाहरण: Keeping Focus Visible and Logical
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
return (
<div>
<button style={{ outline: "2px solid transparent" }}>Bad: focus indicator hidden entirely</button>
<button style={{ outlineOffset: "2px" }}>Good: keeps a visible focus outline</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- एक असली <button> के बजाय एक onClick handler वाला <div> उपयोग करना, built-in keyboard support और screen-reader semantics free में खो देते हुए।
- Meaningful images पर alt text भूल जाना, screen-reader users को कोई idea न देते हुए कि क्या दिखाया गया है।
- CSS के साथ focus outlines हटाना (outline: none) बिना कोई visible alternative दिए, keyboard navigation को invisible बनाते हुए।
चैप्टर सारांश
- Accessibility (a11y) का मतलब है ऐसा UI build करना जो abilities की wide range वाले लोगों द्वारा usable हो, screen-reader और keyboard-only users सहित।
- Semantic HTML elements (button, nav, main) built-in accessibility behavior देते हैं जिसे एक generic div free में replicate नहीं कर सकता।
- ARIA attributes (aria-label, aria-hidden) gaps भरते हैं जब सिर्फ semantic HTML sufficient न हो।
- Visible focus indicators और logical tab order किसी भी ऐसे के लिए मायने रखते हैं जो keyboard से navigate करे, सिर्फ assistive-technology users के लिए नहीं।
ब्राउज़र सपोर्ट
Semantic HTML/ARIA support modern browsers में universal है; कोई specific React version requirement नहीं।
🔒
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first:
- Error Boundaries
- React Portals
- Modals using Portals (practical use)
- React Suspense
- Code Splitting with React.lazy
- Introduction to Server Components
- Introduction to Next.js (server-side React)
- Using React with TypeScript
- Scalable Folder Architecture
- Common React Design Patterns
- Component Documentation with Storybook
- Accessibility (a11y) in React
- i18n with react-i18next
- React Security Best Practices