Chosen: مشكلات إمكانية الوصول مع Chosen

قطعة ذات صلة من تلك المناقشة:

الطريق الكثير يحتاج إلى عمل. يبدو أنه لم يتم النظر في إمكانية الوصول عند
كل ذلك في هذه الأداة ، لذا ستكون هناك حاجة إلى الكثير من أعمال WAI-ARIA و JS من أجل *
محاولة * لجعل هذا يتوافق مع WCAG 2.0.

أكبر مشكلة ، من مراجعة مدتها 30 ثانية مع FF6 / JAWS12 هي أن ملف
يتم تمثيل المكون كنوع إدخال = نص متبوعًا بقائمة غير مرتبة
من بين جميع الخيارات (243 للبلدان) التي يحتاج المستخدم للتنقل إليها في الماضي
حتى تجاهل المجال.

يمكن أن يستخدم حقل نص البحث تسمية ، بالنسبة للمبتدئين ، ولكن من السهل إصلاح ذلك.

المشكلة الأكبر هي أن عناصر القائمة التي تم إنشاؤها لا تحتوي على نقاط ارتساء فيها ... هل يمكن لمستخدمي قارئ الشاشة اتخاذ إجراء إذا كانوا يعرفون الغرض من عناصر القائمة؟

هذا هو البرنامج المساعد لطيف جدا! أنا حقا أحب الوظيفة.
هل سيكون هناك أي تطوير مستقبلي لتحسين إمكانية الوصول؟ إضافة WAI-ARIA لجعلها متوافقة مع WCAG 2.0 ؟؟؟

لقد قرأت للتو هذا المقال على موقع thefilamentsgroups. يمكن أن تصل أدوار ARIA إلى Chosen:
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

على سبيل المثال: النتائج المختارة UL سيكون لها دور = "menu" aria-activedescendant = "active-menuitem" يتم تطبيقها عليها والنتائج <li> سيكون لها دور = "menuitem".
ربما يحتاج مربع البحث في القائمة المنسدلة المختارة إلى نوع من دور ARIA أيضًا ؟؟

dotdreaming ، فأنت تشير إلى الوثائق الصحيحة ، لكن الأدوار التي ذكرتها ليست صحيحة تمامًا.

أعتقد أنه يجب استخدام الأدوار التالية:

• combobox .
• اختيار

أعتقد أنه سيكون من الرائع حقًا أن يغوص شخص ما في وثائق WAI-ARIA ويطبقها على المختار.

إذا تمكنت من إيجاد الوقت ، فيمكنني القيام بذلك بنفسي. لا يبدو أنه سيكون من الصعب جدًا القيام بذلك.

هل هناك أي تحرك لإدخال ARIA في هذا المشروع؟

حتى إذا كان يعمل مع التكنولوجيا المساعدة ، فإنه يحتاج أيضًا إلى الاختبار لمعرفة أنه يعمل أيضًا مع مستخدمي لوحة المفاتيح فقط.

راجع للشغل ، هذه مجرد طريقة للتحقق من الفاكهة المعلقة لتحسين إمكانية الوصول ، ولكن WAVE حددت بعض الأشياء الأساسية التي يجب تنظيفها -> http://wave.webaim.org/report؟url=http٪3A٪ 2F٪ 2Fharvesthq.github.com٪ 2 اختر٪ 2F & js = 2

تم معالجة أي من هذه القضايا الوصول؟ أرغب حقًا في استخدام هذا على موقع جامعتنا الرئيسي ، لكن مشكلات إمكانية الوصول هذه تضعني

+1 - لقد تلقينا ملاحظات من مستخدم كفيف أنه من الصعب استخدام القوائم المنسدلة المختارة ويواجه صعوبات في تحديد الخيارات. إنهم يستخدمون JAWS 14 كقارئ الشاشة الخاص بهم.

حاولت فقط باستخدام لوحة المفاتيح للتنقل فقط. يعمل تحديد العناصر بشكل جيد للغاية وبشكل حدسي (لأسفل لفتح القائمة لعنصر جديد ، لأعلى / لأسفل للتنقل في القائمة ، esc لإغلاق القائمة ، أدخل للتحديد). كانت إزالة العناصر من التحديد المتعدد أمرًا سهلاً (مسافة للخلف) ، إلا أن مسح قائمة منسدلة ذات تحديد واحد قدم نفسه بمزيد من التحديات. يبدو أنه بعد تحديد عنصر ، يمكنني الضغط لأسفل لفتح القائمة مرة أخرى ثم التنقل لأعلى حتى لا يتم تحديد أي خيار (يشبه إلى حد كبير عمل القائمة المنسدلة العادية إذا كان العنصر الأول فارغًا مثل الأمثلة) ، لكنني غير قادر على الضغط على Enter لتحديد الخيار الفارغ. قد تكون بعض الطرق لإلغاء تحديد خيار تمامًا (أو على الأقل خيارًا افتراضيًا فارغًا) مفيدة جدًا.

لست متأكدًا أيضًا مما إذا كان هذا مفيدًا ، لكنني لاحظت أن البيانات لا تزال مخزنة في عنصر تحكم التحديد المخفي (أفترض أن هذه هي الطريقة التي يتم بها تمريرها إلى النموذج). قد يكون من المفيد تحديث القائمة المنسدلة المختارة عندما يتم تغيير التحديد أيضًا - كنت أتحدث عما إذا كان هذا سيفي بالمعايير 4.1.2 من WCAG ، نظرًا لأن UAs يمكن أن تتفاعل مع عنصر التحكم المحدد برمجيًا ويمكننا التعامل مع Chosen كواجهة على على رأسها لأغراض الوصول.

