HTML5 ARIA क्या है?


249

HTML5 ARIA क्या है? मुझे समझ नहीं आ रहा है कि इसे कैसे लागू किया जाए।


4
ध्यान दें कि WAI-ARIA HTML5 से संबंधित है और इसकी आवश्यकता नहीं है, हालाँकि ARIA विशेषताओं को केवल HTML5 सत्यापनकर्ता द्वारा मान्य माना जाएगा, या जब ARIA विस्तारित DTD के साथ तुलना की जाएगी। हालाँकि, HTML5 ड्राफ्ट वर्तमान में कुछ WAI-ARIA निर्माणों को अस्वीकार करता है।
अलोहसी

मैंने इसे फेसबुक के html में देखा है।
सॉर्टर

जवाबों:


213

WAI-ARIA सुलभ वेब ऐप्स के लिए एक विशिष्ट परिभाषित समर्थन है। यह मार्कअप एक्सटेंशन (ज्यादातर एचटीएमएल 5 तत्वों पर विशेषताओं के रूप में) को परिभाषित करता है, जिसका उपयोग वेब ऐप डेवलपर द्वारा स्क्रीन रीडर जैसी सहायक तकनीकों के लिए विभिन्न तत्वों के शब्दार्थों के बारे में अतिरिक्त जानकारी प्रदान करने के लिए किया जा सकता है। बेशक, एआरआईए काम करने के लिए, मार्कअप की व्याख्या करने वाले HTTP उपयोगकर्ता एजेंट को ARIA का समर्थन करने की आवश्यकता है, लेकिन कल्पना इस तरह से बनाई गई है, जैसा कि डाउन-लेवल उपयोगकर्ता एजेंटों को ARIA- विशिष्ट मार्कअप को सुरक्षित रूप से प्रभावित किए बिना अनदेखा करने की अनुमति देता है। वेब ऐप की कार्यक्षमता।

यहाँ ARIA कल्पना से एक उदाहरण दिया गया है:

<ul role="menubar">

  <!-- Rule 2A: "File" label via aria-labelledby -->
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->
      <li role="menuitem" aria-haspopup="false">New</li>
      <li role="menuitem" aria-haspopup="false">Open…</li>
      ...
    </ul>
  </li>
  ...
</ul>

roleबाहरी <ul>तत्व पर विशेषता को नोट करें । यह विशेषता किसी भी तरह से प्रभावित नहीं करती है कि ब्राउज़र द्वारा मार्कअप को स्क्रीन पर कैसे प्रस्तुत किया जाता है; हालाँकि, जो ब्राउज़र ARIA का समर्थन करते हैं, वे प्रदान किए गए UI तत्व में OS- विशिष्ट पहुंच-योग्यता जानकारी जोड़ेंगे, ताकि स्क्रीन रीडर इसे मेनू के रूप में व्याख्या कर सके और अंत-उपयोगकर्ता के लिए पर्याप्त संदर्भ के साथ जोर से पढ़ सके (उदाहरण के लिए, एक स्पष्ट "मेनू" ऑडियो संकेत) और इसके साथ बातचीत करने में सक्षम है (उदाहरण के लिए, आवाज नेविगेशन)।


11
डेटा विशेषता और aria के बीच अंतर क्या है?
जैकमहनी

55
ariaपहुँच क्षमता के लिए विशेष रूप से है, और यादृच्छिक डेटा संग्रहीत करने के लिए उपयोग नहीं किया जाना चाहिए। dataयादृच्छिक डेटा के लिए एप्लिकेशन को नोड के साथ जुड़ने की आवश्यकता होती है।
फ्रैंकी पेनोव

