लेबल और टेक्स्ट के विकल्प

स्क्रीन रीडर, उपयोगकर्ता को बोलकर सुनाए जाने वाले यूज़र इंटरफ़ेस को तब ही दिखा सकता है, जब काम के एलिमेंट के लिए सही लेबल या टेक्स्ट के विकल्प मौजूद हों. लेबल या टेक्स्ट के विकल्प से, एलिमेंट को ऐक्सेस किया जा सकने वाला नाम मिलता है. यह सुलभता ट्री में एलिमेंट के सेमेंटेक्स को दिखाने के लिए, मुख्य प्रॉपर्टी में से एक है.

जब किसी एलिमेंट का नाम, एलिमेंट की भूमिका के साथ जोड़ा जाता है, तो इससे उपयोगकर्ता को उसके बारे में जानकारी मिलती है. इससे यह पता चलता है कि एलिमेंट किस तरह के एलिमेंट के साथ इंटरैक्ट कर रहा है और उसे पेज पर कैसे दिखाया जा रहा है. अगर कोई नाम मौजूद नहीं है, तो स्क्रीन रीडर सिर्फ़ एलिमेंट की भूमिका के बारे में बताता है. मान लें कि आप बिना किसी अतिरिक्त संदर्भ के, किसी पेज और सुनने, "बटन," "चेकबॉक्स," "इमेज" को नेविगेट करने की कोशिश कर रहे हैं. इसलिए, लोगों को बेहतरीन अनुभव देने के लिए, लेबल और टेक्स्ट के विकल्प बहुत ज़रूरी हैं.

किसी एलिमेंट के नाम की जांच करना

Chrome के DevTools का इस्तेमाल करके, किसी एलिमेंट के सुलभ नाम की जांच करना आसान है:

  1. किसी एलिमेंट पर राइट क्लिक करें और जांच करें चुनें. इससे DevTools का एलिमेंट पैनल खुलता है.
  2. एलिमेंट पैनल में, सुलभता पैनल ढूंढें. यह » चिह्न के पीछे छिपा हो सकता है.
  3. कंप्यूट की गई प्रॉपर्टी ड्रॉपडाउन में, नाम प्रॉपर्टी ढूंढें.
DevTools के सुलभता पैनल में, किसी बटन के लिए कैलकुलेट किया गया नाम दिख रहा है.

alt टेक्स्ट वाला img या label वाला input, इन दोनों ही स्थितियों में एक ही नतीजा मिलता है: किसी एलिमेंट को ऐक्सेस किया जा सकने वाला नाम देना.

यह देखना कि कोई नाम मौजूद है या नहीं

एलिमेंट के टाइप के आधार पर, उसमें ऐक्सेस किया जा सकने वाला नाम जोड़ने के अलग-अलग तरीके हैं. नीचे दी गई टेबल में ऐसे एलिमेंट की सूची दी गई है जिन्हें ऐक्सेस किया जा सकता है. साथ ही, उन्हें जोड़ने के तरीके की जानकारी देने वाले लिंक भी दिए गए हैं.

दस्तावेज़ों और फ़्रेम को लेबल करना

हर पेज में एक ऐसा 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 टेक्स्ट लिखना थोड़ा मुश्किल है. हालांकि, इन दिशा-निर्देशों का पालन करके, इसे आसान बनाया जा सकता है:

  1. तय करें कि क्या इमेज में ऐसा कॉन्टेंट है जिसे आस-पास के टेक्स्ट को पढ़ने में दिक्कत हो सकती है.
  2. अगर ऐसा है, तो कॉन्टेंट को कम से कम शब्दों में बताएं.

अगर इमेज सिर्फ़ सजावट के तौर पर इस्तेमाल की गई है और उसमें कोई काम का कॉन्टेंट नहीं है, तो उसे ऐक्सेस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>

&#39;कमरा बुक करें&#39; बटन वाला मोबाइल फ़ॉर्म.

इस नियम का एक सामान्य अपवाद, आइकॉन बटन हैं. आइकॉन बटन में टेक्स्ट कॉन्टेंट देने के लिए, इमेज या आइकॉन का फ़ॉन्ट इस्तेमाल किया जा सकता है. उदाहरण के लिए, टेक्स्ट को फ़ॉर्मैट करने के लिए, 'जैसा दिखता है वैसा ही मिलता है' (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>.

यह सुविधा खास तौर पर उन स्क्रीन रीडर के लिए मददगार होती है जो पेज पर मौजूद सभी लिंक की सूची बनाने के लिए शॉर्टकट उपलब्ध कराते हैं. अगर लिंक में बार-बार दिखने वाले फ़िलर टेक्स्ट का इस्तेमाल किया गया है, तो ये शॉर्टकट काफ़ी कम काम के हो जाते हैं:

VoiceOver का लिंक मेन्यू, जिसमें &#39;यहां&#39; शब्द है.
MacOS के लिए स्क्रीन रीडर, VoiceOver का उदाहरण. इसमें लिंक मेन्यू की मदद से नेविगेट करने की सुविधा दिखाई गई है.

फ़ॉर्म एलिमेंट को लेबल करना

किसी लेबल को चेकबॉक्स जैसे फ़ॉर्म एलिमेंट से जोड़ने के दो तरीके हैं. इनमें से किसी भी तरीके से, लेबल टेक्स्ट चेकबॉक्स के लिए क्लिक टारगेट भी बन जाता है. यह माउस या टचस्क्रीन इस्तेमाल करने वाले लोगों के लिए भी मददगार होता है. लेबल को किसी एलिमेंट से जोड़ने के लिए, इनमें से कोई एक तरीका अपनाएं:

  • इनपुट एलिमेंट को लेबल एलिमेंट के अंदर रखें
<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 के उदाहरण में दिया गया है:

&#39;प्रमोशनल ऑफ़र पाएं?&#39; दिखाने वाला वॉइसओवर टेक्स्ट आउटपुट

TODO: DevSite - Think and Check assessment