switch

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

На switch похожи <input> с типом checkbox и другая ARIA-роль checkbox, но они не заменяют роль переключателя. Команда Safari предложила решить проблему нативного переключателя с помощью HTML-атрибута switch — <input type="checkbox" switch>. Атрибут поддерживает только Safari, начиная с версии 17.4. Пока, без стабильной поддержки другими браузерами и вспомогательными технологиями, лучше не использовать этот атрибут.

        
          
          <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 бывает в состоянии «Включён» и «Выключен», в отличие от простого чекбокса.