अपने लेबल का स्तर बढ़ाएं

May 08 2023

विनम्र <लेबल>। यह आम है।

विनम्र <label>। यह आम है। यह सादा है। यह बुनियादी है। यह सांसारिक है। इसके चेहरे पर, इसके बारे में कुछ खास नहीं है। कुछ टेक्स्ट को स्टाइल करने के लिए अक्सर CSS के लिए एक मात्र लक्ष्य के रूप में उपयोग किया जाता है। और क्या जानना है? अपने फॉर्म फील्ड के ऊपर उस छोटे लड़के को थप्पड़ मारें और हम अपने पेज को गतिशील और रोमांचक बनाने के लिए CSS के लिए जावास्क्रिप्ट पर वापस आ गए हैं, है ना?

शायद नहीं।

प्रस्तावना

मैं एक आसान योग शर्त लगा सकता हूं कि HTTP सर्वर तक पहुंच वाले लगभग हर a11y पेशेवर ने लेबल के बारे में लिखा है। इसे मृत घोड़े की पिटाई कहना आसान होगा, लेकिन 2023 की WebAIM मिलियन रिपोर्ट के अनुसार , इंटरनेट पर शीर्ष मिलियन होमपेजों में से 96.3% में कम से कम एक एक्सेसिबिलिटी एरर का पता चला था, और उन पेजों में से 45.9% प्रपत्र लेबल के साथ त्रुटियाँ शामिल हैं। यह अपर्याप्त रंग कंट्रास्ट, बिना ऑल्ट टेक्स्ट वाली इमेज और बिना किसी एक्सेसिबल नाम वाले लिंक के बाद इसे चौथी सबसे आम एक्सेसिबिलिटी समस्या पर रखता है। दोनों संख्याएँ पिछले 5 वर्षों में नीचे की ओर बढ़ी हैं, लेकिन उन्हें कम करने के लिए अभी भी बहुत काम करना बाकी है। अगर यह पोस्ट कम से कम एक व्यक्ति को "वाह, मुझे यह नहीं पता था" सोचने पर मजबूर करती है तो मैं इसे एक शानदार सफलता मानूंगा

एक लेबल का उद्देश्य

जब हम एक वेब एप्लिकेशन के फ्रेमिंग में एक लेबल के बारे में सोचते हैं, तो हम संभावित रूप से टेक्स्ट फ़ील्ड्स, रेडियो बटन, चेक बॉक्स आदि जैसे तत्वों से सटे एक फॉर्म की कल्पना कर रहे होते हैं। वे अपेक्षित मान जैसे नाम और दिनांक या अन्य चयन क्या दर्शाते हैं, बताते हैं। दिखने में यह सिर्फ समझ में आता है, लेकिन खेल में और भी बहुत कुछ है।

यह क्यों मायने रखती है

जब हम अखंड शब्द "उपयोगकर्ताओं" को वापस लेते हैं तो हमें यह समझना चाहिए कि उपयोगकर्ता लोग हैं। लोग अद्वितीय और जटिल हैं, और वे सॉफ़्टवेयर विकास की तेज़-तर्रार दुनिया में खो सकते हैं। समावेशिता को ध्यान में रखते हुए डिजाइन करने के लिए एक मानसिक बदलाव की आवश्यकता होती है; जब हम केवल "औसत" उपयोगकर्ता को अपने लक्ष्य के रूप में कल्पना करते हैं तो हम अपने अनुप्रयोगों से बहुत से लोगों को बाहर करने का जोखिम उठाते हैं। विकलांग लोग इस बहिष्करण का खामियाजा भुगतते हैं, लेकिन ऐसा नहीं होना चाहिए।

और अच्छी खबर: सुलभ लेबल आसान हैं। मैं तर्क दूंगा कि वे सबसे आसान पहुंच "जीत" में से एक हैं जो एक टीम हासिल कर सकती है। आइए गहराई में जाएं और जानें कि क्या चीज किसी लेबल को सुलभ बनाती है और उतना ही महत्वपूर्ण, प्रयोग करने योग्य बनाती है।