بالنسبة للجزء الثاني ، نطلب تشغيل listz:updated حتى عندما تقوم بتغيير قيمة عنصر التحكم المحدد برمجيًا للتحديث المختار.
هذا مطلوب لأن المتصفحات لا تطلق حدثًا عندما يتم تغيير القيمة برمجيًا لإعلام Chosen بشأنها (وقد فعلوا ذلك ، لا يزال يتعين علينا تجنب الحلقات اللانهائية لأننا نقوم أيضًا بتغييرها برمجيًا)

سأبحث في إضافة إمكانية الوصول اليوم. marklagendijk أعتقد أن ما ذكرته هو أفضل طريقة للذهاب إلى أجهزة الصراف الآلي. تحديث سيئ في النتائج التي توصلت إليها.

قد يكون هذا مفيدًا ، وقد لا يكون كذلك ، ولكن لدينا إرشادات صارمة لإمكانية الوصول يجب اتباعها ومع الإصدار 1.0.0 ، عاد مُختبِر إمكانية الوصول الخاص بالعميل بالتعليقات التالية:

1. تم عرض "تحديد" المرتبط بـ "التسمية": لا شيء ؛ وهكذا
   يتم عزل "التسمية" فعليًا. فئة 'div = "selected-container-single" "التي تتطلب
   مكانه كعنصر تحكم النموذج ليس له اسم أو تسمية يمكن الوصول إليها برمجيًا.

2. لا يوجد تركيز واضح على القائمة المنسدلة فو.

1. لا يوجد تركيز مرئي على الرابط داخل القائمة المنسدلة فو.

أنا أستخدم هذا جنبًا إلى جنب مع وحدة Drupal Chosen. لدينا أيضًا مُختبِر أعمى لاحظ أنه بمجرد وصوله إلى المدخلات لم يكن على علم بقدرته على الكتابة ، ولم يتم إرجاع النتائج ، بما في ذلك "لم يتم العثور على نتائج".

تضمين التغريدة
أي تقدم في هذه المسألة. إنني أتطلع إلى إعادة تقديم المشكلة لإضافة Chosen إلى Drupal core وهذا هو الحاجز الرئيسي.

لقد وجدت مثالًا جيدًا حقًا لكيفية القيام بذلك هنا:
http://cookiecrook.com/test/aria/multiselect/listbox.html
ها هو جافا سكريبت: http://cookiecrook.com/test/aria/multiselect/js/aria.js

أعتقد أن هذا يعين تقريبًا الوظيفة الأساسية المختارة تمامًا. يبدو من السهل جدًا تنفيذه باستخدام مربع القائمة وخصائص aria القابلة للاختيار المتعدد
http://www.w3.org/TR/wai-aria/roles#listbox
http://www.w3.org/TR/wai-aria/states_and_properties#aria -multiselectable

سأقوم بعمل رقعة بنفسي لكني لست حارًا جدًا في js.

يوفر My PR المرتبط أعلاه حلاً عبر نهج أبسط بكثير يتمحور حول مبادئ التحسين التدريجي بدلاً من أخذ "الغوص العميق" في إنشاء عنصر واجهة مستخدم يمكن الوصول إليه بالكامل من قاعدة الكود المختارة الحالية. أرحب بأي وجميع ردود الفعل.

لماذا التركيز على ARIA بينما لا يزال غير مدعوم بشكل صحيح بواسطة IE8؟ لسوء الحظ ، لا يزال هذا المتصفح الذي يبلغ من العمر 5 سنوات مدرجًا في قائمة المستعرضات الشائعة. هذا يعني أنه أثناء الخضوع لفحص إمكانية الوصول ، فإن التطبيق الذي يعتمد على ARIA سيفشل.

لماذا لا تستخدم طريقة احتياطية تعطل ببساطة الكل المختار معًا وتوفر للمستخدم التحديد الأصلي؟ يمكن تحقيق ذلك عن طريق إضافة رابط (مخفي) يستخدم جزءًا صغيرًا من كود جافا سكريبت الذي يعطل المختار.

المورد المتعلق بدعم IE8 ARIA: http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html

يمكنك فقط اكتشاف المتصفح / الميزة وعدم استخدام Chosen عند استخدام IE8.

@ Daniel15 من المحتمل أن يكون ذلك

أحب أن أرى هذا يعمل. يحتاج قارئو الشاشة ومستخدمو لوحة المفاتيح فقط حقًا إلى الوصول إلى هذه الحقول. لست مهتمًا جدًا بـ IE8 ولكن على الأقل سيكون حلًا للمتصفحات الحديثة مقبولًا. أنا أحب فكرة IE8 الاحتياطية. يبدو أن هناك اثنين من العلاقات العامة الجيدة - أود أن أرى أيًا منهما مدمجًا.

+1 كبيرة على هذا من فضلك

+1 (+) يجب أن يكون لدينا هذا في Chosen. انها مشكلة

aria-label (خاصية)

يحدد قيمة سلسلة تسمي العنصر الحالي. انظر أيضا aria-labelledby.

