HTML Accessibility

Web Accessibility की बुनियादी बातें

Web accessibility का मतलब है ऐसे पेज डिज़ाइन करना जिन्हें कोई भी नेविगेट कर सके, चाहे उसकी शारीरिक या मानसिक क्षमता कुछ भी हो। सिमैंटिक, स्टैंडर्ड HTML कोड लिखना एक एक्सेसिबल वेबपेज की नींव है।

उदाहरण: Web Accessibility Basics

<button onclick="alert('Clicked')">Click me</button>

सिमैंटिक HTML Landmarks

सिमैंटिक टैग्स (जैसे main, nav, header, और footer) आपके वेबपेज पर लेआउट लैंडमार्क्स की तरह काम करते हैं। स्क्रीन रीडर्स स्ट्रक्चरल आउटलाइन्स बताने के लिए इन लैंडमार्क्स का उपयोग करते हैं, जिससे यूज़र्स सीधे कंटेंट ब्लॉक्स पर आसानी से जा सकते हैं।

उदाहरण: Semantic HTML Landmarks

<header>Site Header</header>
<nav>Navigation</nav>
<main>Main content</main>
<footer>Footer</footer>

ARIA Attributes और Roles

ARIA (Accessible Rich Internet Applications) एट्रिब्यूट्स खास accessibility टैग्स हैं जिनका उपयोग तब किया जाता है जब स्टैंडर्ड HTML सिमैंटिक्स काफी नहीं होते, ताकि आपके मार्कअप में कॉन्टेक्स्ट जोड़ा जा सके।

उदाहरण: ARIA Attributes and Roles

<button aria-label="Close dialog">X</button>

कीबोर्ड नेविगेशन और फोकस स्टाइल्स

सिर्फ कीबोर्ड इस्तेमाल करने वाले और दृष्टिबाधित यूज़र्स वेबपेज्स को क्रमवार नेविगेट करने के लिए Tab की पर निर्भर रहते हैं। आपको यह सुनिश्चित करना चाहिए कि हर इंटरैक्टिव एलिमेंट में एक दिखने वाला फोकस इंडिकेटर हो (जैसे border outline) ताकि यूज़र्स देख सकें कि वे पेज पर कहाँ हैं।

उदाहरण: Keyboard Navigation and Focus Styles

<a href="#" style="outline: 2px solid blue;">Focusable link</a>

कलर कॉन्ट्रास्ट और Alt विवरण

Accessibility काफी हद तक हाई कलर कॉन्ट्रास्ट और स्पष्ट ग्राफिक विवरण पर निर्भर करता है। सुनिश्चित करें कि आपके टेक्स्ट में बैकग्राउंड फिल्स के मुकाबले पर्याप्त कलर कॉन्ट्रास्ट हो, और हमेशा अपनी इमेजेज़ के लिए विवरणात्मक alt text लिखें।

उदाहरण: Color Contrast and Alt Descriptions

<p style="color: #000000; background-color: #FFFFFF;">High contrast text</p>
<img src="photo.jpg" alt="A red bicycle leaning against a wall">

Skip Link लागू करना

एक skip link कीबोर्ड यूज़र्स को पेज के सबसे ऊपर से सीधे मुख्य कंटेंट पर जाने देता है, एक लंबे नेविगेशन मेनू को छोड़कर। यह आमतौर पर विज़ुअली तब तक छुपा रहता है जब तक इसे कीबोर्ड फोकस न मिले, और उसी समय यह साफ दिखने लगता है।

उदाहरण: Skip Links Implementation

<a href="#main-content" style="position: absolute; left: -9999px;">Skip to main content</a>
<main id="main-content">Main content</main>

एक्सेसिबल फॉर्म लेबल्स

हर फॉर्म इनपुट को एक जुड़ा हुआ label चाहिए ताकि स्क्रीन रीडर्स यह बता सकें कि वह फील्ड किसके लिए है। इनपुट को label के अंदर रैप करना, या मैचिंग for और id एट्रिब्यूट से उन्हें जोड़ना, दोनों ही तरीकों से यह ज़रूरी रिलेशनशिप बनती है।

उदाहरण: Accessible Form Labels

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

Accessibility टेस्टिंग टूल्स (Lighthouse, axe)

Chrome DevTools में सीधे बिल्ट-इन Lighthouse, और ब्राउज़र एक्सटेंशन के रूप में उपलब्ध axe, दोनों ही किसी पेज को अपने-आप स्कैन करके मिसिंग alt text या खराब कलर कॉन्ट्रास्ट जैसी आम accessibility समस्याओं को फ्लैग करते हैं।

ऑटोमेटेड टूल्स कई समस्याएँ जल्दी पकड़ लेते हैं, लेकिन वे वाकई कीबोर्ड और असली स्क्रीन रीडर से टेस्ट करने की जगह नहीं ले सकते।

उदाहरण: Accessibility Testing Tools (Lighthouse, axe)

<!-- Run Chrome DevTools > Lighthouse > Accessibility audit on this page -->
<img src="banner.jpg" alt="Summer sale banner">