आइए इसे सुलभ बनाएं

अलग-अलग स्थितियों वाले दो लोगों की कल्पना करें।

जेरेमी 41 साल के हैं। वह एक स्थानीय बैंक में वित्तीय सलाहकार के रूप में काम करता है। उन्हें तैरना, लंबी पैदल यात्रा करना और दोस्तों और परिवार के साथ डेरा डालना पसंद है। जेरेमी भी अंधा है, 30 के दशक की शुरुआत में मस्तिष्क की सर्जरी से हुई जटिलताओं का परिणाम है। जेरेमी अपनी नौकरी के साथ-साथ अपने अवकाश के समय में तकनीक के साथ बातचीत करने के लिए एक स्क्रीन रीडर का उपयोग करता है।

वायलेट 73 साल की हैं। एक वकील के रूप में एक सफल करियर के बाद वह सेवानिवृत्त हुई हैं। अपनी सेवानिवृत्ति में, उसने ऐतिहासिक स्थलों और अपने माता-पिता के गृहनगर, जो पूर्वी यूरोप के अप्रवासी थे, की यात्रा करने के लिए दुनिया की यात्रा की। वह हाल ही में अपने पोते-पोतियों के करीब रहने के लिए चली गई। वायलेट के दोनों हाथों में गठिया है। वह अनावश्यक दर्द से बचने के लिए अपने कंप्यूटर और फोन के साथ बातचीत करने के लिए स्पीच रिकग्निशन सॉफ्टवेयर का उपयोग करना पसंद करती है।

जेरेमी और वायलेट दोनों एक ही वेब पेज का उपयोग करने की कोशिश कर रहे हैं: उनके चिकित्सा प्रदाता की वेब साइट पर एक रोगी पोर्टल, जो चिकित्सा बिलों का भुगतान करने, उनकी व्यक्तिगत जानकारी को अपडेट करने, अपॉइंटमेंट लेने आदि की क्षमता प्रदान करता है।

जेरेमी की समस्या:

"मुझे अपने मेडिकल बिल का भुगतान करने के लिए अपने क्रेडिट कार्ड का उपयोग करने की आवश्यकता है, लेकिन मैं यह नहीं बता सकता कि भुगतान पृष्ठ पर कोई भी फ़ील्ड क्या है।"

यदि लेबल सही ढंग से प्रपत्र तत्वों से संबद्ध नहीं हैं, तो एक स्क्रीन रीडर केवल तत्व के प्रकार को पढ़ेगा, न कि आस-पास के किसी पाठ को।

वायलेट की समस्या:

"मुझे अपनी फाइल पर अपना पता बदलने की जरूरत है लेकिन मैं कंप्यूटर को कुछ भी बता दूं, सेव बटन क्लिक नहीं करेगा।"

ऊपर दिए गए स्क्रीन रीडर उदाहरण की तरह, स्पीच रिकग्निशन सॉफ्टवेयर भी फॉर्म फील्ड और बटन को नेविगेट करने और सक्रिय करने के लिए उचित लेबल एसोसिएशन पर निर्भर करता है।

यह सही है। ये दोनों समस्याएं अपर्याप्त रूप से लेबल किए गए तत्वों के कारण होती हैं। आइए कुछ कोड देखें जो आम तौर पर इन परिणामों का उत्पादन करते हैं।

कोड में जेरेमी की समस्या

आइए भुगतान फॉर्म की जांच करें।:

<form>
  <label>Card Number</label>
  <input type=”text” id=”card-number” />
  <label>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

विशेषता `for`_