الغرض من تسمية aria هو نفس الغرض من aria-labelledby. يوفر للمستخدم اسمًا يمكن التعرف عليه للكائن. يعتبر تعيين واجهة برمجة تطبيقات إمكانية الوصول الأكثر شيوعًا للتسمية هو خاصية الاسم الذي يمكن الوصول إليه.

إذا كان نص الملصق مرئيًا على الشاشة ، فيجب على المؤلفين استخدام aria-labelledby ولا يجب استخدام تسمية aria. قد تكون هناك حالات لا يمكن فيها تحديد اسم عنصر برمجيًا من محتوى العنصر ، وهناك حالات لا يكون فيها توفير تسمية مرئية هو تجربة المستخدم المطلوبة. توفر معظم اللغات المضيفة سمة يمكن استخدامها لتسمية العنصر (على سبيل المثال ، سمة العنوان في HTML [HTML]) ، ومع ذلك قد يقدم هذا تلميح أداة للمتصفح. في الحالات التي تكون فيها التسمية المرئية أو تلميح الأدوات المرئي غير مرغوب فيهما ، قد يقوم المؤلفون بتعيين الاسم الذي يمكن الوصول إليه للعنصر باستخدام تسمية aria. يعطي وكلاء المستخدم الأسبقية لـ aria-labelled بواسطة aria-label عند حساب خاصية الاسم الذي يمكن الوصول إليه.

Natshah هل يمكنك عمل طلب سحب مع التغيير؟

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()));
        });

شكرا.

مجزي :)

أي تحديث على هذا؟ لقد قمنا مؤخرًا بتنفيذ ما تم اختياره ، وكان لدينا ملاحظات من المستخدمين الذين يستخدمون التكنولوجيا المساعدة "Jaws" بأنهم لا يستطيعون استخدام الحقول المحددة على الإطلاق.

يبدو وكأنه قضية مهمة للنظر فيها. هل كان هناك أي تحرك على هذه الجبهة؟

لا أعرف شيئًا ، لسوء الحظ ، من الصعب جدًا تكرار المشكلات نظرًا للمجموعات الهائلة من التقنيات المساعدة مع المتصفحات وأنظمة التشغيل ... عادةً ما دمت تستطيع التنقل عبر لوحة المفاتيح + لديك تطبيق 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)

شكرا

جرب إذا نجح الأمر. يجب أن يكون الهيكل بهذه الطريقة. :)

لقد اتخذت خطوة في إضافة بعض عناصر ARIA استنادًا إلى العمل الذي قام به kirstenmalin . كان هذا العمل دفعة جيدة نحو A11Y ، لكنه كان يفتقد بعض العناصر التي أضفتها.

لدي فرع متوفر هنا يقوم بما يلي:

تسميات ARIA والسمات المفيدة الأخرى

• يضيف عناصر النغمة التالية إلى مربع إدخال البحث
  
  
  
  • الدور = "combobox"
  
  
  • تُستخدم للإشارة إلى أنه يمكن للمستخدمين الكتابة لتحديد خيار أو إضافة عناصر جديدة إلى القائمة
  
  
  • aria-haspopup (ضمنيًا عند استخدام دور combobox)
  
  
  • يستخدم للإشارة إلى أن هذا المربع يحتوي على قائمة ذات صلة
  
  
  • الأغنية الموسعة
  
  
  • مطلوب عند استخدام مربع التحرير والسرد ، يشير إلى أن قائمة النتائج مرئية أو مخفية
  
  
  • يجب تحديث الحالة ديناميكيًا حيث يتم تنشيط / إلغاء تنشيط الحقل المختار
  
  
  • aria-activedescendant = "id_of_highlighted_option"
  
  
  • يستخدم للإشارة إلى الخيارات هي القيمة المحددة حاليًا
  
  
  • هذا يحتاج إلى التحديث عند تحديد خيار جديد
  
  
  • تمتلك aria = "id_of_list_of_options"
  
  
  • يشير إلى قائمة الاختيارات التي يرتبط بها مربع البحث هذا
  
  
  • aria-autocomplete = "list"
  
  
  • "إذا عيّن أحد المؤلفين قيمة مربع تحرير وسرد للإكمال التلقائي ل aria إلى" قائمة "، يجب على وكلاء المستخدم كشف التغييرات على السمة aria-activedescendant في مربع التحرير والسرد بينما يظل مربع التحرير والسرد مركّزًا. إذا حدث تغيير في سمة aria-activedescendant أثناء مربع التحرير والسرد تركز ، يجب أن تنبه التقنيات المساعدة المستخدم بهذا التغيير ، على سبيل المثال ، من خلال نطق النص البديل للعنصر الناشئ النشط الجديد. يجب على المؤلفين ربط حقل النص combobox بصندوق القائمة الخاص به باستخدام aria-own.
  
  
  • aria-labeledby = "id_of_field_label"
  
  
  • هذا هو معرف عنصر تسمية النموذج الذي تم اختياره ليحل محل
  
  
• يضيف السمات التالية إلى قائمة الخيارات
  
  
  
  • بطاقة تعريف
  
  
  • معرف بسيط يعتمد على معرف حقل النموذج ليتم استهدافه بواسطة سمة تملك aria في مربع إدخال البحث
  
  
  • الدور = "مربع القائمة"
  
  
  • "أداة تسمح للمستخدم بتحديد عنصر واحد أو أكثر من قائمة الاختيارات."
  
  
