Доступность для пользовательской выпадающей кнопки

Question

Доступность для пользовательской выпадающей кнопки

1

Привет, мне нужно добавить клавиатуру и доступ к моей настраиваемой кнопке выпадающего меню. Есть ли у вас какие-либо идеи? Я думал об использовании арии?

<div class="dropdown-select">
  <input type="hidden" name="select_offer" class="dropdown-select--value" />
  <button class="dropdown-select--btn"> Lorem ipsum
    <span class="sr-only">(rozwiń listę)</span>
  </button>
  <ul class="opl-dropdown-select--list">
    <li>
      <a href="#" data-option="value1">Lorem ipsum</a>
    </li>
    <li>
      <a href="#" data-option="value2">Lorem ipsum</a>
    </li>
    <li>
      <a href="#" data-option="value3">Lorem ipsum</a>
    </li>
  </ul>
</div>

Jarosław Wróblewski 14 сен. 2017, в 13:29

Источник

Теги:

javascript

html5

accessibility

wcag2.0

wcag

3 ответа

Ещё вопросы

Adam · Answer 1 · 2017-09-15T11-17-00.000Z

Фонд Mozilla описал технику для пользовательских элементов списка: Использование роли списка, которая подразумевает несколько соображений:

предоставление роли listbox для элемента
предоставление option роли по различным вариантам
управление фокусом различных элементов для доступа к клавиатуре
использование aria-activedescendant для текущего сфокусированного элемента
используя aria-selected для текущего выбранного элемента

WCAG имеет полные рабочие примеры на странице примеров ListBox, но эта страница находится в стадии разработки.

Josh · Answer 2 · 2017-09-14T19-58-00.000Z

Вот как бы я к этому подошел:

<div class="dropdown-select" role="menubar">
  <input type="hidden" name="select_offer" class="dropdown-select--value" />
  <button id="custom-dropdown" class="dropdown-select--btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem ipsum
    <span class="sr-only">(rozwiń listę)</span>
  </button>
  <ul class="opl-dropdown-select--list" aria-label="submenu" role="menu" aria-labelledby="custom-dropdown">
    <li role="menuitem">
      <a href="#" data-option="value1">Lorem ipsum</a>
    </li>
    <li role="menuitem">
      <a href="#" data-option="value2">Lorem ipsum</a>
    </li>
    <li role="menuitem">
      <a href="#" data-option="value3">Lorem ipsum</a>
    </li>
  </ul>
</div>

Использование атрибута с aria-expanded действительно идеально, но если оно используется, ему необходимо правильно отобразить значение true/false соответственно, поскольку элемент будет расширен и скомпенсирован.

amdg · Answer 3 · 2017-09-14T09-23-00.000Z

Установка фокуса на div будет проблемой. tabindex не является допустимым атрибутом, который может применяться к divs в HTML <5.

Он должен иметь ссылку на элемент a, textarea, button, input, object, select.

Таким образом, мы реализовали аналогично

скрипка в этом вопросе

Мы помещаем текстовое поле внутри div