विशेषता का उपयोग करने का सबसे आसान तरीका है for। <label>यह तत्व का मूल गुण है । इसका अपेक्षित मूल्य idलक्ष्य प्रपत्र तत्व की विशेषता है। idहमारे उदाहरण में, हमारे पास s: card-number, expiration-date, और के साथ तीन इनपुट हैं security-code। हम forलेबल में विशेषता जोड़ सकते हैं और उनके मान को संबंधित इनपुट आईडी पर सेट कर सकते हैं। आइए देखें कि यह कैसा दिखता है।

<form>
  <label for=”card-number”>Card Number</label>
  <input type=”text” id=”card-number” />
  <label for=”expiration-date”>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label for=”security-code”>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

कुछ बातों का ध्यान रखना चाहिए

विशेषता तत्व forपर होनी चाहिए <label>, इनपुट पर नहीं।
इनपुट तत्व में एक विशेषता होनी चाहिए । अभी भी अपनी विशेषता हो सकती है , लेकिन idयह यहाँ प्रासंगिक नहीं है।<label>id
लेबल और इनपुट के बीच का संबंध एक-से-एक है।

एआरआईए का उपयोग करना

ARIA विशेषताओं का एक शक्तिशाली समूह है जिसे तत्वों के नाम, स्थिति और भूमिका के बारे में सहायक तकनीकों को सूचित करने के लिए तत्वों में जोड़ा जा सकता है। हमारे मामले में, हम लेबल को इनपुट के साथ जोड़ने के लिए aria-labelledby विशेषता का उपयोग कर सकते हैं। आइए देखें कि यह कैसे काम करता है।

<form>
  <label id="card-number-label">Card Number</label>
  <input type="text" aria-labelledby="card-number-label" />
  <label id="expiration-date-label">Expiration Date</label>
  <input type="text" aria-labelledby="expiration-date-label"/>
  <label id="security-code-label">Security Code</label>
  <input type="text" aria-labelledby="security-code-label"/>
  <button type="submit" id="submit">Submit</button>
</form>

<form>
 <label id=”card-number-label”>Card Number</label>
 <label id=”card-number-instructions”>Enter the 16 digit number on the front of your card</label>
 <input type=”text” id=”card-number” aria-labelledby=”card-number-label card-number-instructions”/>
 ...
</form>

अब जबकि जेरेमी जिस समस्या का सामना कर रहा था, उसे हमने ठीक कर दिया है, आइए देखें कि वायलेट द्वारा उपयोग किए जा रहे पेज में क्या गलत हो रहा है।

कोड में वायलेट की समस्या

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

यहाँ समस्या के साथ हमारा कोड है।

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only”></button>
  <button type=”button” id=”cancel” class=”icon-only”></button>
</form>

ARIA (फिर से) का उपयोग करना

aria-labelअधिकांश HTML तत्वों को सीधे एक सुलभ नाम प्रदान करने के लिए विशेषता का उपयोग किया जा सकता है । इसका मूल्य वह पाठ है जो सहायक तकनीकों के संपर्क में आता है। यह मानवीय भाषा होनी चाहिए, क्योंकि स्क्रीन रीडर एरिया-लेबल टेक्स्ट की घोषणा करेंगे और वॉयस रिकग्निशन सॉफ़्टवेयर उपयोगकर्ता इसका उपयोग तत्व के साथ बातचीत करने के लिए करेंगे।

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only” aria-label=”Save”></button>
  <button type=”button” id=”cancel” class=”icon-only” aria-label=”Cancel”></button>
</form>

एरिया-लेबल के साथ बहुत सारी बारीकियां हैं लेकिन वे अपने स्वयं के लेख के लायक हैं। हमारे सरल उदाहरण के लिए, यह पर्याप्त होगा। बस इस बात का ध्यान रखें कि aria-labelledby aria-label when के लिए अति प्रयोग न करें or would do the same job.

हम अभी पहुंच योग्य हैं!

