Chosen: चुना के साथ अभिगम्यता संबंधी समस्याएं

उस चर्चा से प्रासंगिक अंश:

काम की बहुत जरूरत है। ऐसा प्रतीत होता है कि यहां पहुंच योग्यता पर विचार नहीं किया गया है
सभी इस विजेट में, इसलिए बहुत सारे WAI-ARIA और JS काम करने की आवश्यकता होगी *
इसे WCAG 2.0 के अनुरूप बनाने का प्रयास *।

FF6 / JAWS12 के साथ 30 सेकंड की समीक्षा से सबसे बड़ा मुद्दा यह है कि
घटक को एक इनपुट प्रकार = पाठ के रूप में दर्शाया जाता है जिसके बाद एक अनियंत्रित सूची होती है
सभी विकल्पों में से (देशों के लिए 243) उपयोगकर्ता को पिछले नेविगेट करने की आवश्यकता है
यहां तक ​​कि क्षेत्र की उपेक्षा भी करते हैं।

शुरुआत के लिए खोज टेक्स्ट फ़ील्ड एक लेबल का उपयोग कर सकता है, लेकिन इसे ठीक करना आसान है।

एक बड़ा मुद्दा यह है कि जेनरेट किए गए सूची आइटम में एंकर नहीं होते हैं... क्या स्क्रीन रीडर उपयोगकर्ता कार्रवाई कर सकते हैं यदि वे जानते हैं कि सूची आइटम किस लिए हैं?

यह एक बहुत अच्छा प्लग-इन है! मुझे वास्तव में कार्यक्षमता पसंद है।
क्या भविष्य में बेहतर पहुंच में कोई विकास होने जा रहा है? इसे WCAG 2.0 के अनुरूप बनाने के लिए WAI-ARIA को जोड़ना???

मैंने अभी इस लेख को thefilamentsgroups की वेबसाइट पर पढ़ा है। एआरआईए भूमिकाएं खुद को चुना के लिए उधार दे सकती हैं:
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

उदाहरण के लिए: चुने गए परिणाम UL में role="menu" aria-activedescendant="active-menuitem" उन पर लागू होगा और परिणाम <li> में role="menuitem" होगा।
चुना ड्रॉप डाउन में खोज बॉक्स को शायद किसी प्रकार की एआरआईए भूमिका की भी आवश्यकता होगी ??

@dotdreaming आप सही दस्तावेज़ीकरण की ओर इशारा करते हैं, लेकिन आपके द्वारा

मुझे लगता है कि निम्नलिखित भूमिकाओं का उपयोग किया जाना चाहिए:

• कम्बोबॉक्स ।
• विकल्प

मुझे लगता है कि यह वास्तव में अच्छा होगा यदि कोई वास्तव में WAI-ARIA प्रलेखन में गोता

अगर मुझे समय मिले तो मैं खुद ऐसा कर सकता हूं। ऐसा नहीं लगता कि ऐसा करना बहुत मुश्किल होगा।

इस परियोजना में एआरआईए को शामिल करने पर कोई आंदोलन?

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

बीटीडब्ल्यू, यह एक्सेसिबिलिटी में सुधार के लिए कम लटके फलों की जांच करने का एक तरीका है, लेकिन WAVE ने कुछ बहुत ही बुनियादी चीजों की पहचान की है जिन्हें साफ किया जाना चाहिए -> http://wave.webaim.org/report?url=http%3A% 2F%2Fharvesthq.github.com%2Fchosen%2F&js=2

इनमें से किसी भी एक्सेसिबिलिटी समस्या का समाधान किया गया है? मैं वास्तव में इसे हमारी मुख्य विश्वविद्यालय साइट पर उपयोग करना पसंद करता हूं लेकिन इन एक्सेसिबिलिटी मुद्दों ने मुझे परेशान कर दिया है

+1 - हमें एक नेत्रहीन उपयोगकर्ता से प्रतिक्रिया मिली है कि चुनी गई ड्रॉपडाउन सूचियों का उपयोग करना कठिन है और उन्हें विकल्प चुनने में कठिनाई हो रही है। वे JAWS 14 को अपने स्क्रीनरीडर के रूप में उपयोग कर रहे हैं।

केवल नेविगेशन के लिए एक कीबोर्ड का उपयोग करने का प्रयास किया। आइटम का चयन बहुत अच्छी तरह से और सहज रूप से काम करता है (नए आइटम के लिए सूची खोलने के लिए नीचे, सूची नेविगेट करने के लिए ऊपर/नीचे, सूची को बंद करने के लिए esc, चयन करने के लिए दर्ज करें)। बहु-चयन से आइटम निकालना सरल (बैकस्पेस) था, हालांकि एकल-चयन ड्रॉपडाउन को साफ़ करने से स्वयं को अधिक चुनौतियों का सामना करना पड़ा। ऐसा लगता है कि, एक आइटम का चयन करने के बाद, मैं सूची को फिर से खोलने के लिए नीचे दबा सकता हूं और तब तक नेविगेट कर सकता हूं जब तक कि कोई विकल्प नहीं चुना जाता है (सामान्य ड्रॉपडाउन की तरह काम करता है यदि आपका पहला आइटम उदाहरण के रूप में खाली है), लेकिन मैं हूं नल विकल्प का चयन करने के लिए Enter दबाने में असमर्थ। किसी विकल्प को पूरी तरह से अचयनित करने के लिए कुछ विधि (या कम से कम एक रिक्त डिफ़ॉल्ट विकल्प) बहुत उपयोगी होगी।

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

दूसरे भाग के लिए, हमें listz:updated ट्रिगर करने की आवश्यकता होती है, भले ही आप चयनित नियंत्रण के मूल्य को प्रोग्रामेटिक रूप से चयनित अपडेट के लिए बदलते हैं।
यह आवश्यक है क्योंकि ब्राउज़र किसी ईवेंट को ट्रिगर नहीं करते हैं, जब चुना को इसके बारे में बताने के लिए प्रोग्रामेटिक रूप से मान बदल दिया जाता है (और वे इसे कर रहे थे, हमें अभी भी अनंत लूप से बचना होगा क्योंकि हम इसे प्रोग्रामेटिक रूप से भी बदल रहे हैं)

मैं आज एक्सेसिबिलिटी जोड़ने पर गौर करने जा रहा हूं। @marklagendijk मुझे लगता है कि आपने एटीएम जाने का सबसे अच्छा तरीका बताया है। मेरे निष्कर्षों पर बीमार अद्यतन।

