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 результатов Chosen будет иметь role = "menu" aria-activedescendant = "active-menuitem", а результаты <li> будут иметь role = "menuitem".
Поле поиска в раскрывающемся списке Chosen, вероятно, также потребует какой-то роли ARIA ??

@dotdreaming вы указываете на правильную документацию, но упомянутые вами роли не совсем верны.

Я считаю, что следует использовать следующие роли:

• поле со списком .
• вариант

Я думаю, было бы действительно круто, если бы кто-нибудь действительно погрузился в документацию WAI-ARIA и применил ее к выбранному.

Если найду время, то займусь этим сам. Не похоже, что это будет очень сложно.

Есть ли какие-нибудь предложения по вовлечению ARIA в этот проект?

Даже если он работает с вспомогательной технологией, его также необходимо протестировать, чтобы убедиться, что он также работает с пользователями, использующими только клавиатуру.

Кстати, это всего лишь способ проверить низко висящие плоды для улучшения доступности, но WAVE определила некоторые довольно простые вещи, которые следует очистить -> http://wave.webaim.org/report?url=http%3A% 2F% 2Fharvesthq.github.com% 2Fchosen% 2F & js = 2

Какие-либо из этих проблем доступности были решены? Мне очень нравится использовать это на нашем основном сайте университета, но эти проблемы с доступностью меня отталкивают

+1 - Мы получили отзыв от слепого пользователя о том, что выпадающие списки Выбранные трудно использовать, и у них возникают трудности с выбором параметров. Они используют JAWS 14 в качестве программы для чтения с экрана.

Пробовал просто использовать клавиатуру только для навигации. Выбор элементов работает очень хорошо и интуитивно (вниз, чтобы открыть список для нового элемента, вверх / вниз, чтобы перемещаться по списку, esc, чтобы закрыть список, введите, чтобы выбрать). Удаление элементов из множественного выбора было простым (backspace), однако очистка раскрывающегося списка с одним выбором представляла собой больше проблем. Похоже, что, выбрав элемент, я могу нажать вниз, чтобы снова открыть список, а затем перемещаться вверх до тех пор, пока не будет выбран ни один из вариантов (во многом как обычный раскрывающийся список работает, если ваш первый элемент пуст, как в примерах), но я невозможно нажать Enter, чтобы выбрать нулевой параметр. Был бы очень полезен какой-нибудь метод для полной отмены выбора опции (или, по крайней мере, пустой опции по умолчанию).

Также не уверен, стоит ли это того, но я заметил, что данные все еще хранятся в скрытом элементе управления выбором (я предполагаю, что это то, как они передаются в форму). Возможно, стоит обновить раскрывающееся меню Chosen при изменении выбора - я обсуждал, будет ли это удовлетворять критерию 4.1.2 из WCAG, поскольку UA могут программно взаимодействовать с элементом управления select, и мы могли бы рассматривать Chosen как фасад на наверху в целях доступности.

для второй части нам требуется запускать listz:updated даже если вы программно изменяете значение элемента управления select для обновления selected.
Это необходимо, потому что браузеры не запускают событие, когда значение изменяется программно, чтобы Chosen знал об этом (и если бы они это делали, нам все равно пришлось бы избегать бесконечных циклов, поскольку мы также меняем его программно)

Сегодня я собираюсь рассмотреть вопрос о добавлении специальных возможностей. @marklagendijk Я думаю, что то, что вы упомянули, лучший способ зайти в банкомат. Я обновлю свои выводы.

Это может быть полезно, а может и нет, но у нас есть строгие рекомендации по обеспечению доступности, и с версией 1.0.0 наш клиентский тестер доступности вернулся со следующими комментариями:

1. у 'select', связанного с 'label', есть display: none; и так
   «ярлык» фактически осиротел. 'Div class = "selected-container-single"', который принимает
   его место, поскольку элемент управления формы не имеет программного доступного имени или метки.

2. В выпадающем списке нет видимого фокуса.

1. В раскрывающемся списке нет видимого фокуса на ссылке.

Я использую это вместе с модулем Drupal Chosen. У нас также есть слепой тестировщик, который заметил, что как только он дошел до ввода, он не знал, что может печатать, и что результаты не возвращаются, включая «Результаты не найдены».