2
बात का ध्यान रखें: role="menu"और "menuitem"= की तरह मेनू के साथ Apps (के लिए सही हैं सॉफ्टवेयर File > Openया Edit > Copy to clipboard। एक शास्त्रीय वेबसाइट यह शायद ठहरने के लिए बेहतर हमेशा की तरह पर है के लिए <ul>डिफ़ॉल्ट रूप से (= भूमिका सूची) के रूप में आप केवल अन्य वेबपृष्ठों के लिंक और कोई काम करता है की तरह प्रदान कर रहे हैं "सहेजें" या "कॉपी / पेस्ट करें"। यदि आप उपयोग कर रहे हैं, तो आपको अपने कीबोर्ड की तीर कुंजियों के साथrole="menu" मेनू को सामान्य सॉफ़्टवेयर / ऐप मेनू में
उफ़

62

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

WAI-ARIA एक अविश्वसनीय रूप से शक्तिशाली तकनीक है जो डेवलपर्स को नेत्रहीन समृद्ध उपयोगकर्ता इंटरफेस के उद्देश्य, राज्य और अन्य कार्यक्षमता का आसानी से वर्णन करने की अनुमति देता है - एक तरह से जिसे सहायक प्रौद्योगिकी द्वारा समझा जा सकता है। WAI-ARIA को अंततः HTML 5 विनिर्देश के वर्तमान कार्य मसौदे में एकीकृत किया गया है।

और अगर आप सोच रहे हैं कि WAI-ARIA क्या है, तो वही बात है।

कृपया ध्यान दें कि WAI-ARIA और ARIA एक ही चीज़ को संदर्भित करते हैं। हालाँकि, WAI-ARIA का उपयोग WAI में इसकी उत्पत्ति को स्वीकार करने के लिए अधिक सही है।

WAI = वेब अभिगम्यता पहल

इसके लुक से, ARIA का उपयोग सहायक तकनीकों और ज्यादातर स्क्रीन रीडिंग के लिए किया जाता है।

यदि आप इस लेख को पढ़ते हैं तो आपके अधिकांश संदेह साफ हो जाएंगे

http://www.w3.org/TR/aria-in-html/


23

यह क्या है?

WAI-ARIA का अर्थ है "वेब एक्सेसिबिलिटी इनिशिएटिव - एक्सेसिबल रिच इंटरनेट एप्लिकेशन" । यह किसी वेब साइट या वेब एप्लिकेशन की मदद के लिए सहायक तकनीकों को बढ़ाने में मदद करने के लिए विशेषताओं का एक सेट है, जैसे कि अंधे के लिए स्क्रीन रीडर, कुछ ऐसी चीजों की समझ बनाना जो HTML के मूल नहीं हैं। उजागर की गई जानकारी कुछ हद तक स्क्रीन रीडर के रूप में सरल हो सकती है जो एक लिंक या बटन को सक्रिय कर रही है या अधिक आइटम दिखाए गए हैं, विगेट्स को पूरे मेनू सिस्टम या पदानुक्रमित पेड़ के विचारों के रूप में जटिल हैं।

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

WAI-ARIA का एक कोना पत्थर भूमिका विशेषता है। यह सहायक तकनीक को बताने के लिए ब्राउज़र को बताता है कि जिस HTML तत्व का उपयोग किया गया है, वह वास्तव में उस तत्व का नाम नहीं है, जो कुछ और बताता है। हालांकि यह मूल रूप से केवल एक दिव्य तत्व है, यह दिव्य तत्व कंटेनर को ऑटो-पूर्ण आइटम की सूची में हो सकता है, इस स्थिति में "लिस्टबॉक्स" की भूमिका का उपयोग करना उचित होगा। इसी तरह, एक और div जो उस कंटेनर div का एक बच्चा है, और जिसमें एक एकल विकल्प आइटम है, उसे तब "विकल्प" की भूमिका मिलनी चाहिए। दो divs, लेकिन भूमिकाओं के माध्यम से, बिल्कुल अलग अर्थ। भूमिकाओं का उपयोग आमतौर पर डेस्कटॉप एप्लिकेशन समकक्षों के बाद किया जाता है।

इसके अपवाद दस्तावेज़ लैंडमार्क भूमिकाएँ हैं, जो प्रश्न में तत्व के वास्तविक अर्थ को नहीं बदलते हैं, लेकिन एक दस्तावेज़ में इस विशेष स्थान के बारे में जानकारी प्रदान करते हैं।

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

यह क्या नहीं है?

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

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

मुझे इसका उपयोग कब नहीं करना चाहिए?

हाँ, यह सही है, यह खंड पहले आता है! क्योंकि WAI-ARIA का उपयोग करने का पहला नियम है: इसका उपयोग तब तक न करें जब तक कि आपके पास बिल्कुल न हो! आपके पास कम WAI-ARIA, और जितना अधिक आप देशी HTML विजेट का उपयोग कर भरोसा कर सकते हैं, उतना बेहतर है! पालन ​​करने के लिए कुछ और नियम हैं, आप उन्हें यहां देख सकते हैं


13

ARIA क्या है?

ARIA उपयोगकर्ता इंटरफेस (UI) के निर्माण के लिए दस्तावेजों, HTML के लिए एक मार्कअप भाषा का उपयोग करने की पहुंच समस्या का समाधान करने के लिए एक तरीके के रूप में उभरा। HTML में दस्तावेज़ों (P, h3, UL, TABLE) से निपटने के लिए कई बेहतरीन सुविधाएँ शामिल हैं, लेकिन केवल मूल UI तत्व जैसे A, INPUT और BUTTON। विंडोज़ और अन्य ऑपरेटिंग सिस्टम एपीआई का समर्थन करते हैं जो यूआई नियंत्रण की कार्यक्षमता तक पहुंचने के लिए (सहायक प्रौद्योगिकी) एटी की अनुमति देते हैं। Internet Explorer और अन्य ब्राउज़र देशी HTML एलिमेंट्स को एक्सेसिबिलिटी API में मैप करते हैं, लेकिन HTML कंट्रोल डेस्कटॉप ऑपरेटिंग सिस्टम पर कॉमन कंट्रोल की तरह समृद्ध नहीं हैं, और आधुनिक वेब एप्लिकेशन के लिए पर्याप्त नहीं हैं। कस्टम कंट्रोल रिचर्स प्रदान करने के लिए html एलिमेंट्स का विस्तार कर सकते हैं आधुनिक वेब अनुप्रयोगों के लिए UI की आवश्यकता है। ARIA से पहले, ब्राउज़र के पास एक्सेसिबिलिटी API या AT में इस अतिरिक्त समृद्धि को उजागर करने का कोई तरीका नहीं था। इस मुद्दे का क्लासिक उदाहरण एक छवि के लिए एक क्लिक हैंडलर जोड़ रहा है। यह बनाता है जो एक माउस उपयोगकर्ता के लिए एक क्लिक करने योग्य बटन प्रतीत होता है, लेकिन अभी भी एक कीबोर्ड या एटी उपयोगकर्ता के लिए एक छवि है।

समाधान उन विशेषताओं का एक समूह तैयार करना था जो डेवलपर्स को UI शब्दार्थ के साथ HTML का विस्तार करने की अनुमति देता है। HTML तत्वों के एक समूह के लिए ARIA शब्द जिसमें कस्टम कार्यक्षमता है और इन कार्यों को एक्सेसिबिलिटी API में मैप करने के लिए ARIA विशेषताओं का उपयोग एक “विजेट” है। ARIA लेखकों को सामग्री की भूमिका का दस्तावेजीकरण करने का एक साधन भी प्रदान करता है, जो बदले में एटी को ऐसी सामग्री के लिए वैकल्पिक नेविगेशन तंत्र का निर्माण करने की अनुमति देता है जो पूर्ण पाठ को पढ़ने या लिंक की सूची पर केवल पुनरावृत्ति करने की तुलना में उपयोग करने के लिए बहुत आसान है।

यह याद रखना महत्वपूर्ण है कि साधारण मामलों में, मूल HTML नियंत्रणों का उपयोग करना और ARIA का उपयोग करने के बजाय उन्हें स्टाइल करना अधिक पसंद किया जाता है। यदि आपके पास नहीं है, तो पहियों, या चेकबॉक्स को सुदृढ़ न करें।

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


7

मैंने ARIA के संबंध में कुछ और सवाल किए। लेकिन यह सामग्री इस प्रश्न के लिए अधिक आशाजनक है। उन्हें साझा करना चाहते हैं

ARIA क्या है?

यदि आप अपनी वेबसाइट को विभिन्न ब्राउज़िंग आदतों और शारीरिक अक्षमताओं वाले उपयोगकर्ताओं के लिए सुलभ बनाने में प्रयास करते हैं, तो आप संभवतः भूमिका और aria- * विशेषताओं को पहचान लेंगे। WAI-ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशन) आपकी गतिशील वेब सामग्री और अनुप्रयोगों को परिभाषित करने के तरीके प्रदान करने की एक विधि है ताकि विकलांग लोग पहचान कर सकें और इसके साथ सफलतापूर्वक संपर्क कर सकें। यह उन भूमिकाओं के माध्यम से किया जाता है जो दस्तावेज़ या एप्लिकेशन की संरचना को परिभाषित करते हैं, या aria के माध्यम से- * एक विजेट-भूमिका, संबंध, राज्य या संपत्ति को परिभाषित करने वाले गुण।