• يضيف السمات التالية لكل خيار فردي في قائمة الخيارات
  
  
  
  • بطاقة تعريف
  
  
  • معرف بسيط يعتمد على فهرس الخيار في القائمة ومعرف حقل النموذج الذي سيتم استخدامه بواسطة aria-activedescendant والذي يشير إلى العنصر المحدد حاليًا
  
  
  • الدور = "الخيار"
  
  
  • عنصر قابل للتحديد في قائمة الاختيار.
  
  
  • آريا مشغول
  
  
  • سبب احتياجنا إلى هذا هو أنه عند تهيئة Chosen في حقل ، فإنه _ لا _ يبني قائمة الخيارات حتى يتم تنشيط الحقل لأول مرة.
  
  
  • هذه مشكلة تتعلق بالتكنولوجيا المساعدة ، فضلاً عن الماسحات الضوئية التي تبحث عن مشكلات إمكانية الوصول. نظرًا لأن مربع البحث (role = "combobox") يقوم الآن بحذف أنه يمتلك قائمة (aria-owns = "id_of_list_of_options") ، يجب أن يكون لدى مربع القائمة (قائمة النتائج الخاصة بنا) _ خيارات بداخله أو أن يكون مشغولًا من أجل الامتثال له المواصفات.
    
    
    
    
    
    • لست متأكدًا بنسبة 100٪ أن هذه هي الخطوة الصحيحة. إنه يمنع بالتأكيد الحقول من أن يتم وضع علامة عليها بواسطة الماسحات الضوئية ، لكن هذه ليست مشغولة تمامًا ، لم نقم بعد ببناء الخيارات.
    
    
    
  
  
  • آمل أن يتمكن شخص لديه خبرة أكبر في A11Y من التأثير في هذا الأمر.
  
  
  • لقد فكرت أيضًا في نهج أكثر جذرية ، والذي يتضمن بناء قائمة النتائج عند تنشيط الحقل لأول مرة ، ولكن هذا يتضمن إضافة مشغل جديد إلى Chosen.
    
    
    
    
    
    • كان هذا المشغل في الأساس عبارة عن تمريرة إلى طريقة winnow_results ، التي بنيت نتائج البحث (لا تزال مخفية) ، لكنها جعلت الماسحات الضوئية سعيدة.
    
    
    
  
  

إدارة الدولة

• إدارة السمة الموسعة للنسخة
  
  
  
  • للإشارة إلى متى يجب أن تكون نتائج البحث ذات صلة بالتكنولوجيا المساعدة ، نحتاج إلى تبديل السمة الموسعة للنسخة حيث يتم تنشيط / إلغاء تنشيط الحقول.
  
  
  • أسهل طريقة للقيام بذلك (AFAIK) هي ضبط السمة أثناء الطرق close_field و activate_field .
  
  
  • إن التبديل البسيط من صواب إلى خطأ أو خطأ إلى صحيح في كل من هذه الطرق كافٍ لتحديث الحالة
  
  

سأبدأ في استخدام هذا الإصدار في العديد من مشاريعنا ، وسأواصل تحديث فرعي بالتغييرات حيث نحصل على نظرة أكثر تفصيلاً لمشاريعنا من وجهة نظر A11Y.

شكرًا لجميع الذين قرأوا هذا حتى الآن ، أعلم أنه كثير ، ومن فضلك ، إذا كان لديك ملاحظات ، فأخبرني! أريد أن أدفع هذا إلى أقصى حد ممكن.

cooperfellows الرجاء فتح طلب سحب مع التغييرات الخاصة بك

@ stof تم ، ولكن كما قلت ، لست خبيرًا في A11Y ، وأخطط لإجراء المزيد من الاختبارات. أردت فقط أن أشارك في أول تمريرة مستقرة لي في هذا.

هل هناك أي تحديث "رسمي" مع هذا؟ هل تم إجراء أي تغييرات بناءً على جهود cooperfellows ؟

السبب الذي أطرحه هو أننا نحصل على أعداد متزايدة من مستخدمي Jaws يبلغون عن أن الأداة غير قابلة للاستخدام ، مما يجعل النموذج الذي يبحثون عنه غير قابل للاستخدام بشكل فعال.

يمكننا التكرار ، وسعداء جدًا بمساعدة / مشاركة الأمثلة إذا كان ذلك يساعد؟

تم تقديم طلب السحب (كان به بعض المشكلات البسيطة التي تم حلها بعد وقوع الحادث) ولكن لم يحدث شيء بعد. الفرع الذي أستخدمه في الإنتاج الآن هنا:

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

أنا أحب بعض ردود الفعل الأخرى بالرغم من ذلك. ليس لديّ Jaws ، لذا فأنا أعتمد على عمليات التدقيق من مختلف الأدوات عبر الإنترنت.

إذن هذا الفرع هو في الأساس إنتاج حالي بالإضافة إلى تغييراتك ، أو إصدار سابق به تغييرات حديثة لم يتم دمجها بعد؟

(شكرا راجع للشغل)

نعم ، هذا صحيحwcndave. على الرغم من أن العلاقات العامة يمكن حقًا استخدام بعض العيون الأخرى للمراجعة.

cooperfellows يسعدني أن أساعد في اختبار إمكانية الوصول حيث أحتاج إلى نقل التنفيذ المختار الحالي إلى تصميم جديد يحتاج إلى تلبية WCAG 2.