@marklagendijk
Любой прогресс по этому вопросу. Я собираюсь повторно представить проблему, чтобы добавить Chosen в ядро ​​Drupal, и это основной блокировщик.

Я нашел действительно хороший пример того, как это можно сделать здесь:
http://cookiecrook.com/test/aria/multiselect/listbox.html
Вот javascript: 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.

Мой PR, указанный выше, предлагает решение с помощью гораздо более простого подхода, основанного на принципах прогрессивного улучшения, вместо того, чтобы делать «глубокое погружение» в создание полностью доступного виджета из текущей кодовой базы Chosen. Я приветствую любые отзывы.

Зачем сосредотачиваться на ARIA, если она все еще не поддерживается IE8? К сожалению, этот браузер 5-летней давности все еще находится в списке распространенных браузеров. Это означает, что при сканировании доступности реализация, зависящая от ARIA, потерпит неудачу.

Почему бы не использовать резервный метод, который просто отключает все выбранные и предоставляет пользователю исходный выбор? Этого можно добиться, добавив (скрытую) ссылку, которая будет использовать небольшой фрагмент кода javascript, который отключает выбранный.

Ресурс, посвященный поддержке IE8 ARIA: http://www.w3.org/TR/WCAG20-TECHS/wai-aria_notes.html

Вы можете просто выполнить обнаружение браузера / функции и не использовать Chosen при использовании IE8.

@ Daniel15 Это, наверное, было бы даже проще исправить. Спасибо за то, что поделились своими мыслями. В своем посте я просто пытался указать, что реализация ARIA (на данный момент) не означает, что она доступна и готова к использованию в приложениях, которые должны быть совместимы с WCAG 2.0.

Хотелось бы увидеть, как это работает. Программы для чтения с экрана и пользователи, использующие только клавиатуру, действительно нуждаются в доступе к этим полям. Меня не особо беспокоит IE8, но, по крайней мере, решение для современных браузеров было бы приемлемым. Мне очень нравится запасной вариант IE8. Похоже, есть два хороших PR - я бы хотел, чтобы любой из них объединился.

большой +1 по этому поводу, пожалуйста

+1 (+) Нам нужно, чтобы это было в Избранных. Это проблема

aria-label (свойство)

Определяет строковое значение, которое маркирует текущий элемент. Также см. Aria-labelledby.

Назначение aria-label такое же, как и у aria-labelledby. Он предоставляет пользователю узнаваемое имя объекта. Наиболее распространенное сопоставление API доступности для метки - это свойство Accessibility name.

Если текст метки виден на экране, авторам СЛЕДУЕТ использовать aria-labelledby и НЕ СЛЕДУЕТ использовать aria-label. Могут быть случаи, когда имя элемента не может быть определено программно из содержимого элемента, и есть случаи, когда предоставление видимой метки не является желательным для пользователя. Большинство основных языков предоставляют атрибут, который можно использовать для наименования элемента (например, атрибут title в HTML [HTML]), но при этом может отображаться всплывающая подсказка браузера. В случаях, когда видимая метка или видимая всплывающая подсказка нежелательны, авторы МОГУТ установить доступное имя элемента с помощью aria-label. Пользовательские агенты отдают приоритет aria-labelledby перед 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()));
        });

Спасибо.

Награждение :)

Есть новости по этому поводу? Недавно мы внедрили selected и получили отзывы от пользователей, использующих вспомогательную технологию «Jaws», о том, что они вообще не могут использовать поля выбора.

Кажется, это важный вопрос, на который нужно обратить внимание. Было ли движение на этом фронте?

Ничего из того, о чем я знаю, к сожалению, очень сложно воспроизвести проблемы, учитывая массивные комбинации вспомогательных технологий с браузерами и ОС ... Обычно, пока вы можете перемещаться с клавиатуры + у вас есть правильная реализация ARIA, она должна работать в большинстве случаев.

Для быстрого исправления я обратился к тому, чтобы программы чтения с экрана по крайней мере могли использовать исходное поле выбора. Для этого вместо того, чтобы скрывать элемент выбора, я добавляю screenreaders-only class и 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 на основе работы,

