पहले से लेबल इनपुट तत्वों पर "aria-labelledby" का उपयोग करने का उद्देश्य?


84

कई ARIA प्रदर्शन वेबसाइटें जैसे कोड का उपयोग करती हैं:

<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">


लेकिन aria-labelledbyइस मामले में विशेषता का उपयोग करने का उद्देश्य क्या है ? inputतत्व पहले से ही द्वारा चिह्नित किया गया है labelतत्व है जो उपयोग कर रहा है forविशेषता, है ना?



8
धन्यवाद @ सरफराज हालाँकि, वह पृष्ठ पहले से ही लेबल किए गए इनपुट तत्वों पर इस तरह के उपयोग के उद्देश्य को नहीं बताता है।
इयान वाई।

जवाबों:


69

मोज़िला डेवलपर पृष्ठों पर इसके उपयोग के कुछ अच्छे उदाहरण हैं । शायद उनके उदाहरणों में सबसे अच्छा वह है जहाँ इसका उपयोग मूल मेनू आइटम के साथ पॉपअप मेनू को जोड़ने के लिए किया जाता है - यह पृष्ठ में उदाहरण 7 है:

<div role="menubar">  
    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>  
    <div role="menu" aria-labelledby="fileMenu">  
        <div role="menuitem">Open</div>  
        <div role="menuitem">Save</div>  
       <div role="menuitem">Save as ...</div>  
       ...  
    </div>  
    ...  

ARIA विशेषताएँ एक्सेसिबल रिच इंटरनेट अनुप्रयोगों के निर्माण में सबसे बड़े उपयोग की तरह हैं : जब तक आप मानक सिमेंटिक HTML से चिपके रहते हैं - मानकों के लेबल के साथ फ़ॉर्म का उपयोग करना - आपको इसकी बिल्कुल भी आवश्यकता नहीं होनी चाहिए: इसलिए इसका उपयोग करने का कोई कारण नहीं है एक LABEL / INPUT जोड़ी। लेकिन अगर आप स्क्रैच (डीआईवाई और अन्य निम्न स्तर के तत्वों के साथ जावास्क्रिप्ट से जोड़कर इंटरएक्टिविटी जोड़ रहे हैं) से "समृद्ध यूआई" का निर्माण कर रहे हैं, तो यह एक स्क्रीनरीडर को यह जानने के लिए आवश्यक है कि उच्च-स्तरीय आशय क्या है।


11
धन्यवाद @BrendanMcK आपने जो कहा वह सच है। मैंने किसी ऐसे व्यक्ति से पूछा था जो ARIA के लिए काम करता है और उसने भी कहा कि इस मामले में aria-labelledby का उपयोग करने की कोई आवश्यकता नहीं है। <Input> s को लेबल करने के लिए, उन्होंने कहा कि इसका उपयोग केवल तब करें जब हमें कई <लेबल> s के साथ <इनपुट> लेबल करने की आवश्यकता हो। यहाँ एक उदाहरण उन्होंने दिया है: html5accessibility.com/tests/mulitple-labels.html
इयान वाई।

1
विशेषता के माध्यम से कई संदर्भ बनाकर एक से अधिक LABEL एक ही नियंत्रण से संबद्ध हो सकते हैं । ठीक है, WAVE / WebAIM इसे पसंद नहीं करता है, और यह UA समर्थन के साथ एक समस्या है । लेकिन उनका सुझाव सिर्फ अजीब है , और मुझे नहीं लगता कि इसका कोई वास्तविक फायदा है। कम से कम IE <= 8 aria-labelledby में कई आईडी का समर्थन नहीं करता है
sourcejedi

1
यह लिंक यहां अवश्य होना चाहिए: developer.mozilla.org/en-US/docs/Accessibility/ARIA
फेसुंडो कैमिस्टियर

5

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


1
क्या यह तत्व को फोकस करता है जब विशेषता के लिए क्लिक किया जाता है? मैं नहीं अनुमान लगा रहा हूँ
डोमिनिक

3
पूरी तरह से झूठ है। Aria विशेषताएँ अन्य विशेषताओं को प्रतिस्थापित करने के लिए नहीं हैं, क्योंकि उनका एकमात्र उद्देश्य तत्वों को अधिक सुलभ बनाने में मदद करना है। किसी भी ऐरिया विशेषता के कारण तत्व ध्यान देने योग्य नहीं होने चाहिए।
Gust van de Wal

1
सामान्य अभ्यास (दुख की बात है) वर्तमान में अभी भी मेरी राय में सच नहीं है। सर्वोत्तम अभ्यास, एक बेहतर विकल्प हो सकता है। हो सकता है कि भविष्य में, जब यह आम बात हो कि अत्यधिक उन्नत AI इंसानों के बजाय html लिखता है :)
माइकल
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.