Добавление role = "listitem" из role = "listbox"

Question

Работая над обновлением веб-страницы, у меня есть элемент управления, который по сути является многоэлементным элементом управления, похожим на изображение ниже.

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

Вопрос:

У меня вопрос больше с точки зрения доступности. Чтобы вспомогательные технологии могли правильно читать (рассказывать) этот элемент управления. Я использую role="listbox" для текстового поля и role='listitem' для каждого из флажков, что, как я понимаю, неправильно, поскольку listitem должен быть добавлен как прямой дочерний элемент к listbox. Но в моем случае это невозможно.

Можно ли как-нибудь связать textbox и checkbox list и заставить рассказчика рассматривать их как единый элемент управления?

<div class='multiselect_wrapper'>
     <input type="text" role='listbox' aria-multiselecttable='true' />
     <div class="chkList">
           <fieldset>
                <div>
                    <label role="listitem" for='chk1'>
                          <input type='checkbox' id='chk1'>Pizza
                    </label>
                    <label role="listitem" for='chk2'>
                          <input type='checkbox' id='chk2'>Lemonade
                    </label>
                    <label role="listitem" for='chk3'>
                          <input type='checkbox' id='chk3'>Fruit Salad
                    </label>
                </div>
           </fieldset>
     </div>
</div>

Answer 1

Вот краткий пример очень простого списка флажков:

codepen .io / anon / pen / eboEVB

Это просто довольно неполный пример. Вдохновляйся этим, но не копируй и не вставляй его как есть.

Несколько моментов внимания:

• Как вы уже упомянули, элементы, имеющие role = listitem, должны быть дочерними по отношению к элементу role = listbox. Это обязательство, означающее, что у вас нет другого выбора, кроме как оставить текстовое поле на одном месте, если вы хотите иметь правильный и доступный код.
• Если вы установите флажок role = listitem, он переопределит неявный флажок role = default. Следствием этого является то, что программа чтения с экрана больше не будет видеть их как флажки и, таким образом, будет продолжать читать их метки, но больше не будет их состояние (отмечено или не отмечено). Вы должны установить role = listitem для другого элемента, для которого нет неявной роли по умолчанию, такой как div, использованный в примере
• Обратите внимание, как внимание уделяется флажкам, а не элементам списка. Таким образом, мы получаем бесплатно обычную обработку клавиатуры (т. Е. Переключатели пробела), а также средство чтения с экрана поведения по умолчанию, имеющее флажки (то есть, объявляем метку и состояние + помогаем, например «нажимаем пробел, чтобы изменить состояние»)
• Рекомендуется устанавливать атрибуты aria-posinset и aria-size для каждого элемента, в противном случае программа чтения с экрана может не увидеть ваш список как таковой
• Установите tabindex = -1 во всех элементах, кроме выбранного в данный момент, который должен иметь tabindex = 0. Обычно в списках пользователь клавиатуры не вкладывает каждый элемент, а использует клавиши со стрелками для перехода от одного элемента к другому, когда он находится в списке. Пример неполный, было бы неплохо поддержать home, end, page up и page down.
• Не забудьте синхронизировать атрибут aria-Потомок списка с изменениями выбора. Это важно, потому что программы чтения с экрана используют его, чтобы сказать, какой элемент выбран в данный момент

Редактировать: я не могу опубликовать свой код HTML + JS, пожалуйста, помогите! Я пытаюсь опубликовать ссылку на codepen, но она отклонена. Код довольно длинный, но в любом случае, если я отправлю его с отступом в 4 пробела (используя Ctrl + K), он все равно будет интерпретирован, а не будет показан.