Aria- लेबल क्या है और मुझे इसका उपयोग कैसे करना चाहिए?

Question

कुछ घंटे पहले मैंने aria- लेबल विशेषता के बारे में पढ़ा , जो:

एक स्ट्रिंग मान को परिभाषित करता है जो वर्तमान तत्व को लेबल करता है।

लेकिन मेरी राय में यह है कि titleविशेषता क्या करना चाहिए था। मैंने कुछ उदाहरण और स्पष्टीकरण प्राप्त करने के लिए मोज़िला डेवलपर नेटवर्क में आगे देखा , लेकिन केवल एक चीज मुझे मिली

<button aria-label="Close" onclick="myDialog.close()">X</button>

जो मुझे कोई लेबल प्रदान नहीं करता है (इसलिए मुझे लगता है कि मैंने इस विचार को गलत समझा)। मैंने इसे यहाँ jsfiddle में आज़माया ।

तो मेरा सवाल है: मुझे इसकी आवश्यकता क्यों है aria-labelऔर मुझे इसका उपयोग कैसे करना चाहिए?

Comments

आपके द्वारा लिंक किए गए संसाधन को देखकर ऐसा लगता है कि aria-labelइसका उपयोग किया जा सकता है यदि आप शीर्षक विशेषता द्वारा प्रदान किए गए टूलटिप को नहीं दिखाना चाहते हैं: उन मामलों में जहां एक दृश्य लेबल या दृश्य टूलटिप अवांछनीय है, लेखकों ने सुलभ नाम सेट किया है

— aria-

fyi ARIA = एक्सेसिबल रिच इंटरनेट एप्लीकेशन

— एरिक डिसूजा

क्या किसी को पता है कि अगर यह अधिक उपयुक्त वर्णनात्मक <h1> पाठ के लिए aria- लेबल का उपयोग करना उचित है जब <h1> तत्व के अंदर वास्तविक दृश्य पाठ बहुत संक्षिप्त है, और यह पूर्ण पाठ दृश्यमान नहीं है? इस थ्रेड में उदाहरणों में, एक लेबल का उपयोग किया जा सकता है। लेकिन लेबल शीर्षकों पर लागू नहीं होते हैं, यही वजह है कि मैं पूछता हूं

— हेलोवर्ल्ड

एकमात्र उपयुक्त समान चीज़ जो आप पूछ रहे हैं, वह है "लॉन्गडेस्क" संपत्ति (केवल छवियों के लिए) जिसे अधिक जानकारी की आवश्यकता है - कठबोली की कल्पना पाठ के लिए एक होगी क्योंकि यह हमेशा वर्णनात्मक होना चाहिए वैसे भी मुझे डर लगता है। - @ हेलोवर्ल्ड

— जेमी पैटर्सन

Answer 1

यह सहायक तकनीक (जैसे स्क्रीन रीडर) की मदद करने के लिए डिज़ाइन किया गया एक विशेषता है जो एक अन्यथा गुमनाम HTML तत्व के लिए एक लेबल संलग्न करता है।

तो वहाँ <label>तत्व है:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

<label>स्पष्ट रूप में उनके नाम टाइप करने के लिए उपयोगकर्ता बताता है inputबॉक्स जहां id="fmUserName"।

aria-labelबहुत कुछ वही करता है, लेकिन यह उन मामलों के लिए है जहां labelस्क्रीन पर होना व्यावहारिक या वांछनीय नहीं है । MDN उदाहरण लें :

<button aria-label="Close" onclick="myDialog.close()">X</button>`

अधिकांश लोग नेत्रहीन अनुमान लगाने में सक्षम होंगे कि यह बटन संवाद को बंद कर देगा। सहायक तकनीक का उपयोग करने वाला एक नेत्रहीन व्यक्ति शायद "X" को जोर से पढ़ सकता है, जो दृश्य सुराग के बिना ज्यादा मायने नहीं रखता है। aria-labelस्पष्ट रूप से उन्हें बताता है कि बटन क्या करेगा।

Comments

स्पष्टीकरण के लिए धन्यवाद, लेकिन वह करीब कैसे सुनेंगे? इसे सुनने के लिए मैं अपने ब्राउज़र (क्रोम) में क्या कर सकता हूं? और एक अंधा व्यक्ति इस बटन का चयन कैसे कर सकता है अगर उसे कोई पता नहीं है कि वह कहां है?

— साल्वाडोर डाली

मुझे लगता है कि ChromeVox जैसा एक्सटेंशन शुरू करने के लिए एक अच्छी जगह होगी? हालांकि मैंने इसका इस्तेमाल कभी नहीं किया। वे उपयोगकर्ता को स्क्रीन जोर से पढ़कर काम करते हैं, HTML से संकेत लेते हैं (जैसे कि एक h1से अधिक पर जोर दिया जाना चाहिए p, aस्पष्ट रूप से एक लिंक , फ़ॉर्म है `कहीं न कहीं जानकारी दर्ज करने के लिए इंगित करता है, aria-*विशेषताएँ आगे क्या तत्व करते हैं, आदि का सुराग देते हैं) ।