أي تحديث على طلب السحب الخاص بك؟

سؤال سخيف - هل لديك نسخة مجمعة من JavaScript يمكنني تنزيلها؟
أو هل أحتاج إلى تثبيت فنجان القهوة وتجميعه بنفسي؟

KITSKevinBonett شكرا للمساعدة!

مرفق هو ملف مضغوط لإصدار jquery و proto type ، سواء كان مضغوطًا أو غير مضغوط.

مجمعة- a11y- اختيار- الاستعلام-proto.zip

cooperfellows كان ذلك سريعًا. سأضيف إلى مشروعنا ، وأجري بعض الاختبارات ، وأعلمك ...

KITSKevinBonett Ya ، أتطلع إلى الحصول على مزيد من الأنظار عليه ، لأنني لست خبيرًا في A11Y. لذلك فإن أي ردود فعل (قاسية وإيجابية) موضع تقدير.

مرحبًا cooperfellows - لقد راجعت التنفيذ - جيد جدًا بالفعل.

هناك بعض المشكلات التي قد لا يتم حلها (بسهولة) بسبب عدم توافق قارئ الشاشة / المتصفح.

لقد وثقت نتائجي في المرفق. لقد قدمت توصية بسيطة أو اثنتين وآمل أن تجدها مفيدة.

_تحديث_

1. ذكرت بعض تعليقاتي وظائف محلية لتطبيقنا - لقد أزلتها.
2. مشكلة تتعلق بالكتابة داخل "combobox" والضغط على ENTER - لم يتم تنشيط نموذجنا - مرة أخرى ، هذه مشكلة تنفيذ محلية.
3. تم تحديث ملف ZIP أدناه لإزالة (1) و (2).

aria- اختيار-plugin.zip

مرحبًا cooperfellows - هل كان التدقيق الخاص بي منطقيًا؟

مرحبًا KITSKevinBonett لقد كنت بعيدًا منذ أسبوع في إجازة. سوف ألقي نظرة على هذا بمجرد أن أكون منشغلاً بعملي الآخر. شكرًا على التعليقات ، أنا متأكد من أنها مفيدة.

KITSKevinBonett شكرًا على المراجعة ، يبدو هذا دقيقًا جدًا. لقد كسرت أفكاري بناءً على أقسام التدقيق كما حددتها.

ترميز HTML تم إنشاؤه بواسطة البرنامج المساعد

• هل هناك ملاحظات هنا؟ أم أنك فقط تظهر ما تم إنشاؤه؟

سلوك لوحة المفاتيح فقط

• "ومع ذلك ، عند تحديد الخيار ، يتم فقد تركيز لوحة المفاتيح عند استخدام الجدولة مرة أخرى."
  
  
  
  • أعتقد أن هذا يمكن حله عن طريق تشغيل وإيقاف تشغيل السمة المخفية aria حيث يصبح هذا العنصر مرئيًا / مخفيًا؟
  
  
  • سوف أنظر في هذا النهج.
  
  
• "مشكلات CSS المعطلة"
  
  
  
  • التحديد القياسي مرئي
  
  
  • لا يمكنني إعادة إنشاء هذا ، هل يمكنك أن تعطيني لقطة شاشة أو ممثل شاشة أو شيء من هذا القبيل؟
  
  
  • لا يوجد دليل مرئي عند تمييز النتائج باستخدام لوحة المفاتيح.
  
  
  • يمكننا التفاف نص العنصر المميز حاليًا في علامة <em> ، والتي تصبح مائلة (على الأقل في Chrome).
    
    
    
    
    
    • المشكلة المحتملة هنا هي أن البحث يستخدم أيضًا <em> للإشارة إلى تطابقات نصية ، لذلك سأكون قلقًا من احتمال تعارضها مع بعضها البعض.
    
    
    
  
  

قارئات الشاشة

• لا يمكنني الوصول إلى JAWS ، لذلك لن أتمكن من فعل الكثير هنا. سأقوم بتدوير التجربة عندما أحصل على مزيد من الوقت لمعرفة ما يمكنني العثور عليه.
• قارئات الشاشة هي المجال الذي سأقدر حقًا المزيد من المساعدة فيه ، لذا شكرًا على التفاصيل التفصيلية.

خواطر الأغنية

• يمكنني إزالة سمة haspopup ، كما أشرت ، إنها زائدة عن الحاجة.
• السبب في أنني أضفت aria-busy ، هو أنه افتراضيًا ، لا يُنشئ Chosen أي عناصر قائمة في div المخفي حتى يتم وضع التركيز.
  
  
  
  • هذا يعني أن عنصر role = "listbox" لا يحتوي على خيارات افتراضيًا ، وهو ما كان يعطيني مشكلات عند فحص هذا باستخدام الأدوات. بإضافة عنصر aria-busy في البداية ، يتم تجاهله بواسطة تلك الأدوات.
  
  
  • سبب المشكلة هو أن عنصر مربع القائمة _يجب أن يمتلك_ عنصر خيار ( مصدر )
  
  
  • تتم إزالته في المرة الأولى التي يتم فيها ملء القائمة ، لذلك بدا لي أنه وضع لا ضرر ولا ضرار.
  
  
