Неисправность кросс-браузера Jaws Screen Reader

Question

Так что я пытаюсь добавить правильные метки арии и html к некоторым настраиваемым флажкам и переключателям, но обнаружил, что они не читаются должным образом в JAWS на IE, но они отлично читают JAWS с хром.

Испытывал ли кто-нибудь еще эти проблемы и знал причину?

Выпуск 1: Это должно быть прочитано как переключатель, но в IE он читается как кнопка, хром он считывает переключатель.

Код 1:

<div class="field"> 
    <input class="toggle-input" id="styleguide-toggle-demo" type="checkbox" name="Option Demo" value="option Demo" role="switch"> 
    <label class="toggle-label" for="styleguide-toggle-demo"> 
    <span class="toggle-message">Demo</span> 
    <span class="toggle"> 
     <span class="knob"></span> 
    </span> 
    </label> 
</div> 

Выпуск 2: Флажок должен прочитать этикетку. В настоящее время в IE он только считывает проверенное состояние флажка, в то время как в chrome он считывает метку и проверенное состояние.

Код 2:

<label for="styleguide-checkbox-A"> 
    <input id="styleguide-checkbox-A" class="input-checkbox" type="checkbox" name="styleguide-checkbox-A" value="styleguide-checkbox-option-A"> 
    <span>Option A</span> 
</label> 

Answer 1

ВОПРОС 1: Несколько вещей:

1. при использовании роли = «переключатель» вы должны также использовать атрибут арию проверены установлен либо истинным или false. (https://www.w3.org/TR/wai-aria-1.1/#switch)
2. В настоящее время JAWS не распознает роль переключателя.

ВЫПУСК 2: маркировка вложенными элементами может привести к хаосу. Я предполагаю, что вы используете span для стилирования метки. Попробуйте это вместо того, чтобы и стиль элемента этикетки:

<div class="form-row"> 
    <input id="styleguide-checkbox-A" class="input-checkbox" type="checkbox" name="styleguide-checkbox-A" value="styleguide-checkbox-option-A" /> 
    <label for="styleguide-checkbox-A">Option A</label> 
</div> 

Answer 2

Используя роль = переключатель на <input type='checkbox'> не является действительным.

https://www.w3.org/TR/html51/sec-forms.html#checkbox-state-typecheckbox

Разрешено ARIA роль значений атрибутов: флажок (по умолчанию - не установлен) или menuitemcheckbox.

Вы должны использовать функцию role = switch, если вы создаете свой собственный компонент переключателя, сделанный из <div> или <span> тегов.