— ऑली हॉजसन 13

इस विशेष मामले में, मैं इसे एक शीर्षक में जोड़ूंगा attribute। उपयोगकर्ताओं को 'देखकर' के लिए एक टूलटिप दिखाने में कोई नुकसान नहीं है, जब वे एक्स मंडराना

— GolezTrol

ChromeVox के अलावा, वहाँ NVDA है । दोनों को स्थापित करना और शुरू करना काफी आसान है और मास्टर करना काफी कठिन है।

— ivarni

@ साल्वाडोरदाली - सिर्फ जानकारी के लिए। मोबाइल ब्लाइंड में एंड्रॉइड मोबाइल के लिए एक्सेसिबिलिटी टूल को सक्षम कर सकते हैं जैसे कि TalkBack और iOS मोबाइल के लिए यह VoiceOver है। इसके इस्तेमाल से पेज लाइन से रीड लाइन हो जाता है।

— राहुल जे। राणे

Answer 2

आपके द्वारा दिए गए उदाहरण में, आप पूरी तरह से सही हैं, आपको शीर्षक विशेषता सेट करना होगा।

यदि aria-labelसहायक तकनीकों (जैसे स्क्रीन रीडर) द्वारा उपयोग किया जाने वाला एक उपकरण है, तो यह ब्राउज़र पर मूल रूप से समर्थित नहीं है और उन पर कोई प्रभाव नहीं पड़ता है। यह WCAG (स्क्रीन रीडर उपयोगकर्ताओं को छोड़कर) द्वारा लक्षित अधिकांश लोगों के लिए किसी भी मदद का नहीं होगा, उदाहरण के लिए बुद्धि विकलांग व्यक्ति।

"X" बटन के नेतृत्व में कार्रवाई की जानकारी देने के लिए पर्याप्त नहीं है (बिना किसी कंप्यूटर ज्ञान वाले व्यक्ति के बारे में सोचें)। इसका मतलब हो सकता है "क्लोज़", "डिलीट", "कैंसिल", "कम", एक अजीब क्रॉस, एक डूडल, कुछ भी नहीं।

इस तथ्य के बावजूद कि W3C इसके aria-labelबजाय titleयहां की विशेषता को बढ़ावा देता है: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 एक समान उदाहरण में, आप देख सकते हैं कि प्रौद्योगिकी समर्थन में मानक ब्राउज़र शामिल नहीं हैं: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

वास्तव में aria-label, इस सटीक स्थिति का उपयोग किसी कार्रवाई को अधिक संदर्भ देने के लिए किया जा सकता है:

उदाहरण के लिए, नेत्रहीन लोग पॉपअप को अच्छी दृष्टि वाले लोगों की तरह नहीं समझते हैं, यह संदर्भ के बदलाव की तरह है। "बैक टू द पेज" स्क्रीन रीडर के लिए अधिक सुविधाजनक विकल्प होगा, जब "क्लोज़" बिना स्क्रीन रीडर वाले किसी व्यक्ति के लिए अधिक महत्वपूर्ण होगा।

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>

Answer 3

यदि आप जानना चाहते हैं कि aria-labelआपको व्यावहारिक रूप से कैसे मदद मिलती है .. तो चरणों का पालन करें ... आप इसे अपने आप से प्राप्त करेंगे ..

एक HTML पेज बनाएँ, जिसमें नीचे कोड हो

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

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

एक बार इंस्टॉलेशन के साथ, अपने कानों में हेडफ़ोन लगाएं, html पेज खोलें और एक-एक करके दोनों बटन (टैब दबाकर) पर ध्यान केंद्रित करें .. और आप सुन सकते हैं .. ध्यान केंद्रित करते हुए first x button.. केवल आपको बताएंगे x button.. लेकिन के मामले में second x button.. आप back to the page buttonकेवल सुनेंगे ..

