स्क्रीन रीडर, उपयोगकर्ता को बोलकर सुनाए जाने वाले यूज़र इंटरफ़ेस को तब ही दिखा सकता है, जब काम के एलिमेंट के लिए सही लेबल या टेक्स्ट के विकल्प मौजूद हों. लेबल या टेक्स्ट के विकल्प से, एलिमेंट को ऐक्सेस किया जा सकने वाला नाम मिलता है. यह सुलभता ट्री में एलिमेंट के सेमेटिक्स को दिखाने के लिए, मुख्य प्रॉपर्टी में से एक है.
जब किसी एलिमेंट के नाम को एलिमेंट की भूमिका के साथ जोड़ा जाता है, तो इससे उपयोगकर्ता को संदर्भ मिलता है. इससे वे यह समझ सकते हैं कि वे किस तरह के एलिमेंट के साथ इंटरैक्ट कर रहे हैं और उसे पेज पर कैसे दिखाया गया है. अगर कोई नाम मौजूद नहीं है, तो स्क्रीन रीडर सिर्फ़ एलिमेंट की भूमिका के बारे में बताता है. किसी पेज पर नेविगेट करने के दौरान, बिना किसी अतिरिक्त जानकारी के "बटन," "चेकबॉक्स," "इमेज" सुनने की कल्पना करें. इसलिए, लेबल और टेक्स्ट के विकल्प, बेहतर और सुलभ अनुभव के लिए ज़रूरी हैं.
किसी एलिमेंट के नाम की जांच करना
Chrome के DevTools का इस्तेमाल करके, किसी एलिमेंट का सुलभ नाम देखना आसान है:
- किसी एलिमेंट पर राइट क्लिक करें और जांच करें को चुनें. इससे DevTools का एलिमेंट पैनल खुलता है.
- एलिमेंट पैनल में, सुलभता पैनल ढूंढें. यह
»चिह्न के पीछे छिपा हो सकता है. - कंप्यूट की गई प्रॉपर्टी ड्रॉपडाउन में, नाम प्रॉपर्टी ढूंढें.
alt टेक्स्ट वाला img या label वाला input, इन दोनों ही स्थितियों में एक ही नतीजा मिलता है: किसी एलिमेंट को ऐक्सेस किया जा सकने वाला नाम देना.
यह देखना कि कोई नाम मौजूद है या नहीं
किसी एलिमेंट के टाइप के आधार पर, उसमें ऐक्सेस किया जा सकने वाला नाम जोड़ने के अलग-अलग तरीके होते हैं. यहां दी गई टेबल में, सबसे आम एलिमेंट टाइप के बारे में बताया गया है. इन एलिमेंट को जोड़ने के तरीके के बारे में जानने के लिए, लिंक पर जाएं.
| तत्व प्रकार | नाम जोड़ने का तरीका |
|---|---|
| HTML दस्तावेज़ | दस्तावेज़ों और फ़्रेम को लेबल करना |
<frame> या <iframe> एलिमेंट
|
दस्तावेज़ों और फ़्रेम को लेबल करना |
| इमेज एलिमेंट | इमेज और ऑब्जेक्ट के लिए वैकल्पिक टेक्स्ट शामिल करें |
<input type="image"> तत्व
|
इमेज और ऑब्जेक्ट के लिए वैकल्पिक टेक्स्ट शामिल करें |
<object> तत्व
|
इमेज और ऑब्जेक्ट के लिए वैकल्पिक टेक्स्ट शामिल करें |
| बटन | बटन और लिंक लेबल करना |
| लिंक | बटन और लिंक लेबल करना |
| फ़ॉर्म एलिमेंट | फ़ॉर्म एलिमेंट लेबल करना |
दस्तावेज़ों और फ़्रेम को लेबल करना
हर पेज में एक ऐसा title एलिमेंट होना चाहिए जिससे यह पता चल सके कि पेज पर किस बारे में जानकारी दी गई है. title एलिमेंट, पेज को ऐक्सेस किया जा सकने वाला नाम देता है. जब स्क्रीन रीडर किसी पेज पर आता है, तो सबसे पहले यह टेक्स्ट पढ़ा जाता है.
उदाहरण के लिए, नीचे दिए गए पेज का टाइटल "Mary's Maple Bar Fast-Baking Recipe" है:
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
इसी तरह, किसी भी frame या iframe एलिमेंट में title एट्रिब्यूट होने चाहिए:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
iframe के कॉन्टेंट में, उसका अपना title एलिमेंट हो सकता है. हालांकि, स्क्रीन रीडर आम तौर पर फ़्रेम की सीमा पर रुक जाता है और एलिमेंट की भूमिका—"फ़्रेम"—और title एट्रिब्यूट से मिला उसका ऐक्सेस किया जा सकने वाला नाम बताता है. इससे उपयोगकर्ता यह तय कर सकता है कि उसे फ़्रेम में जाना है या उसे बायपास करना है.
इमेज और ऑब्जेक्ट के लिए वैकल्पिक टेक्स्ट शामिल करना
इमेज को ऐक्सेस किया जा सकने वाला नाम देने के लिए, img के साथ हमेशा alt एट्रिब्यूट का इस्तेमाल करना चाहिए. अगर इमेज लोड नहीं होती है, तो alt टेक्स्ट का इस्तेमाल प्लेसहोल्डर के तौर पर किया जाता है, ताकि उपयोगकर्ताओं को यह पता चल सके कि इमेज से क्या दिखाया जा रहा था.
अच्छा alt टेक्स्ट लिखना थोड़ा मुश्किल है. हालांकि, इन दिशा-निर्देशों का पालन करके, इसे आसान बनाया जा सकता है:
- यह पता लगाना कि इमेज में ऐसा कॉन्टेंट है या नहीं जिसे आस-पास मौजूद टेक्स्ट को पढ़कर हासिल करना मुश्किल होगा.
- अगर ऐसा है, तो कॉन्टेंट को कम से कम शब्दों में बताएं.
अगर इमेज सिर्फ़ सजावट के तौर पर इस्तेमाल की गई है और उसमें कोई काम का कॉन्टेंट नहीं है, तो उसे ऐक्सेसibililty tree से हटाने के लिए, alt="" एट्रिब्यूट को खाली छोड़ा जा सकता है.
लिंक और इनपुट के तौर पर इमेज
लिंक में रैप की गई इमेज के लिए, img के alt एट्रिब्यूट का इस्तेमाल करना चाहिए. इससे यह पता चलता है कि लिंक पर क्लिक करने पर, उपयोगकर्ता कहां जाएगा:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
इसी तरह, अगर इमेज बटन बनाने के लिए <input type="image"> एलिमेंट का इस्तेमाल किया जाता है, तो उसमें alt टेक्स्ट होना चाहिए. इससे पता चलता है कि बटन पर क्लिक करने पर क्या कार्रवाई होती है:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
एम्बेड किए गए ऑब्जेक्ट
<object> एलिमेंट में वैकल्पिक टेक्स्ट भी होना चाहिए. आम तौर पर, इन एलिमेंट का इस्तेमाल Flash, PDF या ActiveX जैसे एम्बेड के लिए किया जाता है. इमेज की तरह ही, यह टेक्स्ट तब दिखता है, जब एलिमेंट रेंडर नहीं हो पाता. वैकल्पिक टेक्स्ट, object एलिमेंट में सामान्य टेक्स्ट के तौर पर दिखता है. जैसे, यहां "साल भर की रिपोर्ट":
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
बटन और लिंक लेबल करना
बटन और लिंक, अक्सर किसी साइट के अनुभव के लिए ज़रूरी होते हैं. इसलिए, यह ज़रूरी है कि दोनों के नाम ऐक्सेस करने लायक हों.
बटन
button एलिमेंट, अपने टेक्स्ट कॉन्टेंट का इस्तेमाल करके, ऐक्सेस किए जा सकने वाले नाम का हिसाब लगाने की कोशिश करता है. form में शामिल नहीं होने वाले बटन के लिए, टेक्स्ट कॉन्टेंट के तौर पर साफ़ तौर पर कार्रवाई लिखना ही काफ़ी हो सकता है. इससे, बटन का नाम आसानी से ऐक्सेस किया जा सकता है.
<button>Book Room</button>
इस नियम का एक सामान्य अपवाद, आइकॉन बटन हैं. आइकॉन बटन, बटन के लिए टेक्स्ट कॉन्टेंट देने के लिए, इमेज या आइकॉन फ़ॉन्ट का इस्तेमाल कर सकता है. उदाहरण के लिए, टेक्स्ट को फ़ॉर्मैट करने के लिए, 'जैसा दिखता है वैसा ही मिलता है' (WYSIWYG) एडिटर में इस्तेमाल किए जाने वाले बटन, आम तौर पर सिर्फ़ ग्राफ़िक सिंबल होते हैं:
आइकॉन बटन के साथ काम करते समय, aria-label एट्रिब्यूट का इस्तेमाल करके, उन्हें साफ़ तौर पर सुलभ नाम देना मददगार हो सकता है. aria-label, बटन में मौजूद किसी भी टेक्स्ट कॉन्टेंट को बदल देता है. इससे, स्क्रीन रीडर का इस्तेमाल करने वाले किसी भी व्यक्ति को कार्रवाई के बारे में साफ़ तौर पर बताया जा सकता है.
<button aria-label="Left align"></button>
लिंक
बटन की तरह ही, लिंक का सुलभता नाम मुख्य रूप से उनके टेक्स्ट कॉन्टेंट से मिलता है. लिंक बनाते समय, "यहां" या "ज़्यादा पढ़ें" जैसे फ़िलर शब्दों के बजाय, लिंक में सबसे ज़्यादा काम का टेक्स्ट डालना एक अच्छी तरकीब है.
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
यह सुविधा खास तौर पर उन स्क्रीन रीडर के लिए मददगार होती है जो पेज पर मौजूद सभी लिंक की सूची बनाने के लिए शॉर्टकट उपलब्ध कराते हैं. अगर लिंक में बार-बार दिखने वाले फ़िलर टेक्स्ट का इस्तेमाल किया गया है, तो ये शॉर्टकट काफ़ी कम काम के हो जाते हैं:
फ़ॉर्म एलिमेंट को लेबल करना
किसी लेबल को चेकबॉक्स जैसे फ़ॉर्म एलिमेंट से जोड़ने के दो तरीके हैं. इनमें से किसी भी तरीके से, लेबल टेक्स्ट भी चेकबॉक्स के लिए क्लिक टारगेट बन जाता है. यह माउस या टचस्क्रीन इस्तेमाल करने वाले लोगों के लिए भी मददगार होता है. किसी लेबल को किसी एलिमेंट से जोड़ने के लिए, इनमें से कोई एक तरीका अपनाएं:
- इनपुट एलिमेंट को लेबल एलिमेंट के अंदर रखें
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- इसके अलावा, लेबल के
forएट्रिब्यूट का इस्तेमाल करके, एलिमेंट केidका रेफ़रंस दिया जा सकता है
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
जब चेकबॉक्स को सही तरीके से लेबल किया गया हो, तो स्क्रीन रीडर यह बता सकता है कि एलिमेंट की भूमिका चेकबॉक्स है, वह चुना गया है, और उसका नाम "प्रमोशनल ऑफ़र पाएं?" है. नीचे दिए गए VoiceOver के उदाहरण में यह जानकारी दी गई है:
TODO: DevSite - Think and Check assessment