इन सरल परिवर्तनों के साथ जेरेमी और वायलेट दोनों ही अपने संबंधित पृष्ठों पर निर्धारित कार्य को पूरा कर सकते हैं। इन तकनीकों का उपयोग करके हमने यह सुनिश्चित किया है कि प्रपत्र में मौजूद तत्वों की सहायक तकनीकों द्वारा ठीक से पहचान की गई है, और यह जानकारी उन लोगों तक पहुंचाई गई है जो उनका उपयोग कर रहे हैं। उस पर एक Accessible™ स्टिकर लगाएं और इसे एक दिन बनाएं।

… लेकिन हम बेहतर कर सकते हैं

हमें कभी भी उस बिंदु पर नहीं रुकना चाहिए जहां हम डब्लुसीएजी 2.1 सफलता मानदंड के बगल में स्थित चेकबॉक्स पर टिक करते हैं। डब्ल्यूसीएजी वेब का उपयोग करते समय विकलांग लोगों के लिए बाधाओं को दूर करने के लिए एक आधार रेखा स्थापित करता है, लेकिन हमें हमेशा "उपयोग करने के लिए संभव" और "उपयोग करने में सुखद" लक्ष्य से बेहतर के लिए प्रयास करना चाहिए। अभिगम्यता और प्रयोज्यता साथ-साथ चलती हैं, और एक बहुत ही सरल तकनीक है जिसे हम फॉर्म भरने वाले उपयोगकर्ताओं के अनुभव को काफी बेहतर बनाने के लिए लागू कर सकते हैं।

हमारा नया व्यक्तित्व

आइए किसी ऐसे व्यक्ति की कल्पना करें जिसके बारे में आपने "पहुंच-योग्यता" शब्द सुनते ही तुरंत नहीं सोचा होगा।

मिया यूनिवर्सिटी ऑफ सेंट्रल फ्लोरिडा में एस्ट्रोफिजिक्स में डिग्री हासिल करने के लिए एक फ्रेशमैन हैं। वह बहुत मेधावी छात्रा और मेहनती कार्यकर्ता है। जब उसका कोई दोस्त अपनी अलमारी को अपडेट कर रहा होता है, तो विस्तार और गहरी फैशन समझ पर उसका ध्यान उसे जाने-माने विशेषज्ञ बनाता है। अपने छात्रावास में जाने और एक बॉक्स खोलने के दौरान उसने गलती से अपने प्रमुख हाथ की तर्जनी को बॉक्स कटर से काट दिया।

कुछ अक्षमताएं अस्थायी होती हैं। यहां तक कि एक छोटी सी चोट भी किसी की गति की सीमा को कम कर सकती है, जिससे वे कार्य करना अधिक कठिन हो जाता है जिन्हें उन्होंने दिया था। जालीदार पट्टी में अपनी कटी हुई उंगली के साथ, मिया को अपने फोन का इस तरह से उपयोग करना पड़ता है, जिसकी वह आदी नहीं है।

मिया की समस्या

"मुझे इस डॉक्टर की साइट पर अपनी स्वास्थ्य जानकारी दर्ज करने की आवश्यकता है, लेकिन मैं गलत चेकबॉक्स की जाँच करता रहता हूँ क्योंकि मेरा फ़ोन उपयोग करने में अजीब है!"

सबसे अच्छे समय में फोन पर चेक बॉक्स और रेडियो बटन जैसे क्षेत्रों के साथ बातचीत करना एक चुनौती हो सकती है, लेकिन एक सामान्य चोट के साथ भी यह जल्दी से हताशा में उतर सकता है। मिया को अपनी स्वास्थ्य पृष्ठभूमि प्रदान करने के लिए अपने द्वारा ली जाने वाली थायरॉयड दवाओं के बगल में बक्से की जांच करने की आवश्यकता है, लेकिन तत्व के छोटे आकार के कारण इसे अपने दूसरे हाथ या दूसरी उंगली से करना मुश्किल साबित हो रहा है।

कोड में मिया की समस्या

