menu - नेविगेशन बार / मेनू के लिए अनुशंसित WAI-ARIA कार्यान्वयन




3 Answers

एक संभावित कार्यान्वयन होगा:

एचटीएमएल संरचना:

<div> <!-- Outer wrapper -->
  <ul> <!-- Main navigation bar container -->
    <li> <!-- First-level item without submenu -->
      <a> <!-- Destination URL -->
      </a>
    </li>
    <li> <!-- First-level item with submenu -->
      <a> <!-- Destination URL -->
      </a>
      <ul> <!-- Second-level menu container -->
        <li> <!-- Second-level item -->
          <a>
          </a> <!-- Destination URL -->
        </li>
      </ul>
    </li>
  </ul>
</div>

भूमिका:

  • बाहरी आवरण <div> लिए भूमिका = "नेविगेशन"
  • <ul> नेविगेशन बार कंटेनर के लिए role = "menubar"
  • दूसरे स्तर के <ul> कंटेनर के लिए भूमिका = "मेनू"
  • प्रथम- और द्वितीय स्तर के <li> मेनू आइटम के लिए भूमिका = "प्रस्तुति" (वे उजागर किए गए मेन्यूबर संरचना में आवश्यक नहीं हैं)
  • प्रथम- और द्वितीय स्तर के <a> मेनू आइटम के लिए भूमिका = "मेन्यूटेम"

गुण:

  • प्रथम-स्तर के <a> मेनू आइटम के लिए aria-haspopup = "true" सबमेनू है
  • दूसरे स्तर के <ul> कंटेनरों के लिए एरिया-लेबलिंग = "पिछले <a> मेनू आइटम का आईडी"

राज्य अमेरिका:

  • वर्तमान में प्रथम- या द्वितीय-स्तर के <a> आइटम का दौरा किया गया; aria-selected = "true"; एरिया-चयनित = "फर्जी" अन्य <a> आइटम पर यह अवधारणा "चयनित <==> वर्तमान पृष्ठ को लागू करना है"
  • द्वितीय-स्तर <ul> कंटेनर के लिए aria-expanded = "true / false"
  • दूसरे-स्तर <ul> कंटेनरों के लिए aria-hidden = "true / false"
  • aria-activedescendant = "" मुख्य <ul> नेविगेशन बार कंटेनर के लिए यह टैबिंडेक्स के साथ काम करने का एक विकल्प है
  • वर्तमान में विज़िट किए गए <a> आइटम पर tabindex = 0; टैबिंडेक्स = -1 अन्य <a> आइटम पर नेविगेशन बार में टैबिंग करते समय यह वर्तमान पृष्ठ पर पहले फ़ोकस करने के लिए है यह एआरआईए-एक्टिडेसेंडेंट के साथ काम करने का एक विकल्प है

कीबोर्ड:

  • टैब: वेब एप्लिकेशन में अन्य बिंदुओं से मेनू में से बाहर / बाहर फ़ोकस करें।
  • Shift + Tab: वेब अनुप्रयोग में अन्य बिंदुओं से उलट मेनू में फोकस / बाहर फोकस करें, उलट क्रम में
  • दायां तीर: अगला नेविगेशन बार आइटम
  • वाम तीर: पिछला नेविगेशन बार आइटम
  • दर्ज करें: वर्तमान में केंद्रित आइटम सक्रिय करें (यानी इसी URL पर नेविगेट करें)
  • अंतरिक्ष: वर्तमान में केंद्रित आइटम सक्रिय करें (यानी इसी URL पर नेविगेट करें)

अगस्त / 2014: एरिया-चुने वीएस मेन्यूटेम

@ जोशुआ मुहईम के उत्तर में टिप्पणी: अब मैं यहां से , साथ ही अपने संदर्भ से देख सकता हूं, कि aria-selected menuitem रोल के लिए aria-selected विशेषता की अनुमति नहीं है
जैसा कि मैंने इस हाल के SO उत्तर से पढ़ा है वहां वर्तमान समाधान की स्थिति के कुछ समाधान दिए गए हैं, और एक नया प्रस्तावित विशेषता भी है।

हम एक वेब पोर्टल के मुख्य नेविगेशन मेनू को लागू करने की प्रक्रिया में हैं (यानी जोड़) वाई-एआरआईए समर्थन मेनू यहां दिखाया गया है:

मेनू को क्लासिक <ul> / <li> / <a> डोम पेड़ के माध्यम से कार्यान्वित किया गया है, सीएसएस के साथ स्टाइल जैसे क्षैतिज टैब की तरह देखने के लिए।

ऐसे विजेट के लिए सुझाए गए WAI-ARIA कार्यान्वयन क्या है?

मैं एक संभावित कार्यान्वयन पोस्ट करने के लिए यहां एक उत्तर के रूप में पोस्ट करने जा रहा हूं, इसलिए चीजों को आगे बढ़ाने के लिए

शेष पैराग्राफ को छोड़ें यदि आप WAI-ARIA संदर्भ में सीएसएस नेविगेशन मेनू के बारे में जानते हैं / नहीं करते हैं

प्रादेशिक सेना

प्रस्तावना (कहने के लिए)

मैंने हाल के वएआई-एआरआईए के कई हिस्सों को सामान्य समझदारी, वर्गीकरण और इतने पर w3org के लिए पढ़ा है। फिर मैंने UI विजेट के कई उदाहरणों के बारे में पढ़ा है। मुझे ऐसे किसी सीएसएस नेविगेशन मेनू पर विशेष रूप से लक्षित किसी भी उदाहरण नहीं मिला। निकटतम विगेट्स जो मैंने हमेशा पाया है I मेनू, मेन्यूबार और टैब पैनेल बेशक मैंने भी निशुल्क एआरआईए समुदाय समूह में देखा (जहां यह प्रश्न मूल रूप से पोस्ट किया गया था)।

मैं कहूंगा कि उन विजेट्स में से कोई भी एक (सीएसएस) नेविगेशन मेनू से मेल नहीं खाता। उदाहरण के तौर पर, टैबपेनेल पृष्ठ (-> एरिया-नियंत्रण) में कुछ सामग्री को नियंत्रित कर सकता है, शायद मेन्यूबार भी; लेकिन मुझे पूरा यकीन नहीं है कि एक नेविगेशन मेनू पृष्ठ में सामग्री को नियंत्रित करता है (यह दिखाने के लिए अगले पेज को नियंत्रित करता है) आगे जाने के बिना, कुछ अन्य मतभेद भी हैं संदर्भ पद के अंत में हैं यदि किसी ने नेविगेशन मेनू के बेहतर (या अधिक फिट) उदाहरण दिए हैं, तो हम उनके बारे में जानना चाहते हैं।

संदर्भ




बंद करने के लिए भागने का एक मानक तरीका वापस जाना है, यह कई उपयोगकर्ताओं द्वारा अपेक्षित व्यवहार है।




+ एस्केप कुंजी को एक खुले मेनू बंद करना चाहिए और उस तत्व को फ़ोकस करना चाहिए जो इसे खोलता है




Related