Проблема доступности Выбор флажка с пробелом пропускает содержимое

Question

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

<label class="checkbox" tabindex="1" for="All Programs">
     <input name="programNameSelection" tabindex="1" id="All Programs" type="checkbox" checked="" value="All Programs">
     <span class="checkbox-text">All Programs</span> 
</label>

Новое обновление

<label class="checkbox" for="All Programs">
     <input name="programNameSelection" tabindex="0" id="All Programs" type="checkbox" checked="" value="All Programs">
     <span class="checkbox-text">All Programs</span> 
</label>

Answer 1

Вы используете tabindex=1 (дважды).

Если вы пытаетесь сделать объекты фокусируемыми, вы должны использовать tabindex=0.

Любое положительное целое число в индексе табуляции ставит егов порядке вкладок в указанном месте и переопределяет порядок DOM.

tabindex=0 делает объект фокусируемым, но в порядке DOM.

Для вашего примера вообще не нужно вводить tabindex, если вы вводите вход вform, поскольку входные данные автоматически фокусируются, если вы не переопределите эту функцию (и ее использование в форме помогает в программе чтения с экрана).

Также ваш for должен быть одним словом, используйте AllPrograms безпробел как на for, так и на входе id

Как общее правило (такое, которое мне никогда не приходилось ломать лично), нет веской причины использовать положительный tabindex для элемента,вместо этого исправьте порядок элементов HTML.

Answer 2

Хотя вложение <input/> в <label> является теоретически стандартным и вполне допустимым, оно не рекомендуется, особенно потому, что известно, что оно вызывает проблемы с программами чтения с экрана.

Так что мой первый совет, прежде чем идтидалее нужно изменить свой код на более обычный, где элемент <label> связан с <input/> с помощью атрибутов for и id. В остальном это не выглядит плохо на первый взгляд.