У меня есть ветка, которая выполняет следующие действия:

Ярлыки ARIA и другие полезные атрибуты

• Добавляет следующие элементы aria в поле ввода поиска
  
  
  
  • роль = "поле со списком"
  
  
  • Используется для обозначения того, что пользователи могут печатать, чтобы выбрать вариант или добавить новые элементы в список.
  
  
  • aria-haspopup (неявно при использовании роли combobox)
  
  
  • Используется для обозначения того, что это поле имеет связанное меню
  
  
  • расширенный арией
  
  
  • Требуется при использовании поля со списком, указывает, что список результатов виден или скрыт
  
  
  • Состояние необходимо обновлять динамически, так как выбранное поле активируется / деактивируется.
  
  
  • aria-activedescendant = "id_of_highlighted_option"
  
  
  • Используется, чтобы указать, какие параметры являются текущим выбранным значением
  
  
  • Это необходимо обновить, поскольку выбран новый параметр.
  
  
  • aria-owns = "id_of_list_of_options"
  
  
  • Указывает список вариантов, к которым относится это поле поиска.
  
  
  • aria-autocomplete = "список"
  
  
  • "Если автор устанавливает для поля со списком значение aria-autocomplete значение 'list', пользовательские агенты ДОЛЖНЫ предоставлять изменения в атрибуте aria-activedescendant в поле со списком, в то время как поле со списком остается в фокусе. Если изменение атрибута aria-activedescendant происходит, пока поле со списком сфокусирован, вспомогательные технологии ДОЛЖНЫ предупреждать пользователя об этом изменении, например, озвучивая текстовую альтернативу нового активного дочернего элемента. Авторам СЛЕДУЕТ связать текстовое поле поля со списком с его списком, используя aria-ownns ».
  
  
  • aria-labeledby = "id_of_field_label"
  
  
  • Это идентификатор элемента метки формы, который выбран заменяет
  
  
• Добавляет следующие атрибуты в список опций
  
  
  
  • я бы
  
  
  • Простой идентификатор, основанный на идентификаторе поля формы, на который указывает атрибут aria-owns в поле ввода поиска.
  
  
  • роль = "список"
  
  
  • «Виджет, который позволяет пользователю выбрать один или несколько элементов из списка вариантов».
  
  
• Добавляет следующие атрибуты к каждой отдельной опции в списке опций.
  
  
  
  • я бы
  
  
  • Простой идентификатор, основанный на индексе параметра в списке и идентификаторе поля формы, который будет использоваться aria-activedescendant, который указывает текущий выбранный элемент.
  
  
  • role = "option"
  
  
  • Выбираемый элемент в списке выбора.
  
  
  • занятой арией
  
  
  • Причина, по которой нам это нужно, заключается в том, что когда Chosen инициализируется в поле, он _не_ создает список параметров до тех пор, пока поле не будет впервые активировано.
  
  
  • Это проблема для вспомогательных технологий, а также для сканеров, которые ищут проблемы с доступностью. Так как поле поиска (role = "combobox") теперь удаляется, оно владеет списком (aria-owns = "id_of_list_of_options"), то поле списка (наш список результатов) _должно иметь параметры внутри ИЛИ быть исключено как занятое, чтобы соответствовать спец.
    
    
    
    
    
    • Я даже не уверен на 100%, что это правильный шаг. Это, безусловно, предотвращает пометку полей сканерами, но они не полностью загружены, мы просто еще не создали параметры.
    
    
    
  
  
  • Я надеюсь, что кто-то с большим опытом работы с A11Y сможет это оценить.
  
  
  • Я также рассмотрел более радикальный подход, который включает построение списка результатов при первой активации поля, но включает добавление нового триггера в Chosen.
    
    
    
    
    
    • Этот триггер был, по сути, переходом к методу winnow_results, который выстраивал результаты поиска (все еще скрытые), но он порадовал сканеры.
    
    
    
  
  

Управляющее государство

• Управление расширенным атрибутом арии
  
  
  
  • Чтобы указать, когда результаты поиска должны иметь отношение к вспомогательной технологии, нам нужно переключить атрибут aria-extended при активации / деактивации полей.
  
  
  • Самый простой способ сделать это (AFAIK) - настроить атрибут во время методов close_field и activate_field .
  
  
  • Простого переключения с истинного на ложное или с ложного на истинное в каждом из этих методов достаточно, чтобы состояние постоянно обновлялось.
  
  

