HTML 'हिडन' और 'aria-hidden' विशेषताओं में क्या अंतर है?

Question

मैं कोणीय सामग्री के साथ काम करते समय सभी में aria विशेषता देख रहा हूँ। क्या कोई मुझे समझा सकता है, अरिया उपसर्ग का मतलब क्या है? लेकिन सबसे महत्वपूर्ण बात यह है कि जो मैं समझने की कोशिश कर रहा हूं, वह अंतर aria-hiddenऔर hiddenविशेषता है।

Comments

मुझे यहाँ कुछ स्पष्टीकरण मिला: paciellogroup.com/blog/2012/05/…

— अब्दुल

Answer 1

ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशन) विकलांग लोगों के लिए वेब सामग्री और वेब एप्लिकेशन को अधिक सुलभ बनाने का एक तरीका निर्धारित करता है।

hiddenविशेषता एचटीएमएल 5 में नया है और बताता है कि ब्राउज़र के तत्व को प्रदर्शित करने के लिए नहीं। aria-hiddenसंपत्ति बताता स्क्रीन पाठकों अगर वे तत्व की उपेक्षा करना चाहिए। अधिक जानकारी के लिए w3 डॉक्स पर एक नज़र डालें:

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

इन मानकों का उपयोग करने से अक्षम लोगों के लिए वेब का उपयोग करना आसान हो सकता है।

Comments

तो अगर आप सिर्फ छिपी हुई विशेषता का उपयोग करते हैं, तो स्क्रीन रीडर अभी भी पढ़ेगा?

— डैनियल कोबे

सही बात। hiddenहर किसी के लिए छिपा हुआ है। aria-hiddenस्क्रीन पाठकों और इसी तरह के उपकरणों के लिए छिपा मतलब है। यह उन घटकों के लिए उपयोगी है, जो शुद्ध रूप से स्वरूपण के लिए उपयोग किए जाते हैं और उदाहरण के लिए कोई वास्तविक सामग्री नहीं होती है।

— आंद्रेई बायरसन

@ AndreiBârsan @DanielKobe मुझे लगता है कि आंद्रेई का मतलब "गलत है।" (उनकी टिप्पणी के बाकी तथ्यात्मक है।) hiddenस्क्रीन रीडर को टैग की सामग्री तक पहुंचने से रोकना चाहिए।

— eenblam

आपका उत्तर aria-hiddenसही है; हालाँकि, आपने कहा कि इससे hiddenअलग करने के बारे में कुछ भी नहीं है aria-hidden। यह दुर्भाग्य से सबसे अच्छा जवाब है। कृपया अपने जवाबों पर अधिक ध्यान दें।

— सहकर्मी

आपका उत्तर विशेषताओं के प्रभावों को बताता है , लेकिन उनके अर्थ को नहीं । आप एक्सेसिबिलिटी ट्री या किसी एलिमेंट की टेम्पोरल प्रासंगिकता के बारे में कुछ नहीं बताते हैं। अधिक जानकारी के लिए चश्मा पढ़ें। [एचटीएमएल ५.२ , एआरआईए १.१ ]

— चेरवे

Answer 2

एक छिपी हुई विशेषता एक बूलियन विशेषता (सच्चा / गलत) है। जब इस विशेषता का उपयोग किसी तत्व पर किया जाता है, तो यह उस तत्व की सभी प्रासंगिकता को हटा देता है। जब कोई उपयोगकर्ता html पृष्ठ देखता है, तो छिपी हुई विशेषता वाले तत्व दिखाई नहीं देने चाहिए।

उदाहरण:

    <p hidden>You can't see this</p>

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

उदाहरण:

    <p aria-hidden="true">You can't see this</p>

इस पर एक नजर । इसे आपके सभी सवालों का जवाब देना चाहिए।

नोट: ARIA का अर्थ है एक्सेसिबल रिच इंटरनेट एप्लिकेशन

स्रोत: Paciello समूह

Comments

