Существует много способов создания доступного переключателя с двумя состояниями (выглядит как кнопка, нажмите, чтобы изменить состояние)
«Переключатель»: создается с помощью флажка inclusive-соображения-когда-restyling-form-controls
<input type="checkbox" role="switch" checked/>
«Переключатель», созданный флажком
<input type="checkbox" role="button" aria-pressed="true"/>
«Переключатель»: создается кнопкой Муравей
<button role="switch" aria-checked="true"></button>
«Переключатель», созданный радиоустройством Компонент переключателя: кнопки радиоуправления
Существуют следующие преимущества и недостатки:
- Компонент переключателя выглядел скорее как кнопка, чем флажок
- значения в флажках всегда переносятся в данные массива * Кнопка 1025 *
- всегда используется для управления действием, а не контейнер данных
- ChromeVox can 't read
switch role. - состояние
:checked флажка можно контролировать с помощью css - Нет необходимости создавать сценарий aria, если используется атрибут checkbox
checked - Ключи радио
↑↓←→, ключи флажка space|return|enter
Так что же самоеt?
Более подробно, как создать доступный коммутатор из трех состояний (или более)?
https://www.w3.org/TR/wai-aria-1.1/#switch
https://www.w3.org/TR/wai-aria-1.1/#button
разница между тумблером и переключателем