/ ↲
    Расширенный поиск

    Доступность

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

    Читайте также