स्क्रीन रीडर को उपयोगकर्ता के लिए यूज़र इंटरफ़ेस को बोलकर सुनाने के लिए, ज़रूरी एलिमेंट में सही लेबल या टेक्स्ट के विकल्प होने चाहिए. किसी लेबल या टेक्स्ट के विकल्प से, एलिमेंट को ऐक्सेस किया जा सकने वाला नाम मिलता है. यह सुलभता ट्री में एलिमेंट के सिमैंटिक को दिखाने के लिए, मुख्य प्रॉपर्टी में से एक है.
जब किसी एलिमेंट के नाम को एलिमेंट की भूमिका के साथ जोड़ा जाता है, तो इससे उपयोगकर्ता को कॉन्टेक्स्ट मिलता है. इससे उन्हें यह समझने में मदद मिलती है कि वे किस तरह के एलिमेंट से इंटरैक्ट कर रहे हैं और पेज पर इसे कैसे दिखाया गया है. अगर नाम मौजूद नहीं है, तो स्क्रीन रीडर सिर्फ़ एलिमेंट की भूमिका के बारे में बताता है. कल्पना करें कि आपको किसी पेज पर नेविगेट करना है और आपको "बटन", "चेकबॉक्स", "इमेज" जैसी जानकारी सुनाई जा रही है. हालांकि, आपको इनके बारे में कोई अतिरिक्त जानकारी नहीं दी जा रही है. इसलिए, लेबलिंग और टेक्स्ट के विकल्प, सुलभता के लिए ज़रूरी हैं.
किसी एलिमेंट के नाम की जांच करना
Chrome के DevTools में, किसी एलिमेंट का ऐक्सेस किया जा सकने वाला नाम देखा जा सकता है:
- किसी एलिमेंट पर राइट क्लिक करें और जांच करें को चुनें. इससे DevTools का Elements पैनल खुलता है.
- एलिमेंट पैनल में, सुलभता पैन ढूंढें. यह
»सिंबल के पीछे छिपा हो सकता है. - कैलकुलेट की गई प्रॉपर्टी ड्रॉप-डाउन में, नाम प्रॉपर्टी ढूंढें.
चाहे 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 टेक्स्ट लिखना एक तरह की कला है. हालांकि, यहां कुछ दिशा-निर्देश दिए गए हैं जिनका पालन किया जा सकता है:
- यह पता लगाएं कि इमेज में ऐसा कॉन्टेंट है जिसे आस-पास मौजूद टेक्स्ट से समझना मुश्किल है.
- अगर ऐसा है, तो कॉन्टेंट को कम से कम शब्दों में बताएं.
अगर इमेज सिर्फ़ सजावट के तौर पर इस्तेमाल की गई है और उससे कोई काम का कॉन्टेंट नहीं मिलता है, तो उसे ऐक्सेसिबिलिटी ट्री से हटाने के लिए, alt="" एट्रिब्यूट की वैल्यू के तौर पर खाली स्ट्रिंग दें.
लिंक और इनपुट के तौर पर इमेज
लिंक में रैप की गई इमेज को img's 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 के इस उदाहरण में दिखाया गया है:
