स्क्रीन रीडर, उपयोगकर्ता को बोला गया यूज़र इंटरफ़ेस (यूआई) दिखा सके, इसके लिए ज़रूरी है कि सही एलिमेंट में सही लेबल हों या टेक्स्ट के विकल्प मौजूद हों. लेबल या टेक्स्ट के विकल्प से, एलिमेंट को ऐक्सेस किया जा सकने वाला नाम मिलता है. यह सुलभता ट्री में एलिमेंट के सेमेंटेक्स को दिखाने के लिए, मुख्य प्रॉपर्टी में से एक है.
जब किसी एलिमेंट के नाम को एलिमेंट की भूमिका के साथ जोड़ा जाता है, तो इससे उपयोगकर्ता को संदर्भ मिलता है. इससे वे यह समझ सकते हैं कि वे किस तरह के एलिमेंट के साथ इंटरैक्ट कर रहे हैं और उसे पेज पर कैसे दिखाया गया है. अगर कोई नाम मौजूद नहीं है, तो स्क्रीन रीडर सिर्फ़ एलिमेंट की भूमिका के बारे में बताता है. मान लें कि आप बिना किसी अतिरिक्त संदर्भ के, किसी पेज और सुनने, "बटन," "चेकबॉक्स," "इमेज" को नेविगेट करने की कोशिश कर रहे हैं. इसलिए, लेबल और टेक्स्ट के विकल्प, बेहतर और सुलभ अनुभव के लिए ज़रूरी हैं.
किसी एलिमेंट के नाम की जांच करना
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