• تبدو إضافة اختيار الأغنية كخطوة واضحة ، لا أصدق أنني فاتني ذلك. شكرا للقبض عليه.
  * خواطر ختامية *
  هل كتبت HTML لهذا التدقيق بنفسك ، أم أنشأت أداة هذا لك؟ انها مفيدة جدا لذا شكرا مرة أخرى.

cooperfellows - إجابات لأسئلتك:

ترميز HTML

• فقط عرض ما يتم إنشاؤه خلال كل مرحلة من مراحل سلوك المكون الإضافي.

سلوك لوحة المفاتيح

• "التركيز المفقود" موجود فقط في Firefox. يمكنك إضافة tabindex = "- 1" لمنع التركيز ، ثم إزالته مرة أخرى. فلن تحتاج إذن إلى ARIA.

تم تعطيل CSS

• بشكل أساسي ، يكون SELECT الأصلي مرئيًا على الصفحة ويمكن استخدامه مع UP | أسهم لأسفل لأن السلوك الافتراضي للمتصفح يُظهر الخيارات المختلفة أثناء التنقل خلالها.
• يكون HTML الذي يعرضه المكون الإضافي مرئيًا أيضًا ، لكن القائمة المنسدلة لا تشير إلى "الخيار" الذي تم تمييزه.
• لقد اقترحت استخدام EM. استخدم STRONG بدلاً من ذلك - لها معنى دلالي أكثر من EM في HTML5. انظر http://html5doctor.com/ib-em-strong-element/
• لكنني لا أعتقد أن هذه مشكلة كبيرة حيث لا يزال بإمكان المستخدمين استخدام SELECT.
• انظر لقطة الشاشة

قارئات الشاشة

• هذا أمر صعب لأن النتائج تختلف اعتمادًا على مجموعة المتصفح وقارئ الشاشة المستخدمة والإصدارات.
• ما أود قوله هو أن تحديثات إمكانية الوصول الخاصة بك إلى المكون الإضافي من حيث أدوار / حالات / خصائص ARIA تتماشى مع توصيات W3C / WAI. لذا فهذه أخبار جيدة. :)
• الأمر متروك لمصنعي المستعرضات وقارئ الشاشة للتأكد من أن برامجهم تلتزم بها.

ARIA

• تفسيرك لـ "aria-busy" منطقي. حتى لو كانت قديمة ، فلن تسبب أي مشاكل.
• تدوين HTML. صناعة يدوية. لقد كنت أعمل على إنشاء مكتبة / دليل نمط المعيشة التابع لواجهة المستخدم للشركة التي أعمل بها ، لذلك استخدمت مكونات من هناك. لم يستغرق وقتا طويلا على الإطلاق. كان الجزء الأصعب هو إعادة الاستماع إلى كل مخرجات قارئ الشاشة للتأكد من أنني قد التقطت كل شيء بشكل صحيح.

أتمنى أن يساعد كل هذا في طلب السحب الخاص بك. لقد قمت بعمل رائع مع A11Y. :)

مرحبا،

أنا أعمى. لقد اختبرت عمل cooperfellows مع JAWS. إنه يعمل بشكل مثالي. يتم نطق الخيار المحدد أثناء قيامي بالسهم عبر الخيارات.

أي أخبار عن دمج هذا في الماجستير؟

