switch

Как сделать элемент переключателем с помощью WAI-ARIA.

Время чтения: меньше 5 мин

Кратко

Скопировано

Роль виджета из WAI-ARIA. Указывает на то, что элемент что-то переключает. Например, тему, оповещения или какие-то другие настройки на сайте.

К этой роли близок <input> с типом checkbox, а в ARIA на неё похожа роль checkox. Однако они не эквиваленты switch.

Пример

Скопировано
        
          
          <span class="label" id="label">  Оповещения:</span><button  class="button"  role="switch"  aria-checked="false"  aria-labelledby="label">  <span class="button__off" aria-hidden="true">    Выключены  </span>  <span class="button__on" aria-hidden="true">    Включены  </span></button>
          <span class="label" id="label">
  Оповещения:
</span>

<button
  class="button"
  role="switch"
  aria-checked="false"
  aria-labelledby="label"
>
  <span class="button__off" aria-hidden="true">
    Выключены
  </span>
  <span class="button__on" aria-hidden="true">
    Включены
  </span>
</button>

        
        
          
        
      
Открыть демо в новой вкладке

Скринридер прочитает код примерно так: «Переключатель с ролью switch, не выбран, оповещения».

Если не уверены, что браузер и скринридер хорошо поддерживают switch, используйте <input type="checkbox">. В этом случае не нужно использовать aria-checked. Достаточно добавить HTML-атрибут checked.

Как пишется

Скопировано

Добавьте к нужному элементу role="switch". Роль можно задавать для всех тегов, с которыми можно взаимодействовать. Например, <button>, <div> или <span> с tabindex="0".

У элемента с ролью switch обязательно должен быть атрибут aria-checked со значением true или false. Менять значения атрибута нужно с помощью JavaScript.

У aria-checked есть ещё значение mixed, но его лучше не использовать в случае элемента с ролью switch. Браузеры не всегда обрабатывают значение mixed как false, хотя об этом написано в спецификации ARIA.

Если добавите внутрь контейнера с ролью switch семантический тег, в дерево доступности попадёт текст из него, а роль сбросится.

Так видите код вы:

        
          
          <div role="switch" tabindex="0" aria-checked="false">  <h2>Оповещения включены</h2></div>
          <div role="switch" tabindex="0" aria-checked="false">
  <h2>Оповещения включены</h2>
</div>

        
        
          
        
      

А так видит код скринридер:

        
          
          <div role="switch" tabindex="0" aria-checked="false">  Оповещения включены</div>
          <div role="switch" tabindex="0" aria-checked="false">
  Оповещения включены
</div>

        
        
          
        
      

Как понять

Скопировано

У обычного чекбокса есть состояния «Выбран» и «Не выбран». Элемент с ролью switch бывает в состояниях «Включён» и «Выключен», в отличие от простого чекбокса.