आइए चेक बॉक्स देखें। उचित लेबल संघों के साथ, उनके चेहरे पर वे सुलभ लगते हैं। लेकिन आइए करीब से देखें।

<form>
  <label for=”synthroid”>Synthroid</label>
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  <label for=”levothroid”>Levothroid</label>
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  <label for=”levoxyl”>Levoxyl</label>
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
</form>

एक बहुत ही सरल तकनीक है जिसका उपयोग हम तब कर सकते हैं जब प्रपत्र नियंत्रणों में उनके क्लिक करने योग्य या टैप करने योग्य क्षेत्र को बढ़ाने के लिए दृश्य लेबल होते हैं, जिसे लक्ष्य आकार भी कहा जाता है । हमें बस इतना करना है कि <label>एलिमेंट के अंदर फॉर्म कंट्रोल डालें। यदि प्रपत्र नियंत्रण किसी का चाइल्ड है <label>तो लेबल पर क्लिक या टैप करने से संबंधित प्रपत्र फ़ील्ड सक्रिय हो जाएगा। आइए अब उस बदलाव को देखें।

<form>
  <label for=”synthroid”>
  Synthroid
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  </label>
  <label for=”levothroid”>
  Levothroid
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  </label>
  <label for=”levoxyl”>
  Levoxyl
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
  </label>
</form>

इस विशेष तकनीक के बारे में कुछ विवरण

<label>यह मूल तत्व की विशेषता है । यदि आप फॉर्म फ़ील्ड को तत्वों के साथ लेबल कर रहे हैं <span>(और आपको नहीं होना चाहिए!) तो आपको यह कार्यक्षमता मुफ्त में नहीं मिलती है, और इसे मैन्युअल रूप से लागू करना होगा।
यह सुविधा केवल तभी लागू होती है जब <label><तत्व अपने फॉर्म फ़ील्ड को लपेटता है। उपयोग करने से aria-labelledbyस्वचालित रूप से आपको वही व्यवहार नहीं मिलता है।
तत्व <label>में अभी भी forविशेषता होनी चाहिए, और इसे idप्रपत्र फ़ील्ड पर विशेषता से मेल खाना चाहिए।
एक ही लेबल में एकाधिक इनपुट न लपेटें।

हमारे जाने से पहले

आइए मिलते हैं एक और शख्सियत से। फिर से, शायद वह नहीं जिसके बारे में आप अभिगम्यता पर विचार करते समय सोचेंगे।

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

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

क्योंकि दवा फॉर्म फील्ड पर लक्ष्य आकार बड़ा कर दिया गया था, बेन फॉर्म को आसानी से पूरा करने में सक्षम है। उसे गलत चेकबॉक्स क्लिक करने या गलत रेडियो बटन टैप करने के बारे में चिंता करने की ज़रूरत नहीं है। यह विचार कभी उसके दिमाग में नहीं आता। वह फॉर्म को पूरा करने और वेफल्स के बारे में सोचने में सक्षम है।

अब हम सार्वभौमिक रूप से डिजाइन कर रहे हैं !!

इस पोस्ट में हमने देखा है कि कैसे एक साधारण फॉर्म विकलांग लोगों के लिए बाधाएं पेश कर सकता है, और हम उन बाधाओं को दूर करने के लिए <लेबल> तत्व का उपयोग कैसे कर सकते हैं। हमने यह भी देखा है कि कैसे एक साधारण परिवर्तन विकलांग और विकलांग दोनों के लिए फॉर्म का उपयोग करना आसान बना सकता है। यह यूनिवर्सल डिजाइन का सार है। विकलांग लोगों की ज़रूरतों पर विचार करके, हम अपने ऐप्लिकेशन को सभी के लिए बेहतर बना सकते हैं.

पढ़ने के लिए आपका शुक्रिया। मुझे आशा है कि आपने कुछ नया सीखा है, या कुछ याद किया है जिसे आप भूल गए होंगे।