في عملي اليومي ، أستخدم MISP (منصة مشاركة معلومات البرامج الضارة - https://github.com/MISP/MISP) ، والتي قرر مطوروها مؤخرًا استخدام "المختار" لمربعات التحرير والسرد للإكمال التلقائي. لقد أصبح كابوسا بالنسبة لي.

شكرا لكم مقدما على مساعدتكم.

بعد عدة اختبارات ، يمكنني التأكد من أن النسخة المجمعة (أرشيف .zip) المنشورة أعلاه (في 1 يوليو 2016) تعمل.

ومع ذلك ، عندما أحاول فرع cooperfellows ، أو عندما أقوم باستنساخ فرع cooperfellows ثم دمجها مع حصاد / ماستر ، يتم نطق خيارات القائمة بشكل صحيح بواسطة JAWS لكن مفتاح ENTER لا يرسل النموذج.

مرحبًا @ obert01 ، شكرًا جزيلاً لإلقاء نظرة على هذا باستخدام JAWS ، كانت تلك قطعة كبيرة كنت

هذا الفرع قديم منذ فترة الحصاد / الفرع الرئيسي الحالي ، سأحتاج على الأرجح إلى مراجعة التغييرات وتعديل العلاقات العامة الخاصة بي من أجل إعادة الأمور إلى حالة العمل.

سأحاول الوصول إلى هذا في وقت ما قبل نهاية الشهر ، لقد احتفظت بنسخة احتياطية في العمل الآن.

أرغب في جذب انتباه أحد المساهمين إليه مرة أخرى بمجرد تحديثه ، لذلك سأقوم

شكرا جزيلا.

لمعلوماتك ، يمكنني الاختبار مع جميع مجموعات برامج قراءة الشاشة JAWS و NVDA ، باستخدام المتصفح التالي: Internet Explorer 11 و Google Chrome و Firefox ESR و Firefox Standard و Microsoft Edge.

أي تقدم في هذا؟

يؤسفني الإصرار ، لكن عملي اليومي يعاني من نقص إمكانية الوصول.

علاوة على ذلك ، فإن إضافة دعم إمكانية الوصول سيسمح باستخدام Chosen في مواقع القطاع العام / الإدارة ، نظرًا لأن التنظيم في المزيد والمزيد من البلدان يسير بهذه الطريقة.

شكرا لك

مرحبا،
لدينا تطبيق تم اختياره والآن نحتاج إلى دعم إمكانية الوصول ولكن ما يمكنني رؤيته هو أنه لم يتم دمج هذا بعد. سيكون من المفيد حقًا إذا تمكنcooperfellows من إنهاء هذا والدمج من فضلك.

مرحبًا @ obert01 و csmuthukuda ،

لقد قمت للتو بإجراء تحديثات لجعل العلاقات العامة الخاصة بي تصل إلى أحدث إصدار من Chosen ، يرجى إلقاء نظرة هنا:
https://github.com/harvesthq/chosen/pull/2596

يمكنك الحصول على نسخة من مستودعي المتشعب واختبارها من جانبك. أحب بعض ردود الفعل الواقعية.

لقد اجتازت جميع فحوصات TravisCI ، لكنني لا أعتقد أنها تغطي أي مشكلات في A11Y. اسمحوا لي أن أعرف ما هو رأيك.

مرحبًا @ cooperfellows ،
شكرا جزيلا لتفانيك في الحفاظ على هذا على قيد الحياة. سأختبر هذا وأعلمك بردود الفعل على ذلك. آمل حقًا أن يفكر المالكون في دمج هذا بالسيد. هذا مطلب إلزامي الآن.

شكرًا csmuthukuda ، أود أن يتم دمجها في ....

pfillerstoftjschuckkoenpunt، أي شيء يمكنني القيام به للمساعدة في الحصول على هذا بدا في؟ إنها حقًا قطعة مفقودة لنظام رائع بشكل لا يصدق.

مرحبًا @ cooperfellows ،

لقد اختبرت عملك الرائع مع معظم مستعرضات الويب الحالية وقارئات الشاشة JAWS و NVDA. شكرا لك !

يعمل التنقل بين الخيارات باستخدام لوحة المفاتيح بشكل جيد: ملاحظات الكلام وبرايل مثالية ، مما يعني أن جميع سمات ARIA محددة جيدًا. ومع ذلك ، عندما أضغط على ENTER لاختيار أحد الخيارات ، لا يحدث شيء. لست من ذوي الخبرة الكافية في JavaScript لتحديد ما إذا كانت المشكلة تأتي من Chosen ، أو ما إذا كانت موجودة في التطبيق الذي يستخدمها.

لإعادة الإنتاج ، حاول تحديد خيار في مربع تحرير وسرد مختار فقط باستخدام لوحة المفاتيح: TAB للتركيز على مربع التحرير والسرد ، ومفاتيح الأسهم لتصفح القائمة ، و ENTER للتحديد.

مرة أخرى، شكرا جزيلا لك.

شكرا لهذه المعلومات @ obert01. سوف ألقي نظرة وأرى ما يمكنني أن أجده.

@ obert01 هل يمكنك محاولة استخدام كمان JS هذا للتأكد من أنه يعمل / لا يعمل؟ هذا الكمان هو تحميل نسخة jQuery المترجمة من آخر التزام لي.

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

أنا قادر على التنقل في تلك القائمة المنسدلة باستخدام لوحة المفاتيح (أحدث إصدار من Chrome) ، لكنني لا أقوم بتشغيل قارئ الشاشة.

اسمحوا لي أن أعرف ما هو رأيك.

مرحبًا @ cooperfellows ،

لا مشكلة في JS Fiddle. وبالتالي أفترض أن المشكلة ترجع إلى طريقة استخدام Chosen في MISP (https://www.misp-project.org/).

سوف أتحقق من ذلك مع فريق مشروع MISP.

شكرا

شكرا @ obert01. من فضلك لا تخبرني بما وجدت. يمكن أن يشير إلى عدم التوافق مع إعداد محدد لـ Chosen ، لذلك إذا كانت هناك طريقة بالنسبة لي لمعرفة كيفية استخدام MISP لها ، فيمكنني محاولة إلقاء نظرة على تنفيذها.

هل تم اختياره يستخدم في مكان ما بشكل علني؟

cooperfellows ، هل يمكنك من فضلك إعطائي بنية جديدة مع أحدث التغييرات التي لا أعرف كيفية

@ obert01cooperfellows أنا فقط حاولت كمان مع NVDA، يبدو أن تنقل لوحة المفاتيح يعمل تماما (بما في ذلك اختيار مع المفتاح ENTER). ومع ذلك ، عندما أتنقل عبر مفاتيح الأسهم لأعلى ولأسفل ، يقرأ قارئ الشاشة ، "________ لم يتم التحديد" ، أي "لم يتم تحديد برمودا". هل هذا التصرف المتوقع؟

لدي نفس المشكلة مثل @ woenlee. انها ليست ضارة جدا. ولكن ربما ، يجب التحقق من الطريقة التي يتم بها تعيين السمة "المحددة" على العنصر المحدد.

ما هو السلوك المتوقع عند "دخول" و "الخروج" من عنصر قائمة؟ متى
يمكنك التنقل لأسفل إلى عنصر جديد ، في حالة قراءته لما تم تحديده حديثًا
العنصر؟ هل تعلن أيضًا عما لم يعد محددًا؟ تضمين التغريدة

يوم الأحد 25 أغسطس 2019 الساعة 12:18 مساءً Olivier BERT [email protected]
كتب:

لدي نفس المشكلة مثل @ woenlee https://github.com/woenlee . ليس
ضار جدا. ولكن ربما ، الطريقة التي يتم بها تعيين السمة "المحددة" على
يجب فحص العنصر المحدد.

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/harvesthq/chosen/issues/264؟email_source=notifications&email_token=ABT3ZTIESGLX6IYW4BF2QCLQGKWDVA5CNFSM4AATGGB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/ABT3ZTMH2KUYYE7HNO2UGH3QGKWDVANCNFSM4AATGGBQ
.

-
~ كوبر

cooperfellows بعد إجراء بعض اختبارات إمكانية الوصول بالفأس ، يبدو أنني وجدت خطأ في العلاقات العامة الخاصة بك ، وهو ما يفسر سبب قيامها بذلك. في السطر 342 من Abstract-chosen.coffee ، يحتوي الإدخال على دورين مخصصين له ، "combobox" و "listbox".

<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>

بعد اعطاء

دفع العملاء من Harvest هنا ، والاختبار ليكون متاحًا داخليًا اصطدم بهذا. إمكانية الوصول أمر لا بد منه ، وسننتقل من Harvest إذا لم تتم معالجة هذا الأمر ، إذا لم يُظهر المشرف في Harvest بعض الدعم لهذا الأمر قريبًا على الأقل.

@ obert01 هل يمكنك محاولة استخدام كمان JS هذا للتأكد من أنه يعمل / لا يعمل؟ هذا الكمان هو تحميل نسخة jQuery المترجمة من آخر التزام لي.

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

أنا قادر على التنقل في تلك القائمة المنسدلة باستخدام لوحة المفاتيح (أحدث إصدار من Chrome) ، لكنني لا أقوم بتشغيل قارئ الشاشة.

اسمحوا لي أن أعرف ما هو رأيك.

تضمين التغريدة
كنت أختبر JS Fiddle مع JAWS 2019 وشهدت شيئًا مختلفًا قليلاً عند التنقل بين الخيارات باستخدام مفاتيح الأسهم لأعلى ولأسفل.
على Google Chrome 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 الخيار المميز عند الضغط لأسفل حتى تصل إلى الخيار العاشر فيأنتيغوا وبربودا . يقوم المربع بالتمرير التلقائي قليلاً لتمييز أنتيغوا وبربودا ثم قراءة الخيار.

في IE 11.0.9600.19463: يبدو أن التنقل باستخدام مفاتيح الأسهم يقرأ الخيار المميز الحالي بشكل صحيح صعودًا وهبوطًا. لا يتطلب نوعا من العرض.

هل ترغب في معرفة ما إذا كان أي شخص آخر قد جرب هذا. تضمين التغريدة

مرحبا وشكرا على عملك.

لسوء الحظ ، هذا لا يعمل بشكل صحيح. من الصعب للغاية وصف ذلك ، حيث يتغير السلوك في وظيفة المتصفح أو قارئ الشاشة المستخدم.

أعتقد أن بعض خصائص النسخة غير موجودة أو لم يتم تحديثها. هنا المشاكل العامة التي أواجهها:

• مشكلة التمرير: عندما أسهم لأسفل وأصل إلى نهاية قائمة العناصر المرئية ، يجب أن أضغط مرتين على السهم لأسفل للتركيز على العنصر التالي.
• عندما أضغط على ENTER لتحديد عنصر ، لا يتم تحرير التركيز. سيكون السلوك المتوقع هو أن يعود قارئ الشاشة إلى وضع التنقل السريع ويسمح لي بقراءة بقية صفحة الويب. بدلاً من ذلك ، لا تزال مفاتيح الأسهم تتحكم في خياري في القائمة.
• لا تسمح البرامج النصية الحالية بمعرفة ما إذا كانت المقترحات معروضة وعددها. في معظم الإضافات المحددة التي يمكن الوصول إليها والتي أعرفها ، يعلن JAWS / NVDA عن عدد النتائج التي تتطابق مع السلسلة التي تم إدخالها في إدخال النص.
• أخيرًا ، لدي انطباع بأن JAWS لا يفهم ما إذا كانت القائمة متعاونة أو موسعة. في بعض الأحيان ، بعد الاختيار مع ENTER ومحاولة قراءة بقية الصفحة ، لا يزال JAWS يقرأ أحدث العروض التي تم عرضها.

نقاط جيدة:

• جزء الإكمال التلقائي يعمل بشكل جيد. إذا قمت بإدخال "fra" ، فسينطق JAWS "فرنسا" ، ويمكنني الضغط على ENTER للتحديد.
• تتم قراءة العناصر بشكل صحيح كما أسهم في القائمة.

للأسف لا أعرف الكثير من الأشياء فيما يتعلق بـ ARIA و JavaScript والويب بشكل عام. أقترح عليك التأكد من تعيين الحد الأقصى من خصائص ARIA وتحديثه بشكل صحيح.

يرجى الاطلاع أدناه على العرض التوضيحي ورمز المكون الإضافي JQuery الذي يتفاعل تمامًا مع برامج قراءة الشاشة:
https://a11y.nicolas-hoffmann.net/autocomplete-list/

أنا آسف لعدم قدرتي على المساعدة أكثر.

لا تتردد في نشر عروض تجريبية جديدة لعملك. أنا سعيد باختبار لك.