(Доступность ARIA) Невозможно перейти к следующему элементу формы после элемента SPAN с tabindex - PullRequest
Новая
       31

(Доступность ARIA) Невозможно перейти к следующему элементу формы после элемента SPAN с tabindex

0 голосов
/ 17 мая 2018

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

<div class="responsiveCell responsiveCellSize2">
          <div class="alignBottom minSize2">
            <div id="cont_id_f_c816dab2f221e8118135e0071b652f51" class="stat_group checkbox-container group group-id-cont_id_f_c816dab2f221e8118135e0071b652f51 has-children">
              <input class="floatLeft" id="f_c816dab2f221e8118135e0071b652f51" name="f_c816dab2f221e8118135e0071b652f51" leadfield="" contactfield="" aria-labelledby="label-cont_id_f_c816dab2f221e8118135e0071b652f51" type="checkbox">
              <span style="font-family:Arial; font-weight:normal; font-size:16px; color:#A40084;" class="group-title active" id="label-cont_id_f_c816dab2f221e8118135e0071b652f51" role="button" aria-expanded="true" tabindex="0">Economy</span>
            </div>
          </div>
          <div class="clear">&nbsp;</div>
          <div style="alignTop minSize2">
            <div id="required_info_f_c816dab2f221e8118135e0071b652f51" class="requiredInfo floatLeft">&nbsp;
    </div>
          </div>
        </div>
        <div class="responsiveCell responsiveCellSize1 emptyCell">&nbsp;</div>

И этот шаблон встречается примерно 50 раз на странице. В этой разметке уже есть моя дополнительная разметка для поддержки доступности.

Разметка не может быть изменена в бэкэнде.

Теперь я столкнулся с проблемой, когда пользователь не может перейти к следующему элементу при нажатии клавиши Tab.

Навигация с клавиатуры останавливается на первом экземпляре элемента SPAN, который имеет следующие атрибуты:

  • Роль = "Кнопка"
  • aria-extended = "true"
  • TabIndex = "0"

1 Ответ

0 голосов
/ 17 мая 2018

Если я возьму ваш фрагмент кода и повторю его несколько раз в тестовом файле, я смогу успешно перейти на каждый флажок и на каждую метку «Эконом».Немного необычно, когда ярлык флажка представляет собой кнопку вместо простого текста, но в HTML нет ничего недопустимого.Программа чтения с экрана объявляет об этом просто отлично. 

"Economy check box not checked"
"Economy button expanded"
"Economy2 check box not checked"
"Economy2 button expanded"
"Economy3 check box not checked"
"Economy3 button expanded"
...