यह पूरी तरह से सही नहीं है (यहां तक ​​कि आधिकारिक दस्तावेज यहां थोड़ा धुंधला है)। एक तत्व aria-hidden="true"अभी भी ब्राउज़र में दिखाई दे रहा है, लेकिन स्क्रीन टूल जैसे एक्सेसिबिलिटी टूल के लिए अदृश्य होगा।

— आंद्रेई बायरसन

aria-hiddenपहुँच उपकरण के साथ आपकी वेबसाइट का उपयोग करने वाले लोगों से तत्व को छिपाने के लिए उपयोग किया जाता है।

— ल्यूक ब्राउन

Answer 3

शब्दार्थ भेद

HTML 5.2 के अनुसार :

जब एक तत्व पर निर्दिष्ट किया जाता है, तो [ hiddenविशेषता] इंगित करता है कि तत्व अभी तक नहीं है, या अब नहीं है, सीधे पेज की वर्तमान स्थिति के लिए प्रासंगिक है, या इसका उपयोग पृष्ठ के अन्य भागों द्वारा पुन: उपयोग की जाने वाली सामग्री को घोषित करने के लिए किया जा रहा है उपयोगकर्ता द्वारा सीधे एक्सेस किए जाने का विरोध किया।

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

दूसरी ओर, एआरआईए 1.1 कहता है:

[ aria-hiddenराज्य] इंगित करता है कि एक तत्व पहुंच एपीआई के संपर्क में है या नहीं।

दूसरे शब्दों में, एक्सेसिबिलिटी ट्रीaria-hidden="true" से उन तत्वों को हटा दिया जाता है , जिन्हें सबसे अधिक सहायक तकनीक सम्मान देती है, और जिन तत्वों के साथ निश्चित रूप से पेड़ को उजागर किया जाएगा। विशेषता के बिना तत्व "अपरिभाषित (डिफ़ॉल्ट)" स्थिति में हैं, जिसका अर्थ है कि उपयोगकर्ता एजेंटों को इसके प्रतिपादन के आधार पर पेड़ को उजागर करना चाहिए। उदाहरण के लिए, एक उपयोगकर्ता एजेंट इसे हटाने का फैसला कर सकता है यदि इसका पाठ रंग इसकी पृष्ठभूमि रंग से मेल खाता है।aria-hidden="false"aria-hidden

अब हम शब्दार्थ की तुलना करते हैं। यह उपयोग करने के लिए उपयुक्त है hidden, लेकिन नहीं aria-hidden , एक ऐसे तत्व के लिए जो अभी तक "अस्थायी रूप से प्रासंगिक" नहीं है, लेकिन यह भविष्य में प्रासंगिक हो सकता है (जिस स्थिति में आप hiddenविशेषता को हटाने के लिए गतिशील स्क्रिप्ट का उपयोग करेंगे )। इसके विपरीत, यह उपयोग करने के लिए उपयुक्त है aria-hidden, लेकिन ऐसा नहीं है hidden, जो ऐसे तत्व पर है जो हमेशा प्रासंगिक होता है, लेकिन जिसके साथ आप पहुँच एपीआई को अव्यवस्थित नहीं करना चाहते हैं; ऐसे तत्वों में "दृश्य स्वभाव" शामिल हो सकते हैं, जैसे आइकन और / या इमेजरी जो उपभोग करने के लिए उपयोगकर्ता के लिए आवश्यक नहीं हैं।

प्रभावी अंतर

अर्थ विज्ञान उम्मीद के मुताबिक है प्रभाव ब्राउज़रों / उपयोगकर्ता एजेंटों में। मैं अंतर करने का कारण यह है कि उपयोगकर्ता एजेंट व्यवहार की सिफारिश की जाती है , लेकिन विनिर्देशों द्वारा आवश्यक नहीं है ।