Я собираюсь начать использовать эту версию в нескольких наших проектах и ​​буду продолжать обновлять свою ветку с изменениями, поскольку мы получим более подробный взгляд на наши проекты из представления A11Y.

Спасибо всем, кто дочитал до этого места, я знаю, что это много, и, пожалуйста, если у вас есть отзывы, дайте мне знать! Я хочу продвинуть это как можно дальше.

@cooperfellows, пожалуйста, откройте запрос на

@stof Готово, но, как я уже сказал, я не эксперт по A11Y, и я планирую провести еще несколько тестов. Я просто хотел поделиться своим первым стабильным проходом на этом.

Есть ли с этим "официальное" обновление? Были ли внесены какие-либо изменения на основе усилий @cooperfellows ?

Причина, по которой я спрашиваю, состоит в том, что мы получаем все большее количество пользователей Jaws, сообщающих о непригодном для использования виджете, эффективно отображая форму, на которую они смотрят, непригодной для использования.

Мы можем копировать, так что рады помочь / поделиться примерами, если это поможет?

Был сделан запрос на вытягивание (были некоторые незначительные проблемы, которые были решены постфактум), но пока ничего не произошло. Ветвь, которую я сейчас использую в продакшене, находится здесь:

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

Хотя мне бы хотелось получить другие отзывы. У меня нет Jaws, поэтому я полагаюсь на аудит различных онлайн-инструментов.

Итак, эта ветка в основном представляет собой текущее производство плюс ваши изменения или предыдущую версию с последними изменениями, которые еще не объединены?

(Спасибо, кстати)

Да, верно @wcndave. Хотя PR действительно мог бы использовать и другие глаза для обзора.

@cooperfellows Я рад помочь с тестированием доступности, так как мне нужно перенести существующую выбранную реализацию в новую сборку, которая должна соответствовать WCAG 2.

Есть какие-нибудь обновления по вашему запросу на перенос?

Глупый вопрос - у вас есть скомпилированная версия JavaScript, которую я могу скачать?
Или мне нужно установить coffeescript и скомпилировать сам?

@KITSKevinBonett Спасибо за помощь!

Прилагается zip-архив jquery и версии прототипа, как сжатых, так и несжатых.

скомпилированный-a11y-chosen-jquery-proto.zip

@cooperfellows Это было быстро. Я добавлю в наш проект, проведу небольшое тестирование и дам вам знать ...

@KITSKevinBonett Я хочу еще раз взглянуть на это, так как я не эксперт по A11Y. Поэтому приветствуются любые отзывы (резкие и положительные).

Привет, @cooperfellows, я просмотрел вашу реализацию - действительно очень хорошо.

Есть некоторые проблемы, которые не могут быть (легко) решены из-за несовместимости программы чтения с экрана / браузера.

Я задокументировал свои выводы в приложении. Я дал 1 или 2 незначительных рекомендации, которые, надеюсь, вы найдете полезными.

_ОБНОВИТЬ_

1. В некоторых моих комментариях упоминались функции, которые являются локальными для нашей реализации - я удалил их.
2. Проблема с вводом внутри поля со списком и нажатием ENTER - отправка нашей формы не активируется - опять же, это проблема локальной реализации.
3. Приведенный ниже ZIP-файл был обновлен: удалены (1) и (2).

aria-chosen-plugin.zip

Привет, @cooperfellows, имел ли смысл мой аудит?

Привет, @KITSKevinBonett. Я уехал на неделю в отпуск. Я посмотрю на это, как только займусь другой работой. Спасибо за отзыв, я уверен, что он полезен.

@KITSKevinBonett Спасибо за аудит, это кажется довольно тщательным. Я разбил свои мысли по разделам аудита, как вы их изложили.

Разметка HTML, созданная плагином

• Здесь есть отзывы? Или вы просто показываете, что получилось?

Только клавиатура