मुझे आशा है कि अब आप इसे अच्छी तरह से प्राप्त कर लेंगे !!

Comments

एक महत्वपूर्ण बिंदु यह है कि titleविशेषता को अनदेखा किया जाता है, यहां तक ​​कि पहले बटन पर भी। अधिक जानकारी: Silktide.com/…

— स्फिंक्सएक्स

क्या यह अभी भी मामला है? फिर भी बेहतर प्रदान करने के लिए या तो title और aria-label ?

— कामाफेदर

जैसा मुझे चाहिए था यह बिल्कुल वैसा ही है। मैं सिर्फ यह देखना और सुनना चाहता था कि यह वास्तविक दुनिया में कैसे काम करता है और chromevoxएक आकर्षण की तरह काम करता है और एरिया-लैब्डब्बी खेतों को पढ़ेगा। धन्यवाद।

— राज राजेश्वर सिंह राठौर

Answer 4

शर्त:

Aria का उपयोग दृष्टिहीन उपयोगकर्ताओं के उपयोगकर्ता अनुभव को बेहतर बनाने के लिए किया जाता है। दृष्टिबाधित यूजर्स हालांकि स्क्रीन रीडर सॉफ्टवेयर जैसे कि JAWS, NVDA, .. का उपयोग करके नेविगेट करते हैं, जबकि एप्लिकेशन के माध्यम से नेविगेट करते हुए, स्क्रीन रीडर सॉफ्टवेयर उपयोगकर्ताओं के लिए सामग्री की घोषणा करता है। Aria का उपयोग कोड में सामग्री जोड़ने के लिए किया जा सकता है जो स्क्रीन रीडर उपयोगकर्ताओं को नियंत्रण की भूमिका, स्थिति, लेबल और उद्देश्य को समझने में मदद करता है

आरिया नेत्रहीन कुछ भी नहीं बदलता है। (आरिया डिजाइनरों से भी डरती है)।

aria-लेबल

aria- लेबल विशेषता स्क्रीन रीडर उपयोगकर्ताओं के लिए लेबल संवाद करने के लिए प्रयोग किया जाता है। आमतौर पर खोज इनपुट क्षेत्र में दृश्य लेबल (डिजाइनरों के लिए धन्यवाद) नहीं होता है। aria- लेबल का उपयोग स्क्रीन रीडर उपयोगकर्ताओं को नियंत्रण के लेबल को संप्रेषित करने के लिए किया जा सकता है

कैसे इस्तेमाल करे:

<input type="edit" aria-label="search" placeholder="search">

अनुप्रयोग में कोई दृश्य परिवर्तन नहीं है। लेकिन स्क्रीन पाठक नियंत्रण के उद्देश्य को समझ सकते हैं

aria-labelledby

Aria- लेबल और aria-labelledby दोनों का उपयोग लेबल को संप्रेषित करने के लिए किया जाता है। लेकिन aria-labelledby का उपयोग पृष्ठ में पहले से मौजूद किसी भी लेबल को संदर्भित करने के लिए किया जा सकता है जबकि aria- लेबल का उपयोग उस लेबल को संप्रेषित करने के लिए किया जाता है जिसे मैंने नेत्रहीन प्रदर्शित नहीं किया है

दृष्टिकोण 1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

दृष्टिकोण 2:

aria-labelledby का उपयोग स्क्रीन रीडर उपयोगकर्ताओं के लिए दो लेबल को संयोजित करने के लिए भी किया जा सकता है

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">

Answer 5

titleजब माउस तत्व मँडरा रहा है विशेषता एक टूलटिप प्रदर्शित करता है। हालांकि यह एक महान जोड़ है, यह उन लोगों की मदद नहीं करता है जो माउस का उपयोग नहीं कर सकते हैं (गतिशीलता अक्षमताओं के कारण) या वे लोग जो इस टूलटिप को नहीं देख सकते हैं (जैसे: दृश्य विकलांग लोग या स्क्रीन रीडर का उपयोग करने वाले लोग)।

इस प्रकार, यहाँ पर मनमोहक दृष्टिकोण सभी उपयोगकर्ताओं की सेवा के लिए होगा। मैं दोनों titleऔर aria-labelविशेषताओं (विभिन्न प्रकार के उपयोगकर्ताओं और वेब के विभिन्न प्रकार के उपयोग की सेवा) को जोड़ूंगा।

यहाँ एक अच्छा लेख है जो गहराई से बताता aria-labelहै