स्क्रीन रीडर के लिए उपयोगकर्ता को बोला गया यूज़र इंटरफ़ेस (यूआई) दिखाया जा सके, इसके लिए ज़रूरी एलिमेंट में सही लेबल या टेक्स्ट के विकल्प होने चाहिए. लेबल या टेक्स्ट का विकल्प किसी एलिमेंट को उसका ऐक्सेस किया जा सकने वाला name देता है. यह सुलभता ट्री में एलिमेंट के सिमैंटिक बताने की मुख्य प्रॉपर्टी में से एक है.
जब किसी एलिमेंट के नाम को एलिमेंट की role के साथ जोड़ा जाता है, तो इससे उपयोगकर्ता को जानकारी मिलती है. इससे, वे समझ सकते हैं कि वे किस तरह के एलिमेंट के साथ इंटरैक्ट कर रहे हैं और पेज पर इसे कैसे दिखाया गया है. अगर कोई नाम मौजूद नहीं है, तो स्क्रीन रीडर सिर्फ़ एलिमेंट की भूमिका के बारे में बताता है. कल्पना करें कि आप किसी पेज पर नेविगेट करते हुए, "बटन", "चेकबॉक्स," "इमेज" को बिना किसी अतिरिक्त कॉन्टेक्स्ट के नेविगेट कर सकते हैं. यही वजह है कि एक अच्छे और ऐक्सेस करने लायक अनुभव के लिए लेबल और टेक्स्ट के विकल्प ज़रूरी हैं.
किसी एलिमेंट के नाम की जांच करना
Chrome के DevTools का इस्तेमाल करके किसी एलिमेंट का ऐक्सेस किया जा सकने वाला नाम आसानी से देखा जा सकता है:
- किसी एलिमेंट पर राइट क्लिक करें और जांच करें चुनें. इससे DevTools एलिमेंट पैनल खुलता है.
- एलिमेंट पैनल में, सुलभता पैनल खोजें. ऐसा हो सकता है कि यह
»सिंबल के पीछे छिपा हो. - कंप्यूटेड प्रॉपर्टी ड्रॉपडाउन में, नाम प्रॉपर्टी खोजें.
चाहे आप alt टेक्स्ट वाला img देख रहे हों या label वाला input देख रहे हों, इन सभी स्थितियों में एक जैसा नतीजा मिलता है: एलिमेंट को उसका ऐक्सेस किया जा सकने वाला नाम दिया जाता है.
देखें कि नाम मौजूद नहीं हैं या नहीं
किसी एलिमेंट में ऐक्सेस किया जा सकने वाला नाम जोड़ने के कई तरीके हैं. ये तरीके इस बात पर निर्भर करते हैं कि एलिमेंट किस तरह का है. नीचे दी गई टेबल में सबसे सामान्य तरह के एलिमेंट की सूची दी गई है. इन्हें जोड़ने का तरीका जानने के लिए, ऐक्सेस किए जा सकने वाले नाम और लिंक की ज़रूरत है.
| तत्व प्रकार | नाम जोड़ने का तरीका |
|---|---|
| HTML दस्तावेज़ | दस्तावेज़ों और फ़्रेम को लेबल करना |
<frame> या <iframe> एलिमेंट
|
दस्तावेज़ों और फ़्रेम को लेबल करना |
| इमेज एलिमेंट | इमेज और ऑब्जेक्ट के लिए, टेक्स्ट के विकल्पों को शामिल करें |
<input type="image"> तत्व
|
इमेज और ऑब्जेक्ट के लिए, टेक्स्ट के विकल्पों को शामिल करें |
<object> तत्व
|
इमेज और ऑब्जेक्ट के लिए, टेक्स्ट के विकल्पों को शामिल करें |
| बटन | बटन और लिंक को लेबल करना |
| लिंक | बटन और लिंक को लेबल करना |
| फ़ॉर्म के एलिमेंट | लेबल फ़ॉर्म एलिमेंट |
दस्तावेज़ों और फ़्रेम को लेबल करना
हर पेज में एक title एलिमेंट होना चाहिए, जो कम शब्दों में यह बताता हो कि पेज किस बारे में है. title एलिमेंट, पेज को उसका ऐक्सेस किया जा सकने वाला नाम देता है. जब कोई स्क्रीन रीडर, पेज पर आता है, तो पहली बार यह टेक्स्ट पढ़कर सुनाया जाता है.
उदाहरण के लिए, नीचे दिए गए पेज का टाइटल "Mar's Maple Bar फ़ास्ट-बेकिंग रेसिपी" है:
<!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 की 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>
एम्बेड किए गए ऑब्जेक्ट
आम तौर पर, Flash, PDF या ActiveX जैसे एम्बेड करने के लिए इस्तेमाल किए जाने वाले <object> एलिमेंट में वैकल्पिक टेक्स्ट भी होना चाहिए. इमेज की तरह ही, अगर एलिमेंट रेंडर नहीं हो पाता, तो यह टेक्स्ट दिखता है. वैकल्पिक टेक्स्ट, सामान्य टेक्स्ट के तौर पर object एलिमेंट के अंदर जाता है, जैसे कि नीचे दी गई "सालाना रिपोर्ट":
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
लेबल बटन और लिंक
किसी साइट का अनुभव बेहतर बनाने के लिए बटन और लिंक बेहद ज़रूरी होते हैं. साथ ही, इन दोनों के नाम और पेज आसानी से ऐक्सेस किए जा सकते हैं.
बटन
button एलिमेंट हमेशा अपने टेक्स्ट कॉन्टेंट का इस्तेमाल करके, ऐक्सेस किए जा सकने वाले नाम का पता लगाने की कोशिश करता है. जो बटन form का हिस्सा नहीं हैं उनके लिए, साफ़ तौर पर जानकारी देने वाली कार्रवाई लिखें, क्योंकि टेक्स्ट कॉन्टेंट को ऐक्सेस करने के लिए, आपको बस एक अच्छा नाम बनाने की ज़रूरत होती है.
<button>Book Room</button>
इस नियम का एक सामान्य अपवाद आइकॉन बटन है. आइकॉन बटन का टेक्स्ट कॉन्टेंट दिखाने के लिए, इमेज या आइकॉन फ़ॉन्ट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, टेक्स्ट को फ़ॉर्मैट करने के लिए, What You You See Is What You Get (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 - आकलन के बारे में सोचें और उसकी जांच करें