• «Однако, когда была выбрана опция, фокус клавиатуры снова теряется при табуляции».
  
  
  
  • Я думаю, это можно решить, включив и выключив атрибут aria-hidden, когда этот элемент станет видимым / скрытым?
  
  
  • Я изучу этот подход.
  
  
• «Проблемы с отключением CSS»
  
  
  
  • Стандартный выбор виден
  
  
  • Я не могу воссоздать это, вы можете дать мне снимок экрана, или что-то в этом роде?
  
  
  • Нет видимой подсказки при выделении результатов с помощью клавиатуры.
  
  
  • Мы могли бы обернуть текст текущего выделенного элемента тегом <em> , который выделяется курсивом (по крайней мере, в Chrome).
    
    
    
    
    
    • Потенциальная проблема здесь в том, что поиск также использует <em> для обозначения текстовых совпадений, поэтому я бы беспокоился, что они потенциально могут конфликтовать друг с другом.
    
    
    
  
  

Читатели экрана

• У меня нет доступа к JAWS, поэтому я не смогу здесь слишком много делать. Я начну пробную версию, когда у меня будет еще немного времени, чтобы посмотреть, что я найду.
• Я был бы очень признателен за дополнительную помощь в программах чтения с экрана, поэтому благодарим за подробный анализ.

Ария Мысли

• Я могу удалить атрибут haspopup, как вы заметили, он избыточен.
• Причина, по которой я добавил aria-busy, заключается в том, что по умолчанию Chosen не генерирует никаких элементов списка в скрытых div до тех пор, пока не будет установлен фокус.
  
  
  
  • Это означает, что элемент role = "listbox" по умолчанию не имеет параметров, что вызывало у меня проблемы при сканировании с помощью инструментов. При добавлении элемента aria-busy в начале он игнорируется этими инструментами.
  
  
  • Причина проблемы в том, что элемент списка _ должен владеть_ элементом option ( источником )
  
  
  • Он удаляется при первом заполнении списка, поэтому мне показалось, что это не причинит вреда и не нарушит правила.
  
  
• Добавление выбранной арии кажется очевидным шагом, не могу поверить, что пропустил это. Спасибо, что поймали это.
  * Заключительные мысли *
  Вы сами написали 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. Работает отлично. Выбранный вариант будет озвучен, когда буква I будет перемещаться по нему стрелкой.

Есть новости о слиянии этого в мастере?

