Блог

Главная - Вопросы по программированию - Кнопка недоступна и не сфокусирована на клавише табуляции

Кнопка недоступна и не сфокусирована на клавише табуляции

#accessibility #multi-select #web-accessibility #sumoselect.js

#Специальные возможности #множественный выбор #веб-доступность #sumoselect.js

Вопрос:

У меня есть приведенный ниже код для отображения кнопок в выпадающем списке с несколькими вариантами выбора. Я использовал tabindex=»0″ для каждого

тег. Также добавлен фокус в css. HTML — код:

 <div class="form-group-multi__MultiControls">
<p tabindex="0" class="btn-tertiary--light">Cancel</p>
<p tabindex="0" class="btn-clear-all">Clear all</p>
<p tabindex="0" class="btn-secondary">Apply</p>
</div>

Код CSS:

 .btn-clear-all:focus {
  outline: -webkit-focus-ring-color auto 1px;
  outline: 1px solid black;
  }

Моя проблема здесь в том, что кнопка «Отмена» доступна для клавиши табуляции, но не для двух других — очистить все и применить.

Пожалуйста, предложите, если я что-то упускаю.

Комментарии:

1. Я могу сосредоточиться на всех ссылках, если я запущу ваш фрагмент кода

2. почти уверен, что, глядя на ваш CSS «Очистить все», вы увидите свой пользовательский индикатор фокусировки, а не «Отменить». Помимо того факта, что вы должны использовать <button> элемент для обеспечения доступности, и поэтому вам не нужно беспокоиться о tabindex="0" том, что вам нужно изменить свой CSS-селектор на be .btn-tertiary--light:focus, .btn-clear-all:focus, .btn-secondary:focus{ . Кроме того, если это bootstrap (как это выглядит), то вам .btn также следует добавить класс к каждой кнопке, чтобы вы могли просто настроить таргетинг на него в своем CSS class="btn btn-tertiary--light" и т.д. позволяет вам просто делать .btn{ .

Ответ №1:

Вам не хватает чрезвычайно очевидной вещи (я имею в виду, для семантики и доступности).
Посмотрите на свои кнопки и обратите внимание на то, что вы видите. Вы видите кнопки?

Правильный ответ: Нет. Вы видите абзацы ( <p> ы, а не <button> ы).

Есть два решения, одно лучшее и одно не очень хорошее:

  1. Лучшее решение. Измените все ваши <p> буквы s на <button> s. У вас уже есть btn-secondary класс Bootstrap, примененный к ним, так что я почти уверен, что ваш стиль никоим образом не пострадает.
  2. Добавить role="button" в свой <p> s. Опять же, поскольку первое правило ARIA гласит, что вы не должны использовать ARIA, если вам абсолютно не нужно, это не слишком хорошее решение.