यह मददगार हो सकता है, ऐसा नहीं भी हो सकता है, लेकिन हमारे पास पालन करने के लिए सख्त एक्सेसिबिलिटी दिशानिर्देश हैं और संस्करण 1.0.0 के साथ हमारे क्लाइंट का एक्सेसिबिलिटी टेस्टर निम्नलिखित टिप्पणियों के साथ वापस आया:

1. 'लेबल' से जुड़े 'सेलेक्ट' में डिस्प्ले होता है: कोई नहीं; और इसलिए
   'लेबल' प्रभावी रूप से अनाथ है। 'डिव क्लास = "चुना-कंटेनर-सिंगल"' जो लेता है
   प्रपत्र नियंत्रण के रूप में इसका स्थान प्रोग्रामेटिक पहुँच योग्य नाम या लेबल नहीं है।

2. अशुद्ध ड्रॉपडाउन पर कोई ध्यान केंद्रित नहीं है।

1. नकली ड्रॉपडाउन के भीतर लिंक पर कोई दृश्यमान फोकस नहीं है।

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

@marklagendijk
इस मुद्दे पर कोई प्रगति। मैं ड्रूपल कोर में चुना जोड़ने के लिए इस मुद्दे को फिर से पेश करने पर विचार कर रहा हूं और यह मुख्य अवरोधक है।

मुझे वास्तव में एक अच्छा उदाहरण मिला कि यह यहाँ कैसे किया जा सकता है:
http://cookiecrook.com/test/aria/multiselect/listbox.html
यहाँ जावास्क्रिप्ट है: http://cookiecrook.com/test/aria/multiselect/js/aria.js

मेरा मानना ​​​​है कि यह लगभग मूल रूप से चुनी गई कार्यक्षमता के लिए नक्शा है। यह सूची बॉक्स और बहुविकल्पीय एरिया गुणों का उपयोग करके कार्यान्वित करने के लिए बहुत आसान दिखता है
http://www.w3.org/TR/wai-aria/roles#listbox
http://www.w3.org/TR/wai-aria/states_and_properties#aria -बहुविकल्पीय

मैं खुद एक पैच बनाउंगा लेकिन मैं जेएस में इतना गर्म नहीं हूं।

ऊपर से जुड़ा मेरा पीआर वर्तमान चुने हुए कोडबेस से पूरी तरह से सुलभ विजेट बनाने में "डीप डाइव" लेने के बजाय प्रगतिशील वृद्धि के सिद्धांतों के आसपास केंद्रित एक बहुत ही सरल दृष्टिकोण के माध्यम से एक समाधान प्रदान करता है। मैं किसी भी और सभी प्रतिक्रिया का स्वागत करता हूं।

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

फ़ॉलबैक विधि का उपयोग क्यों न करें जो केवल चुने हुए को पूरी तरह से अक्षम कर देता है और उपयोगकर्ता को मूल चयन प्रदान करता है? यह एक (छिपा हुआ) लिंक जोड़कर प्राप्त किया जा सकता है जो जावास्क्रिप्ट कोड के एक छोटे टुकड़े का उपयोग करेगा जो चुने गए को अक्षम करता है।

IE8 ARIA समर्थन से संबंधित संसाधन: http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html

आप केवल ब्राउज़र/फीचर डिटेक्शन कर सकते हैं और IE8 का उपयोग होने पर चुना का उपयोग नहीं कर सकते हैं।

@ Daniel15 यह शायद एक आसान समाधान भी होगा। अपने विचार साझा करने के लिए थैंक्स। मेरी पोस्ट में मैं केवल यह इंगित करने की कोशिश कर रहा था कि एआरआईए (अभी के लिए) को लागू करने का मतलब यह नहीं है कि यह पहुंच योग्य है और उन अनुप्रयोगों पर उपयोग के लिए तैयार है जिन्हें डब्ल्यूसीएजी 2.0 अनुपालन की आवश्यकता है।

यह काम करते देखना पसंद करेंगे। स्क्रीनरीडर और केवल-कीबोर्ड वाले उपयोगकर्ताओं को वास्तव में इन क्षेत्रों तक पहुंच की आवश्यकता होती है। मैं आईई 8 से इतना चिंतित नहीं हूं लेकिन कम से कम आधुनिक ब्राउज़रों के लिए एक समाधान स्वीकार्य होगा। मुझे आईई 8 फ़ॉलबैक विचार काफी पसंद है। ऐसा लगता है कि दो अच्छे पीआर अप हैं - मैं उनमें से किसी एक को मर्ज होते हुए देखना पसंद करूंगा।

कृपया इस पर एक बड़ा +1

+1 (+) हमें इसे चुना में रखना होगा। यह एक समस्या है

एरिया-लेबल (संपत्ति)

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

एरिया-लेबल का उद्देश्य वही है जो एरिया-लेबल द्वारा किया जाता है। यह उपयोगकर्ता को वस्तु का एक पहचानने योग्य नाम प्रदान करता है। किसी लेबल के लिए सबसे आम पहुंच-योग्यता API मैपिंग पहुंच योग्य नाम गुण है।

यदि लेबल टेक्स्ट स्क्रीन पर दिखाई दे रहा है, तो लेखकों को एरिया-लेबलबाइ का उपयोग करना चाहिए और एरिया-लेबल का उपयोग नहीं करना चाहिए। ऐसे उदाहरण हो सकते हैं जहां किसी तत्व का नाम तत्व की सामग्री से प्रोग्रामेटिक रूप से निर्धारित नहीं किया जा सकता है, और ऐसे मामले हैं जहां दृश्यमान लेबल प्रदान करना वांछित उपयोगकर्ता अनुभव नहीं है। अधिकांश होस्ट भाषाएं एक विशेषता प्रदान करती हैं जिसका उपयोग तत्व को नाम देने के लिए किया जा सकता है (उदाहरण के लिए HTML [HTML] में शीर्षक विशेषता), फिर भी यह एक ब्राउज़र टूलटिप प्रस्तुत कर सकता है। ऐसे मामलों में जहां एक दृश्य लेबल या दृश्यमान टूलटिप अवांछनीय है, लेखक एरिया-लेबल का उपयोग करके तत्व का सुलभ नाम निर्धारित कर सकते हैं। सुलभ नाम संपत्ति की गणना करते समय उपयोगकर्ता एजेंट एरिया-लेबल द्वारा एरिया-लेबल पर प्राथमिकता देते हैं।

@ नतशाह क्या आप बदलाव के साथ पुल अनुरोध कर सकते हैं?

@Natshah वास्तव में, क्या आप यह देखने के लिए https://github.com/harvesthq/chosen/pull/2047 की समीक्षा कर सकते हैं कि क्या यह इसे सही तरीके से लागू करता है?

नमस्ते,

मैंने इसे इस लिंक पर अपने मामले के लिए तय किया है
https://www.drupal.org/node/2384865