В своей повседневной работе я использую MISP (платформу обмена информацией о вредоносных программах - https://github.com/MISP/MISP), разработчики которой недавно решили использовать «selected» для автозаполнения полей со списком. Для меня это стало кошмаром.

Спасибо заранее за вашу помощь.

После нескольких тестов я могу подтвердить, что скомпилированная версия (архив .zip), опубликованная выше (1 июля 2016 г.), работает.

Однако, когда я пробую ветвь @cooperfellows или когда я клонирую ветку @cooperfellows , а затем сливаю ее с gatherhq / master, JAWS правильно произносит пункты меню, но клавиша ENTER не отправляет форму.

Привет @ obert01 , большое спасибо за то, что взглянули на это с помощью JAWS, это была большая часть, которую мне не хватало во время моей работы.

Эта ветка сильно устарела по сравнению с текущей веткой gatherhq / master, мне, вероятно, нужно будет просмотреть изменения и скорректировать свой PR , чтобы вернуть все в рабочее состояние.

Я постараюсь добраться до этого как-нибудь до конца месяца, сейчас я неплохо подкреплен на работе.

Я хотел бы, чтобы один из участников снова посмотрел на него, как только он будет обновлен, поэтому я буду пинговать @stof (который смотрел первоначальный откат в 2016 году), как только я его обновлю.

Большое спасибо.

К вашему сведению, я могу протестировать со всеми комбинациями программ чтения с экрана JAWS и NVDA, используя следующий браузер: Internet Explorer 11, Google Chrome, Firefox ESR, Firefox Standard, Microsoft Edge.

Есть ли в этом прогресс?

Сожалею, что настаиваю, но моя повседневная работа страдает от этой недоступности.

Более того, добавление поддержки доступности позволит использовать Chosen на веб-сайтах государственного сектора / администрации, поскольку регулирование во все большем количестве стран происходит именно таким образом.

Спасибо

Привет,
У нас есть приложение, которое использовало selected, и теперь нам нужно поддерживать доступность, но, пройдя через это, я вижу, что оно еще не было объединено. Будет действительно полезно, если @cooperfellows сможет завершить это и объединить, пожалуйста.

Привет, @ obert01 и @csmuthukuda!

Я только что сделал обновления, чтобы ускорить мой PR с последней версией Chosen, пожалуйста, взгляните здесь:
https://github.com/harvesthq/chosen/pull/2596

Вы можете получить копию моего разветвленного репозитория и протестировать на своей стороне. Я хотел бы получить отзывы из реальной жизни.

Он прошел все проверки TravisCI, но я не думаю, что они покрывают какие-либо проблемы с A11Y. Дайте мне знать, что вы думаете.

Привет @cooperfellows!
Большое спасибо за вашу приверженность делу сохранения этого. Я протестирую это и дам вам знать отзывы об этом. Очень надеюсь, что владельцы подумают о слиянии этого с мастером. Сейчас это обязательное требование.

Спасибо @csmuthukuda, я бы хотел, чтобы он был объединен ....

@pfiller @stof @tjschuck @koenpunt , чем я могу помочь, чтобы это рассмотреть? Это действительно недостающий элемент в невероятно крутой системе.

Привет @cooperfellows!

Я протестировал вашу потрясающую работу с большинством современных веб-браузеров и программ чтения с экрана JAWS и NVDA. Спасибо !

Стрелка по параметрам с помощью клавиатуры работает хорошо: речь и обратная связь по Брайлю идеальны, что означает, что все атрибуты ARIA четко определены. Однако, когда я нажимаю ENTER, чтобы выбрать вариант, ничего не происходит. У меня недостаточно опыта работы с JavaScript, чтобы определить, исходит ли проблема от Chosen или присутствует в приложении, использующем его.

Чтобы воспроизвести, попробуйте выбрать параметр в поле со списком «Выбрано» только с помощью клавиатуры: TAB для фокусировки поля со списком, клавиши со стрелками для просмотра списка, ENTER для выбора.

Еще раз большое спасибо.

Спасибо за информацию @ obert01. Я посмотрю и посмотрю, что найду.

@ obert01 Можете попробовать использовать эту скрипку JS, чтобы убедиться, что она работает / не работает? Эта скрипка загружает скомпилированную версию jQuery моей последней фиксации.

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

Я могу перемещаться по этому раскрывающемуся списку с помощью клавиатуры (Chrome Latest), но я НЕ использую программу чтения с экрана.

Дайте мне знать, что вы думаете.

Привет @cooperfellows!

Нет проблем с вашим JS Fiddle. Таким образом, я полагаю, что проблема связана с тем, как Chosen используется в MISP (https://www.misp-project.org/).

Я проверю это с командой проекта MISP.

Спасибо

Спасибо @ obert01. Пожалуйста, дайте мне знать, что вы узнали. Это может указывать на несовместимость с конкретной настройкой Chosen, поэтому, если у меня есть способ увидеть, как MISP использует его, я могу попытаться взглянуть на их реализацию.

Выбрано используется где-нибудь публично?

@cooperfellows, не могли бы вы дать мне новую сборку с последними изменениями, я не знаю, как ее собрать.

@ obert01 @cooperfellows Я только что попробовал Fiddle с NVDA, кажется, что навигация с клавиатуры работает отлично (включая выбор клавишей ENTER). Однако, когда я перемещаюсь с помощью клавиш со стрелками вверх и вниз, программа чтения с экрана читает «________ не выбрано», то есть «Бермудские острова не выбраны». Это ожидаемое поведение?

У меня та же проблема, что и у @woenlee. Это не так уж и вредно. Но, возможно, стоит проверить способ установки атрибута «selected» на выбранном элементе.

Каково ожидаемое поведение при «входе» и «выходе» из элемента списка? Когда
вы переходите к новому элементу, если он зачитывает только что выбранный
пункт? Сообщает ли он также, что больше НЕ выбрано? @ obert01 @woenlee

В воскресенье, 25 августа 2019 г., в 12:18 Olivier BERT [email protected]
написал:

У меня та же проблема, что и у @woenlee https://github.com/woenlee . Нет
так вредно. Но, может быть, способ установки атрибута "selected" на
выбранный пункт должен быть отмечен.

-
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/harvesthq/chosen/issues/264?email_source=notifications&email_token=ABT3ZTIESGLX6IYW4BF2QCLQGKWDVA5CNFSM4AATGGB2YY3PNVWWK3TUL52HS4DFMVREXWG43WWWK3TUL52HS4DFMVREXWG43
или отключить поток
https://github.com/notifications/unsubscribe-auth/ABT3ZTMH2KUYYE7HNO2UGH3QGKWDVANCNFSM4AATGGBQ
.

-
~ Купер

@cooperfellows Проведя несколько тестов на доступность топора, я, кажется, обнаружил ошибку в вашем PR, которая объясняет, почему он это делал. В строке 342 файла Abstract-chosen.coffee входу присвоены 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>

После предоставления

Платежи клиентам Harvest здесь и тестирование на внутреннюю доступность натолкнулись на это. Доступность является обязательной, и мы откажемся от Harvest, если эта проблема не будет решена, если сопровождающий с Harvest не окажет хоть какую-то поддержку в ближайшее время.

@ obert01 Можете попробовать использовать эту скрипку JS, чтобы убедиться, что она работает / не работает? Эта скрипка загружает скомпилированную версию jQuery моей последней фиксации.

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

Я могу перемещаться по этому раскрывающемуся списку с помощью клавиатуры (Chrome Latest), но я НЕ использую программу чтения с экрана.

Дайте мне знать, что вы думаете.

@cooperfellows
Я тестировал этот 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 не считывает выделенный вариант при нажатии, пока вы не дойдете до 10-го варианта вАнтигуа и Барбуда . Окно немного автоматически прокручивает, чтобы выделить Антигуа и Барбуда, а затем прочитать вариант.

В IE 11.0.9600.19463: при навигации с помощью клавиш со стрелками кажется, что текущий выделенный параметр правильно перемещается вверх и вниз. Не требует рендера.

Хотел бы знать, испытывал ли это кто-нибудь еще. @ obert01 @woenlee

Привет и спасибо за вашу работу.

К сожалению, это не работает должным образом. Это чрезвычайно сложно описать, поскольку поведение меняется в зависимости от используемого браузера или программы чтения с экрана.

Я думаю, что некоторые свойства арии отсутствуют или не обновляются. Вот общие проблемы, с которыми я сталкиваюсь:

• Проблема с прокруткой: когда я нажимаю стрелку вниз и дохожу до конца видимого списка элементов, мне приходится дважды нажать на стрелку вниз, чтобы выделить следующий элемент.
• Когда я нажимаю ENTER, чтобы выбрать элемент, фокус не сбрасывается. Ожидаемое поведение будет заключаться в том, что программа чтения с экрана вернется в режим быстрой навигации и позволит мне прочитать остальную часть веб-страницы. Вместо этого мой выбор в списке по-прежнему контролируется клавишами со стрелками.
• Текущие скрипты не позволяют узнать, отображаются ли предложения и сколько их. В большинстве доступных мне избранных плагинов JAWS / NVDA объявляют, сколько результатов соответствует строке, введенной в текстовый ввод.
• Наконец, у меня сложилось впечатление, что JAWS не понимает, свернут ли список или расширен. Иногда, сделав выбор с помощью ENTER и попытавшись прочитать остальную часть страницы, JAWS по-прежнему читает последние предложения, которые были отображены.

Хорошие моменты:

• Автозаполнение работает хорошо. Если я введу «фра», JAWS произнесет «Франция», и я могу нажать ENTER для выбора.
• Пункты читаются правильно, если я стрелка в списке.

К сожалению, я мало что знаю об ARIA, JavaScript и Интернете в целом. Я предлагаю вам убедиться, что максимум свойств ARIA правильно настроен и обновлен.

Ниже вы найдете демонстрацию и код плагина JQuery, который отлично взаимодействует с программами чтения с экрана:
https://a11y.nicolas-hoffmann.net/autocomplete-list/

Мне очень жаль, что я больше не могу помочь.

Не стесняйтесь размещать новые демонстрации своей работы. Я рада протестировать для вас.