hiddenविशेषता से एक तत्व छुपाना चाहिए सभी प्रिंटर और स्क्रीन रीडर सहित प्रस्तुतियों, (यह मानते हुए इन उपकरणों का सम्मान एचटीएमएल चश्मा)। यदि आप एक्सेसिबिलिटी ट्री के साथ-साथ विजुअल मीडिया से एक तत्व हटाना चाहते हैं , hiddenतो यह ट्रिक करेगा। हालाँकि, hidden सिर्फ इसलिए प्रयोग न करें क्योंकि आप यह प्रभाव चाहते हैं। अपने आप से पूछें कि hiddenक्या शब्दार्थ पहले सही है (ऊपर देखें)। यदि hiddenशब्दार्थ रूप से सही नहीं है, लेकिन आप अभी भी तत्व को नेत्रहीन रूप से छिपाना चाहते हैं, तो आप सीएसएस जैसी अन्य तकनीकों का उपयोग कर सकते हैं।

aria-hidden="true"एक्सेस-ट्री के संपर्क में नहीं आने वाले तत्व , उदाहरण के लिए, स्क्रीन रीडर उन्हें घोषित नहीं करेंगे। इस तकनीक का उपयोग सावधानी से किया जाना चाहिए, क्योंकि यह विभिन्न उपयोगकर्ताओं को अलग-अलग अनुभव प्रदान करेगा: सुलभ उपयोगकर्ता एजेंट उन्हें घोषित / रेंडर नहीं करेंगे, लेकिन वे अभी भी दृश्य एजेंटों पर प्रदान किए जाते हैं। सही तरीके से किए जाने पर यह अच्छी बात हो सकती है, लेकिन इसमें गाली देने की क्षमता होती है।

सिंथेटिक अंतर

अंत में, दो विशेषताओं के बीच के सिंटैक्स में अंतर है।

hiddenएक बूलियन विशेषता है , जिसका अर्थ है कि यदि यह विशेषता मौजूद है तो यह सत्य है - चाहे इसका कोई भी मूल्य हो - और यदि विशेषता अनुपस्थित है तो यह गलत है। सच्चे मामले के लिए, सबसे अच्छा अभ्यास या तो बिना किसी मूल्य का उपयोग करना है ( <div hidden>...</div>), या रिक्त स्ट्रिंग मान ( <div hidden="">...</div>)। मैं अनुशंसा नहीं करूंगा hidden="true"क्योंकि आपके कोड को पढ़ने / अपडेट करने वाले hidden="false"को पता चल सकता है कि इसका विपरीत प्रभाव होगा, जो कि बस गलत है।

aria-hidden, इसके विपरीत, एक सीमित विशेषता है , जो मूल्यों की एक सीमित सूची की अनुमति देता है। यदि aria-hiddenविशेषता मौजूद है, अपने मूल्य होना चाहिए या तो "true"या "false"। यदि आप "अपरिभाषित (डिफ़ॉल्ट)" स्थिति चाहते हैं, तो विशेषता को पूरी तरह से हटा दें।

---

आगे पढ़े: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

Comments

पैकिएलो ग्रुप, 2012 की यह पोस्ट कहती है: "aria-hidden = false किसी भी ब्राउज़र में मैप नहीं किया गया है जो aria-hidden का समर्थन करता है, इस प्रकार इसके उपयोग का कोई अर्थ नहीं है या दूसरे शब्दों में इसका अनुपस्थिति के समान अर्थ है।" यकीन नहीं है कि अगर यह अभी भी मामला है, लेकिन सावधानी के रूप में जोड़ना। मुझे अपने CSS से अलग मेरे a11y व्यू स्टेट्स का वर्णन करना अच्छा लगेगा, लेकिन निश्चित रूप से यह संभव नहीं है कि यह aria-hidden के साथ संभव हो। डेवलपर

— .paciellogroup.com

Answer 4

aria- झूठ को छिपाना और उस पर toggling element.show () मेरे लिए काम करना।

जैसे

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

और जब वापस छिप गया

$(span).attr('aria-hidden', 'true');
$(span).hide();