धन्यवाद।

पुरस्कृत :)

हां। कि निम्नलिखित कोड में जैसा कुछ होना चाहिए। .

      if (this.is_multiple) {
        this.container.html('<ul class="chosen-choices"><li class="search-field"><input type="text" aria-label="' + this.form_field_jq.parents("label") +'" value="' + this.default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>');
      } else {
        this.container.html('<a class="chosen-single chosen-default" tabindex="-1"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" aria-label="' + this.form_field_jq.parents("label") +'"  autocomplete="off" /></div><ul class="chosen-results"></ul></div>');
      }

लेकिन हम इस कोड का उपयोग कर सकते हैं:

        $(".views-exposed-widget").each(function( index, element ) {
           $(this).find('.form-type-select .chosen-container input').attr("aria-label" ,$.trim($(this).find('label').text()));
        });

धन्यवाद।

पुरस्कृत :)

इस पर किसी भी अद्यतन? हमने हाल ही में चुने हुए को लागू किया है, और सहायक तकनीक "जॉज़" का उपयोग करने वाले उपयोगकर्ताओं से प्रतिक्रिया मिली है कि वे चुनिंदा क्षेत्रों का बिल्कुल भी उपयोग नहीं कर सकते हैं।

देखने के लिए एक महत्वपूर्ण मुद्दे की तरह लगता है। क्या इस मोर्चे पर कोई आंदोलन हुआ है?

कुछ भी नहीं जिसके बारे में मुझे पता है, दुर्भाग्य से ब्राउज़र और OSes के साथ सहायक तकनीकों के विशाल संयोजन को देखते हुए मुद्दों को दोहराना बहुत कठिन है ... आम तौर पर जब तक आप कीबोर्ड नेविगेट कर सकते हैं + आपके पास सही ARIA कार्यान्वयन है, इसे अधिकांश मामलों में काम करना चाहिए।

एक त्वरित सुधार के लिए मैंने यह सुनिश्चित करने का सहारा लिया है कि स्क्रीन पाठकों को कम से कम मूल चयन क्षेत्र का उपयोग करने को मिले। इसके लिए, मैं चयनित तत्व को छिपाने के बजाय, उत्पन्न चुने हुए कंटेनर पर screenreaders-only वर्ग और aria-hidden:true जोड़ रहा हूं।

तो, chosen.jquery.js लाइनों में 599 to 605 इस तरह दिखें:

container_props = {
        'class': container_classes.join(' '),
        'style': "width: " + (this.container_width()) + ";",
        'title': this.form_field.title,
        // hide widget for screen-readers
        'aria-hidden': 'true'
};

और लाइन 616 इस तरह दिखती है:

      // instead of hiding the original select field, adding the .sr-only class to keep it accessible for screen readers
      this.form_field_jq.addClass('sr-only').after(this.container);

यह एक सही समाधान नहीं है, क्योंकि छिपे हुए चयन और विजेट दोनों ही कीबोर्ड फोकस करने योग्य हैं, लेकिन यह एक दुर्गम विजेट होने से बेहतर है।

यह मेरे लिए काम किया।
मैंने उपरोक्त सभी सलाह का पालन किया और मैंने निम्नलिखित पंक्ति को बदल दिया:

this.container.bind('mousedown.chosen', function(evt)   // around line 630

प्रति:

this.container.bind('mousedown.chosen keydown.chosen', function(evt)

धन्यवाद

कोशिश करें अगर यह काम करता है। संरचना इस तरह होनी चाहिए। :)

@kirstenmalin ने जो काम किया था, उसके आधार पर मैंने कुछ ARIA तत्वों को जोड़ने का

मेरे पास यहां एक शाखा उपलब्ध है जो निम्न कार्य करती है:

ARIA लेबल और अन्य सहायक विशेषताएं

• निम्नलिखित एरिया तत्वों को खोज इनपुट बॉक्स में जोड़ता है
  
  
  
  • भूमिका = "कॉम्बोबॉक्स"
  
  
  • यह इंगित करने के लिए उपयोग किया जाता है कि उपयोगकर्ता किसी विकल्प का चयन करने के लिए टाइप कर सकते हैं या सूची में नए तत्व जोड़ सकते हैं
  
  
  • aria-haspopup (
  
  
  • यह इंगित करने के लिए प्रयुक्त होता है कि इस बॉक्स में एक संबंधित मेनू है
  
  
  • एरिया-विस्तारित
  
  
  • Combobox का उपयोग करते समय आवश्यक, इंगित करता है कि परिणाम सूची दृश्यमान या छिपी हुई है
  
  
  • राज्य को गतिशील रूप से अद्यतन करने की आवश्यकता है क्योंकि चुना हुआ क्षेत्र सक्रिय/निष्क्रिय है
  
  
  • aria-activedescendant="id_of_highlighted_option"
  
  
  • यह इंगित करने के लिए उपयोग किया जाता है कि कौन सा विकल्प वर्तमान में चयनित मान है
  
  
  • इसे अद्यतन करने की आवश्यकता है क्योंकि एक नया विकल्प चुना गया है
  
  
  • एरिया-मालिक = "id_of_list_of_options"
  
  
  • उन विकल्पों की सूची को इंगित करता है जिनसे यह खोज बॉक्स संबंधित है
  
  
  • एरिया-स्वतः पूर्ण = "सूची"
  
  
  • "यदि कोई लेखक 'सूची' के लिए एरिया-स्वत: पूर्ण के एक combobox का मान सेट करता है, तो उपयोगकर्ता एजेंटों को combobox पर aria-activedescendant विशेषता में परिवर्तन का खुलासा करना चाहिए, जबकि combobox केंद्रित रहता है। यदि aria-activedescendant विशेषता में परिवर्तन होता है जबकि combobox केंद्रित है, सहायक तकनीकों को उस परिवर्तन के उपयोगकर्ता को सचेत करना चाहिए, उदाहरण के लिए, नए सक्रिय वंशज तत्व के टेक्स्ट विकल्प को बोलकर। लेखकों को aria-owners का उपयोग करके कॉम्बोबॉक्स टेक्स्टफ़ील्ड को इसके लिस्टबॉक्स के साथ जोड़ना चाहिए।"
  
  
  • aria-labeledby="id_of_field_label"
  
  
  • यह उस प्रपत्र लेबल तत्व की आईडी है जिसे चुना गया स्थान बदल रहा है
  
  
• विकल्पों की सूची में निम्नलिखित विशेषताओं को जोड़ता है
  
  
  
  • पहचान
  
  
  • खोज इनपुट बॉक्स में एरिया-स्वामित्व विशेषता द्वारा लक्षित किए जाने वाले प्रपत्र फ़ील्ड आईडी पर आधारित एक साधारण आईडी
  
  
  • भूमिका = "सूची बॉक्स"
  
  
  • "एक विजेट जो उपयोगकर्ता को विकल्पों की सूची से एक या अधिक आइटम चुनने की अनुमति देता है।"
  
  
• विकल्पों की सूची में प्रत्येक व्यक्तिगत विकल्प में निम्नलिखित विशेषताएँ जोड़ता है
  
  
  
  • पहचान
  
  
  • सूची में विकल्प के सूचकांक पर आधारित एक साधारण आईडी और aria-activedescendant द्वारा उपयोग की जाने वाली प्रपत्र फ़ील्ड आईडी जो वर्तमान में चयनित तत्व को इंगित करती है
  
  
  • भूमिका = "विकल्प"
  
  
  • चयन सूची में एक चयन योग्य वस्तु।
  
  
  • एरिया-व्यस्त
  
  
  • हमें इसकी आवश्यकता का कारण यह है कि जब चुना को किसी फ़ील्ड पर प्रारंभ किया जाता है, तो यह विकल्प सूची को तब तक नहीं बनाता जब तक कि फ़ील्ड पहले सक्रिय न हो जाए।
  
  
  • यह सहायक तकनीक के साथ-साथ स्कैनर के लिए एक मुद्दा है जो एक्सेसिबिलिटी मुद्दों की तलाश करता है। चूंकि खोज बॉक्स (भूमिका = "कॉम्बोबॉक्स") अब यह स्पष्ट कर रहा है कि यह एक सूची बॉक्स का मालिक है (aria-owners="id_of_list_of_options"), सूची बॉक्स (हमारी परिणाम सूची) _must_ में विकल्प हैं या अनुपालन करने के लिए इसे व्यस्त माना जाना चाहिए। कल्पना।
    
    
    
    
    
    • मुझे 100% भी यकीन नहीं है कि यह सही कदम है। यह निश्चित रूप से फ़ील्ड्स को स्कैनर्स द्वारा फ़्लैग किए जाने से रोकता है, लेकिन ये पूरी तरह से व्यस्त नहीं हैं, हमने अभी तक विकल्पों का निर्माण नहीं किया है।
    
    
    
  
  
  • मैं उम्मीद कर रहा हूं कि A11Y के अधिक अनुभव वाला कोई व्यक्ति इस पर ध्यान दे सकता है।
  
  
  • मैंने एक अधिक कट्टरपंथी दृष्टिकोण पर भी विचार किया, जिसमें किसी क्षेत्र के पहली बार सक्रिय होने पर परिणाम सूची बनाना शामिल है, लेकिन इसमें चुना के लिए एक नया ट्रिगर जोड़ना शामिल है।
    
    
    
    
    
    • यह ट्रिगर अनिवार्य रूप से winnow_results पद्धति का एक पास थ्रू था, जिसने खोज परिणामों को बनाया (अभी भी छिपा हुआ), लेकिन इसने स्कैनर्स को खुश कर दिया।
    
    
    
  
  

प्रबंध राज्य

• एरिया-विस्तारित विशेषता का प्रबंधन
  
  
  
  • यह इंगित करने के लिए कि खोज परिणाम सहायक तकनीक के लिए कब प्रासंगिक होने चाहिए, हमें एरिया-विस्तारित विशेषता को चालू करने की आवश्यकता है क्योंकि फ़ील्ड सक्रिय/निष्क्रिय हैं।
  
  
  • ऐसा करने का सबसे आसान तरीका (AFAIK) close_field और activate_field विधियों के दौरान विशेषता को समायोजित करना है।
  
  
  • इन विधियों में से प्रत्येक में सत्य से असत्य या असत्य से सत्य में एक साधारण स्विच राज्य को अद्यतन रखने के लिए पर्याप्त है
  
  

मैं अपनी कई परियोजनाओं पर इस संस्करण का उपयोग शुरू करने जा रहा हूं, और परिवर्तनों के साथ अपनी शाखा को अपडेट करता रहूंगा क्योंकि हमें A11Y दृश्य से हमारी परियोजनाओं पर अधिक विस्तृत नज़र मिलती है।

अब तक पढ़ने वाले सभी लोगों के लिए धन्यवाद, मुझे पता है कि यह बहुत है और कृपया, अगर आपके पास प्रतिक्रिया है, तो मुझे बताएं! मैं इसे यथासंभव आगे बढ़ाना चाहता हूं।

@cooperfellows कृपया अपने परिवर्तनों के साथ एक पुल अनुरोध खोलें

@stof हो गया, लेकिन जैसा कि मैंने कहा, मैं कोई A11Y विशेषज्ञ नहीं हूं, और मैं कुछ और परीक्षण करने की योजना बना रहा हूं। मैं बस इस पर अपना पहला स्थिर पास साझा करना चाहता था।

क्या इसके साथ कोई "आधिकारिक" अपडेट है? क्या @cooperfellows के प्रयासों के आधार पर कोई बदलाव किया गया है?

कारण मैं पूछता हूं कि हम जॉज़ उपयोगकर्ताओं की संख्या में वृद्धि कर रहे हैं जो विजेट को अनुपयोगी के रूप में रिपोर्ट कर रहे हैं, प्रभावी रूप से उस रूप को प्रस्तुत कर रहे हैं जिसे वे अनुपयोगी देख रहे हैं।

हम नकल कर सकते हैं, मदद करने / उदाहरणों को साझा करने में बहुत खुशी हुई अगर इससे मदद मिलती है?

पुल अनुरोध किया गया था (इसमें कुछ मामूली मुद्दे थे जिन्हें इस तथ्य के बाद हल किया गया था) लेकिन अभी तक कुछ भी नहीं हुआ है। मैं अभी उत्पादन में जिस शाखा का उपयोग कर रहा हूँ वह यहाँ है:

• https://github.com/cooperfellows/chosen/tree/a11y-updates

हालांकि मुझे कुछ और प्रतिक्रिया पसंद आएगी। मेरे पास जबड़े नहीं हैं, इसलिए मैं विभिन्न ऑनलाइन टूल के ऑडिट पर निर्भर हूं।

तो वह शाखा मूल रूप से वर्तमान उत्पादन के साथ-साथ आपके परिवर्तन, या हाल के परिवर्तनों के साथ पिछले संस्करण में अभी तक विलय नहीं हुई है?

(धन्यवाद बीटीडब्ल्यू)

हाँ, यह सही है @wcndave। हालांकि पीआर वास्तव में समीक्षा के लिए कुछ अन्य आंखों का उपयोग कर सकता है।

@cooperfellows मुझे अभिगम्यता परीक्षण में सहायता करने में प्रसन्नता हो रही है क्योंकि मुझे मौजूदा चुने हुए कार्यान्वयन को एक नए निर्माण में पोर्ट करने की आवश्यकता है जिसे WCAG 2 को पूरा करने की आवश्यकता है।

आपके पुल अनुरोध पर कोई अपडेट?

मूर्खतापूर्ण प्रश्न - क्या आपके पास एक संकलित जावास्क्रिप्ट संस्करण है जिसे मैं डाउनलोड कर सकता हूं?
या क्या मुझे कॉफ़ीस्क्रिप्ट स्थापित करने और स्वयं को संकलित करने की आवश्यकता है?

@KITSKevinBonett मदद के लिए धन्यवाद!

अटैच्ड jQuery और प्रोटो टाइप वर्जन का एक ज़िप है, जो कंप्रेस्ड और अन-कंप्रेस्ड दोनों है।

संकलित-a11y-chosen-jquery-proto.zip

@cooperfellows वह जल्दी था। मैं अपने प्रोजेक्ट में जोड़ूंगा, कुछ परीक्षण करूंगा, और आपको बताऊंगा...

@KITSKevinBonett हां, मैं इस पर कुछ और नजरें गड़ाना चाहता हूं, क्योंकि मैं कोई A11Y विशेषज्ञ नहीं हूं। तो किसी भी प्रतिक्रिया (कठोर और सकारात्मक) की सराहना की जाती है।

हाय @cooperfellows - मैंने आपके कार्यान्वयन की समीक्षा की है - वास्तव में बहुत अच्छा।

कुछ समस्याएं हैं जो स्क्रीन रीडर/ब्राउज़र की असंगतियों के कारण (आसानी से) हल नहीं हो सकती हैं।

मैंने अपने निष्कर्षों को संलग्न में प्रलेखित किया है। मैंने 1 या 2 छोटी सिफारिशें की हैं जो मुझे आशा है कि आपको उपयोगी लगेंगी।

_अपडेट करें_

1. मेरी कुछ टिप्पणियों में कार्यक्षमता का उल्लेख है जो हमारे कार्यान्वयन के लिए स्थानीय है - मैंने इन्हें हटा दिया है।
2. "कॉम्बोबॉक्स" के अंदर टाइप करने और ENTER दबाने में समस्या - हमारा फॉर्म सबमिट सक्रिय नहीं हो रहा है - फिर से, यह एक स्थानीय कार्यान्वयन समस्या है।
3. नीचे दिए गए ज़िप को (1) और (2) को हटाने के लिए अपडेट किया गया है।

aria-chosed-plugin.zip

हाय @cooperfellows - क्या मेरा ऑडिट समझ में आया?

हाय @KITSKevinBonett मैं छुट्टी पर एक सप्ताह से दूर हूं। जैसे ही मैं अपने दूसरे काम में लग जाऊंगा, मैं इसे देख लूंगा। हालांकि प्रतिक्रिया के लिए धन्यवाद, मुझे यकीन है कि यह मददगार है।

@KITSKevinBonett ऑडिट के लिए धन्यवाद, यह बहुत अच्छी तरह से लगता है। मैंने अपने विचारों को ऑडिट के अनुभागों के आधार पर तोड़ दिया है जैसा आपने उन्हें निर्धारित किया था।

प्लगइन द्वारा उत्पन्न HTML मार्कअप

• क्या यहां कोई प्रतिक्रिया है? या आप सिर्फ दिखा रहे हैं कि क्या उत्पन्न हुआ है?

केवल कीबोर्ड व्यवहार

• "हालांकि, जब विकल्प चुना गया है, तो कीबोर्ड फोकस फिर से टैबबिंग पर खो जाता है।"
  
  
  
  • मैं सोच रहा हूं कि इसे एरिया-छिपी विशेषता को चालू और बंद करके हल किया जा सकता है क्योंकि उस तत्व को दृश्यमान/छिपाया जाता है?
  
  
  • मैं इस दृष्टिकोण को देख लूंगा।
  
  
• "सीएसएस अक्षम मुद्दे"
  
  
  
  • मानक चयन दिखाई देता है
  
  
  • मैं इसे दोबारा नहीं बना सकता, क्या आप मुझे स्क्रीन शॉट या स्क्रीन कास्ट या कुछ और दे सकते हैं?
  
  
  • कुंजीपटल के साथ परिणामों को हाइलाइट करते समय कोई दृश्यमान संकेत नहीं।
  
  
  • हम वर्तमान में हाइलाइट किए गए आइटम के टेक्स्ट को <em> टैग में लपेट सकते हैं, जो इटैलिकाइज़ हो जाता है (कम से कम क्रोम में)।
    
    
    
    
    
    • यहां संभावित समस्या यह है कि टेक्स्ट मिलान को इंगित करने के लिए खोज <em> का भी उपयोग करती है, इसलिए मुझे चिंता होगी कि वे संभावित रूप से एक दूसरे के साथ संघर्ष करेंगे।
    
    
    
  
  

स्क्रीन रीडर

• मेरे पास JAWS तक पहुंच नहीं है, इसलिए मैं यहां बहुत कुछ नहीं कर पाऊंगा। जब मुझे यह देखने के लिए कुछ और समय मिलेगा कि मुझे क्या मिल सकता है, तो मैं एक परीक्षण शुरू करूंगा।
• स्क्रीन रीडर वह क्षेत्र है जिसके साथ मैं वास्तव में कुछ और मदद की सराहना करता हूं, इसलिए विस्तृत विश्लेषण के लिए धन्यवाद।

आरिया विचार

• जैसा कि आपने नोट किया है, मैं हैपॉपअप विशेषता को हटा सकता हूं, यह बेमानी है।
• कारण मैंने एरिया-व्यस्त जोड़ा, यह है कि डिफ़ॉल्ट रूप से, चुना गया है जब तक फोकस नहीं रखा जाता है तब तक छिपे हुए div में कोई सूची तत्व उत्पन्न नहीं होता है।
  
  
  
  • इसका मतलब है कि भूमिका = "सूची बॉक्स" तत्व में डिफ़ॉल्ट रूप से कोई विकल्प नहीं है, जो मुझे इसे टूल के साथ स्कैन करते समय समस्याएं दे रहा था। शुरुआत में एरिया-व्यस्त एलीमेंट जोड़ने पर उन टूल्स द्वारा इसे अनदेखा कर दिया जाता है।
  
  
  • समस्या का कारण यह है कि एक सूची बॉक्स तत्व _एक विकल्प तत्व ( स्रोत ) का स्वामी होना चाहिए
  
  
  • पहली बार सूची भर जाने पर इसे हटा दिया जाता है, इसलिए मुझे ऐसा लग रहा था जैसे कोई नुकसान न हो।
  
  
• एरिया-चयनित जोड़ना एक स्पष्ट कदम की तरह लगता है, विश्वास नहीं कर सकता कि मैंने इसे याद किया है। इसे पकड़ने के लिए धन्यवाद।
  *समापन विचार*
  क्या आपने स्वयं इस ऑडिट के लिए HTML लिखा है, या किसी टूल ने इसे आपके लिए बनाया है? यह बहुत मददगार है इसलिए फिर से धन्यवाद।

@cooperfellows - आपके सवालों के जवाब:

एचटीएमएल मार्कअप

• बस दिखा रहा है कि प्लगइन के व्यवहार के प्रत्येक चरण के दौरान क्या उत्पन्न हुआ है।

कीबोर्ड व्यवहार

• "खोया फोकस" केवल फ़ायरफ़ॉक्स में है। फोकस को रोकने के लिए आप tabindex="-1" जोड़ सकते हैं, फिर इसे फिर से हटा दें। तब आपको ARIA की आवश्यकता नहीं होगी।

सीएसएस अक्षम

• मूल रूप से, मूल चयन पृष्ठ पर दिखाई देता है और यूपी के साथ प्रयोग करने योग्य है | नीचे तीर क्योंकि डिफ़ॉल्ट ब्राउज़र व्यवहार विभिन्न विकल्पों को दिखाता है जैसे आप उनके माध्यम से नेविगेट करते हैं।
• प्लगइन-रेंडर एचटीएमएल भी दिखाई दे रहा है, लेकिन ड्रॉपडाउन यह नहीं दर्शाता है कि कौन सा "विकल्प" हाइलाइट किया गया है।
• आपने EM का उपयोग करने का सुझाव दिया। इसके बजाय STRONG का उपयोग करें - इसका HTML5 में EM की तुलना में अधिक अर्थपूर्ण अर्थ है। देखें http://html5doctor.com/ib-em-strong-element/
• लेकिन मुझे नहीं लगता कि यह एक प्रमुख मुद्दा है क्योंकि उपयोगकर्ता अभी भी चयन का उपयोग कर सकते हैं।
• स्क्रीनशॉट देखें

स्क्रीन रीडर

• यह कठिन है क्योंकि ब्राउज़र और स्क्रीन रीडर के किस संयोजन का उपयोग किया जा रहा है, और कौन से संस्करण के आधार पर परिणाम भिन्न होते हैं।
• मैं जो कहूंगा वह यह है कि एआरआईए भूमिकाओं/राज्यों/गुणों के संदर्भ में प्लगइन के लिए आपकी एक्सेसिबिलिटी अपडेट डब्ल्यू3सी/डब्ल्यूएआई सिफारिशों के अनुरूप है। तो यह अच्छी खबर है। :)
• यह सुनिश्चित करना ब्राउज़र और स्क्रीन रीडर निर्माताओं पर निर्भर है कि उनका सॉफ़्टवेयर इनका पालन करता है।

एरिया

• "एरिया-व्यस्त" के लिए आपका स्पष्टीकरण समझ में आता है। यहां तक ​​​​कि अगर यह अप्रचलित था, तो इससे कोई समस्या नहीं होगी।
• ऑडिट एचटीएमएल। हाथ से तैयार किया गया। मैं जिस कंपनी के लिए काम करता हूं, उसके लिए मैं एक यूआई घटक पुस्तकालय/जीवन शैली गाइड बना रहा हूं, इसलिए मैंने वहां से घटकों का उपयोग किया। बिल्कुल भी देर नहीं लगी। यह सुनिश्चित करने के लिए कि मैंने सब कुछ सही ढंग से कैप्चर किया है, सबसे कठिन हिस्सा सभी स्क्रीन रीडर आउटपुट को फिर से सुनना था।

आशा है कि यह सब आपके पुल अनुरोध में मदद करता है। आपने A11Y के साथ बहुत अच्छा काम किया है। :)