HTML5 अनुप्रयोगों को अधिक सुलभ बनाने के लिए विनिर्देशों में ARIA उपयोग की सिफारिश की जाती है। सिमेंटिक एचटीएमएल 5 तत्वों का उपयोग करते समय, आपको उनकी संबंधित भूमिका निर्धारित करनी चाहिए।

और ARIA लाइव के लिए यह ट्यूब वीडियो देखें ।


छोटा सुधार: सिमेंटिक एचटीएमएल 5 तत्वों का उपयोग करते समय, आपको केवल उनकी संबंधित भूमिका निर्धारित करनी चाहिए यदि आपके द्वारा चुने गए तत्व के शब्दार्थ पर्याप्त जानकारी प्रदान नहीं करते हैं। दूसरे शब्दों में, यदि आपके पास एक नव तत्व है, तो भूमिका = "नेविगेशन" को जोड़ने की कोई आवश्यकता नहीं है, क्योंकि तत्व की पसंद से भूमिका पहले से ही स्पष्ट है। लेकिन अगर आपके पास साइट को खोजने के लिए एक इनपुट तत्व है, तो आपको भूमिका = "खोज" जोड़ना चाहिए क्योंकि इनपुट तत्वों का उपयोग खोज के अलावा कई चीजों के लिए किया जाता है, और यह उस विशिष्ट इनपुट को खोज भूमिका के रूप में चिह्नित करता है।
ब्रेननियॉन्ग
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.