स्क्रीन रीडर के लिए, उपयोगकर्ता को बोला गया यूज़र इंटरफ़ेस (यूआई) दिखाना तत्वों में उचित लेबल या टेक्स्ट विकल्प होने चाहिए. लेबल या टेक्स्ट विकल्प, किसी एलिमेंट को उसका नाम देता है, जो कि एक मुख्य प्रॉपर्टी है सुलभता ट्री में एलिमेंट सिमेंटिक्स दिखाने के लिए.
जब एलिमेंट के नाम को एलिमेंट की भूमिका से जोड़ा जाता है, तो यह उपयोगकर्ता के बारे में जानकारी उपलब्ध कराई गई है, ताकि वे समझ सकें कि वे किस तरह के एलिमेंट से इंटरैक्ट कर रहे हैं साथ ही, यह भी हो सकता है कि पेज पर इसे कैसे दिखाया जाए. अगर कोई नाम मौजूद नहीं है, तो स्क्रीन रीडर सिर्फ़ एलिमेंट की भूमिका के बारे में बताता है. कल्पना करें कि आप नेविगेट करने की कोशिश कर रहे हैं एक पेज दिख रहा है, जिसे सुनने के लिए "बटन" का इस्तेमाल किया गया है. "चेकबॉक्स" "इमेज" बिना किसी अतिरिक्त दस्तावेज़ के संदर्भ. इसलिए एक अच्छे शीर्षक के लिए लेबलिंग और टेक्स्ट के विकल्प अत्यंत महत्वपूर्ण हैं, बेहतरीन अनुभव मिलता है.
एलिमेंट के नाम की जांच करें
Chrome के DevTools का इस्तेमाल करके, किसी एलिमेंट के ऐक्सेस किए जा सकने वाले नाम को देखना आसान है:
- किसी एलिमेंट पर राइट क्लिक करें और जांच करें चुनें. इससे DevTools खुल जाएगा एलिमेंट पैनल.
- एलिमेंट पैनल में, सुलभता पैनल खोजें. यह छिपा हो सकता है
»सिंबल के पीछे. - कंप्यूट की गई प्रॉपर्टी ड्रॉपडाउन में, नाम प्रॉपर्टी खोजें.
चाहे आपको alt टेक्स्ट वाला img दिख रहा हो या input
label, इन सभी स्थितियों में एक ही तरह का नतीजा मिलता है:
एलिमेंट का ऐक्सेस हो सकता है.
छूटे हुए नामों की जांच करें
किसी एलिमेंट का ऐक्सेस किया जा सकने वाला नाम जोड़ने के कई तरीके हैं, यह उनके टाइप के हिसाब से तय होता है. नीचे दी गई टेबल में, सबसे आम एलिमेंट टाइप की सूची दी गई है जिनके लिए ऐक्सेस किए जा सकने वाले नाम और लिंक होने चाहिए. इनकी मदद से, जानकारी जोड़ी जा सकती है.
| तत्व प्रकार | नाम जोड़ने का तरीका |
|---|---|
| HTML दस्तावेज़ | दस्तावेज़ों और फ़्रेम को लेबल करना |
<frame> या <iframe> एलिमेंट
|
दस्तावेज़ों और फ़्रेम को लेबल करना |
| इमेज एलिमेंट | इमेज और ऑब्जेक्ट के लिए, टेक्स्ट के विकल्प शामिल करें |
<input type="image"> तत्व
|
इमेज और ऑब्जेक्ट के लिए, टेक्स्ट के विकल्प शामिल करें |
<object> तत्व
|
इमेज और ऑब्जेक्ट के लिए, टेक्स्ट के विकल्प शामिल करें |
| बटन | बटन और लिंक को लेबल करना |
| लिंक | बटन और लिंक को लेबल करना |
| फ़ॉर्म के एलिमेंट | फ़ॉर्म के एलिमेंट को लेबल करना |
दस्तावेज़ों और फ़्रेम को लेबल करें
हर पेज में
title
जो कम शब्दों में यह बताता है कि पेज किस बारे में है. title एलिमेंट से ये फ़ायदे मिलते हैं
पृष्ठ का ऐसा नाम हो जिसे ऐक्सेस किया जा सके. जब कोई स्क्रीन रीडर पेज पर आता है, तो यह
पहला टेक्स्ट जोड़ा जाएगा.
उदाहरण के लिए, नीचे दिए गए पेज का टाइटल है "मैरी मेपल बार फ़ास्ट-बेकिंग रेसिपी":
<!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>
एम्बेड किए गए ऑब्जेक्ट
<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 उदाहरण में किया गया है:
काम की सूची: DevSite - आकलन के बारे में सोचें और उसकी जांच करें