नमस्ते,

मैं नेत्रहीन हूं। मैंने JAWS के साथ @cooperfellows के कार्य का परीक्षण किया है। यह पूरी तरह से काम करता है। चयनित विकल्प को विकल्पों के माध्यम से I तीर के रूप में बोला जाता है।

मास्टर में इसे मर्ज करने के बारे में कोई खबर?

अपने दैनिक कार्य में, मैं MISP (मैलवेयर इंफॉर्मेशन शेयरिंग प्लेटफॉर्म - https://github.com/MISP/MISP) का उपयोग करता हूं, जिसके डेवलपर्स ने हाल ही में स्वतः पूर्ण कॉम्बो बॉक्स के लिए "चुने गए" का उपयोग करने का निर्णय लिया है। यह मेरे लिए एक बुरा सपना बन गया है।

आपकी मदद के लिए अग्रिम धन्यवाद।

कुछ परीक्षणों के बाद, मैं ऊपर पोस्ट किए गए संकलित संस्करण (.zip संग्रह) की पुष्टि कर सकता हूं (1 जुलाई, 2016 को) काम करता है।

हालांकि, जब मैं @cooperfellows की शाखा का प्रयास करता @cooperfellows की शाखा का क्लोन

हाय @ obert01 , JAWS का उपयोग करके इस पर एक नज़र डालने के लिए बहुत बहुत धन्यवाद, यह एक बड़ा टुकड़ा था जिसे मैं अपने काम के दौरान याद कर रहा था।

यह शाखा वर्तमान हार्वेस्ट/मास्टर शाखा से बहुत पुरानी है, चीजों को वापस काम करने की स्थिति में लाने के लिए मुझे परिवर्तनों की समीक्षा करने समायोजित करने की आवश्यकता होगी।

मैं महीने के अंत से कुछ समय पहले इस तक पहुंचने की कोशिश करूंगा, मैं अभी काम पर काफी समर्थित हूं।

एक बार इसे अपडेट करने के बाद मैं योगदानकर्ताओं में से एक को फिर से देखना पसंद करूंगा, इसलिए मैं इसे अपडेट करने के बाद दूंगा ।

बहुत - बहुत धन्यवाद।

आपकी जानकारी के लिए, मैं निम्नलिखित ब्राउज़र के साथ JAWS और NVDA स्क्रीन रीडर के सभी संयोजनों के साथ परीक्षण कर सकता हूं: Internet Explorer 11, Google Chrome, Firefox ESR, Firefox Standard, Microsoft Edge।

इस पर कोई प्रगति?

मुझे आग्रह करने के लिए खेद है, लेकिन मेरे दैनिक कार्य में इस पहुंच की कमी है।

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

आपको धन्यवाद

नमस्ते,
हमारे पास एक एप्लिकेशन है जिसे चुना गया है और अब हमें एक्सेसिबिलिटी का समर्थन करने की आवश्यकता है, लेकिन इसके माध्यम से मैं जो देख सकता हूं वह यह है कि इसे अभी तक मर्ज नहीं किया गया है। यह वास्तव में मददगार होगा यदि @cooperfellows इसे अंतिम रूप दे सकते हैं और कृपया विलय कर सकते हैं।

नमस्ते @obert01 और @csmuthukuda ,

मैंने अभी-अभी चुना है के नवीनतम संस्करण के साथ अपने पीआर को गति देने के लिए अपडेट किया है, कृपया यहां एक नज़र डालें:
https://github.com/harvesthq/chosen/pull/2596

आप मेरे फोर्कड रिपोजिटरी की एक प्रति प्राप्त कर सकते हैं और अपने अंत में परीक्षण कर सकते हैं। मुझे कुछ वास्तविक जीवन प्रतिक्रिया पसंद आएगी।

इसने सभी TravisCI जाँचों को पारित कर दिया, लेकिन मुझे नहीं लगता कि वे A11Y मुद्दों को कवर करते हैं। आप क्या सोचते हैं मुझे बताओ।

हाय @cooperfellows ,
धन्यवाद, इसे जीवित रखने के लिए आपके समर्पण के लिए बहुत-बहुत धन्यवाद। मैं इसका परीक्षण करूंगा और आपको इसकी प्रतिक्रिया से अवगत कराऊंगा। मुझे वास्तव में उम्मीद है कि मालिक इसे मास्टर में विलय करने पर विचार करेंगे। यह अब एक अनिवार्य आवश्यकता है।

धन्यवाद @csmuthukuda मुझे इसमें विलय होना अच्छा लगेगा ....

@pfiller @stof @tjschuck @koenpunt , इसे देखने में मदद के लिए मैं कुछ भी कर सकता हूं? यह वास्तव में एक अन्यथा अविश्वसनीय रूप से भयानक प्रणाली के लिए एक लापता टुकड़ा है।

हाय @cooperfellows ,

मैंने आपके बेहतरीन काम को सबसे मौजूदा वेब ब्राउज़र और JAWS और NVDA स्क्रीन रीडर्स के साथ परखा है। आपको धन्यवाद !

कुंजीपटल के साथ विकल्पों के माध्यम से तीर अच्छी तरह से काम करता है: भाषण और ब्रेल प्रतिक्रिया एकदम सही है, जिसका अर्थ है कि सभी एआरआईए विशेषताओं को अच्छी तरह से परिभाषित किया गया है। हालांकि, जब मैं कोई विकल्प चुनने के लिए ENTER दबाता हूं, तो कुछ नहीं होता है। मुझे यह निर्धारित करने के लिए जावास्क्रिप्ट के साथ पर्याप्त अनुभव नहीं है कि क्या समस्या चुना से आती है, या यदि यह इसका उपयोग करने वाले एप्लिकेशन में मौजूद है।

पुन: पेश करने के लिए, केवल कीबोर्ड का उपयोग करके चुने गए कम्बोबॉक्स में एक विकल्प चुनने का प्रयास करें: कॉम्बोबॉक्स पर ध्यान केंद्रित करने के लिए टैब, सूची ब्राउज़ करने के लिए तीर कुंजियां, चयन करने के लिए ENTER।

एक बार फिर, बहुत बहुत धन्यवाद।

उस जानकारी के लिए धन्यवाद @obet01। मैं एक नज़र डालेगा और देख सकता हूं कि मुझे क्या मिल सकता है।

@ obert01 क्या आप यह पुष्टि करने के लिए JS fiddle का उपयोग करने का प्रयास कर सकते हैं कि यह काम कर रहा है/काम नहीं कर रहा है? यह पहेली मेरी नवीनतम प्रतिबद्धता के संकलित jQuery संस्करण को लोड कर रही है।

• https://fiddle.jshell.net/cfellows/r5kp1udb/8/show/light/

मैं अपने कीबोर्ड (Chrome नवीनतम) का उपयोग करके उस ड्रॉपडाउन को नेविगेट करने में सक्षम हूं, लेकिन मैं स्क्रीन रीडर नहीं चला रहा हूं।

आप क्या सोचते हैं मुझे बताओ।

हाय @cooperfellows ,

आपके JS Fiddle में कोई समस्या नहीं है। इस प्रकार मुझे लगता है कि समस्या एमआईएसपी (https://www.misp-project.org/) में चुने गए तरीके के कारण है।

मैं इसे एमआईएसपी प्रोजेक्ट टीम के साथ जांचूंगा।

धन्यवाद

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

कहीं सार्वजनिक रूप से चुना गया है?

@cooperfellows क्या आप कृपया मुझे नवीनतम परिवर्तनों के साथ एक नया निर्माण दे सकते हैं, मुझे नहीं पता कि इसे कैसे बनाया जाए।

@ obert01 @cooperfellows मैंने अभी NVDA के साथ Fiddle की कोशिश की है, ऐसा लगता है कि कीबोर्ड नेविगेशन पूरी तरह से काम करता है (ENTER कुंजी के साथ चयन करने सहित)। हालांकि, जब मैं ऊपर और नीचे तीर कुंजियों के माध्यम से नेविगेट करता हूं, तो स्क्रीन रीडर पढ़ता है, "________नहीं चुना गया", अर्थात "बरमूडा चयनित नहीं"। क्या यह अपेक्षित व्यवहार है?

मेरे पास @woenlee जैसा ही मुद्दा है। यह इतना हानिकारक नहीं है। लेकिन हो सकता है, जिस तरह से चयनित आइटम पर "चयनित" विशेषता सेट की गई है, उसे चेक किया जाना चाहिए।

जब आप किसी सूची आइटम को "दर्ज" और "बाहर" करते हैं तो अपेक्षित व्यवहार क्या होता है? कब
आप एक नए आइटम पर नेविगेट करते हैं, क्या इसे नए चयनित को पढ़ना चाहिए
वस्तु? क्या यह यह भी घोषणा करता है कि अब क्या नहीं चुना गया है? @obert01 @woenlee

सूर्य पर, अगस्त 25, 2019 अपराह्न 12:18 बजे ओलिवियर बीईआरटी नोटिफिकेशन @github.com
लिखा था:

मेरे पास @woenlee https://github.com/woenlee जैसी ही समस्या है। यह नहीं
इतना हानिकारक। लेकिन हो सकता है, जिस तरह से "चयनित" विशेषता को सेट किया गया हो
चयनित आइटम की जाँच की जानी चाहिए।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/harvesthq/chosen/issues/264?email_source=notifications&email_token=ABT3ZTIESGLX6IYW4BF2QCLQGKWDVA5CNFSM4AATGGB2YY3PNVWWK3TUL52HS4DFWSZG43VMVBW
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/ABT3ZTMH2KUYYE7HNO2UGH3QGKWDVANCNFSM4AATGGBQ
.

--
~कूपर

@cooperfellows कुछ कुल्हाड़ी अभिगम्यता परीक्षण चलाने के बाद, मुझे आपके पीआर में एक बग मिला है, जो बताता है कि वह ऐसा क्यों कर रहा था। Abstract-chosen.coffee की लाइन 342 में, इनपुट को 2 भूमिकाएँ सौंपी गई हैं, "कॉम्बोबॉक्स" और "लिस्टबॉक्स"।

<input class="chosen-search-input" type="text" autocomplete="off" aria-expanded="false" aria-haspopup="true" role="combobox" aria-autocomplete="list" autocomplete="off" role="listbox" /> </div> <ul class="chosen-results"></ul>

देने के बाद

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

@ obert01 क्या आप यह पुष्टि करने के लिए JS fiddle का उपयोग करने का प्रयास कर सकते हैं कि यह काम कर रहा है/काम नहीं कर रहा है? यह पहेली मेरी नवीनतम प्रतिबद्धता के संकलित jQuery संस्करण को लोड कर रही है।

• https://fiddle.jshell.net/cfellows/r5kp1udb/8/show/light/

मैं अपने कीबोर्ड (Chrome नवीनतम) का उपयोग करके उस ड्रॉपडाउन को नेविगेट करने में सक्षम हूं, लेकिन मैं स्क्रीन रीडर नहीं चला रहा हूं।

आप क्या सोचते हैं मुझे बताओ।

@cooperfellows
मैं JAWS 2019 के साथ इस JS Fiddle का परीक्षण कर रहा था और ऊपर और नीचे तीर कुंजियों के साथ विकल्पों को नेविगेट करते समय कुछ अलग अनुभव किया।
गूगल क्रोम पर 71.0.3578.98:
JAWS वर्तमान हाइलाइट किए गए मान को तब तक नहीं पढ़ेगा जब तक कि सूची में कुछ स्क्रॉल/रेंडरिंग न हो। यानी अगर सूची दिख रही है

<option selected="selected" value="United States">United States</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>

9 विकल्प, JAWS नीचे दबाए जाने पर हाइलाइट किए गए विकल्प को तब तक नहीं पढ़ता जब तक आप 10वें विकल्प पर नहीं पहुंच जातेअंतिगुया और बार्बूडा . एंटीगुआ और बारबुडा को हाइलाइट करने के लिए बॉक्स थोड़ा ऑटो स्क्रॉल करता है और फिर विकल्प पढ़ता है।

आईई 11.0.9600.19463 पर: तीर कुंजियों के साथ नेविगेट करना वर्तमान हाइलाइट किए गए विकल्प को सही ढंग से ऊपर और नीचे जा रहा है। किसी प्रकार के प्रतिपादन की आवश्यकता नहीं है।

जानना चाहेंगे कि किसी और ने इसका अनुभव किया है या नहीं। @obert01 @woenlee

नमस्ते और आपके काम के लिए धन्यवाद।

दुर्भाग्य से, यह ठीक से काम नहीं करता है। इसका वर्णन करना अत्यंत कठिन है, क्योंकि उपयोग किए गए ब्राउज़र या स्क्रीन रीडर के कार्य में व्यवहार में परिवर्तन होता है।

मुझे लगता है कि कुछ एरिया गुण मौजूद नहीं हैं या अद्यतन नहीं हैं। यहाँ सामान्य समस्याएं जिनका मैं सामना करता हूँ:

• स्क्रॉलिंग समस्या: जब मैं नीचे तीर करता हूं और वस्तुओं की दृश्यमान सूची के अंत तक पहुंचता हूं, तो मुझे अगले आइटम पर ध्यान केंद्रित करने के लिए नीचे तीर पर दो बार प्रेस करना होगा।
• जब मैं किसी आइटम का चयन करने के लिए ENTER दबाता हूं, तो फ़ोकस रिलीज़ नहीं होता है। अपेक्षित व्यवहार यह होगा कि स्क्रीन रीडर त्वरित नेविगेशन मोड में वापस चला जाता है और मुझे बाकी वेब पेज पढ़ने देता है। इसके बजाय, तीर कुंजियाँ अभी भी सूची में मेरी पसंद को नियंत्रित कर रही हैं।
• वर्तमान स्क्रिप्ट यह जानने की अनुमति नहीं देती हैं कि क्या प्रस्ताव प्रदर्शित होते हैं और कितने हैं। मुझे पता है कि सबसे सुलभ चुनिंदा प्लगइन्स में, जेएडब्ल्यूएस/एनवीडीए घोषणा करता है कि टेक्स्ट इनपुट में दर्ज स्ट्रिंग से कितने परिणाम मेल खाते हैं।
• अंत में, मुझे यह आभास होता है कि JAWS को समझ में नहीं आता है कि सूची को मिलाया गया है या विस्तारित किया गया है। कभी-कभी, ENTER के साथ चुनाव करने और शेष पृष्ठ को पढ़ने का प्रयास करने के बाद, JAWS अभी भी प्रदर्शित किए गए नवीनतम प्रस्तावों को पढ़ता है।

अच्छे अंक:

• ऑटो-कम्प्लीट पार्ट अच्छी तरह से काम करता है। यदि मैं "फ़्रा" दर्ज करता हूँ, तो JAWS "फ़्रांस" का उच्चारण करता है, और मैं चयन करने के लिए ENTER दबा सकता हूँ।
• जैसे ही मैं सूची में तीर चलाता हूं, आइटम ठीक से पढ़े जाते हैं।

दुर्भाग्य से मैं सामान्य रूप से एआरआईए, जावास्क्रिप्ट और वेब के संबंध में बहुत सी बातें नहीं जानता। मेरा सुझाव है कि आप सुनिश्चित करें कि अधिकतम ARIA गुण ठीक से सेट और अपडेट किए गए हैं।

कृपया एक JQuery प्लगइन का डेमो और कोड देखें जो स्क्रीन रीडर के साथ पूरी तरह से इंटरैक्ट करता है:
https://a11y.nicolas-hoffmann.net/autocomplete-list/

मुझे खेद है कि मैं और अधिक मदद नहीं कर सका।

अपने काम के नए डेमो पोस्ट करने में संकोच न करें। मुझे आपके लिए परीक्षण करने में खुशी हो रही है।