switch

Кога да се използва

За двоичен контрол за настройки, при който „вкл.” и „изкл.” описват състоянието по-добре от „отметнато” и „неотметнато” — Wi-Fi, тъмен режим, известия, самолетен режим. Все още няма нативен HTML елемент switch, затова има два валидни подхода:

1. <button type="button" role="switch" aria-checked="false"> — предпочитан, тъй като наследява нативния фокус и активиране на бутона.
2. <input type="checkbox" role="switch"> — също приемливо; изпращането на формуляр продължава да работи, а замяната на ролята променя начина, по който помощните технологии го обявяват.

Не използвайте role="switch" за неща, които не са истински двоични. Ако действието навигира, отваря меню или стартира процес, използвайте button или link.

Договор за клавиатура и фокус

Съгласно модела на APG за switch:

• Tab премества фокуса към превключвателя.
• Space превключва aria-checked. Enter СЛЕДВА да превключва също (APG препоръчва и двете, тъй като потребителите очакват поведение, подобно на бутон, от превключвател, базиран на бутон).
• Фокусът остава върху превключвателя след превключването.

aria-checked приема само "true" или "false" при switch — "mixed" е невалидно тук.

Чести грешки

• role="switch" без aria-checked при първоначалното рендиране. Състоянието е задължително.
• aria-checked="mixed" върху switch. Валидно е само за checkbox.
• Използване на aria-pressed вместо aria-checked. aria-pressed принадлежи на превключващ бутон (заглушаване / отмяна на заглушаването), при който бутонът извършва действие. Switch представлява настройка на дадено състояние.
• Превключвател, който не обновява aria-checked, когато е превключен само чрез CSS.
• Малки зони на докосване, нарушаващи WCAG 2.5.8 Target Size. Интерактивната зона трябва да достигне 24×24 CSS пиксела.

Пример

<button
  type="button"
  role="switch"
  aria-checked="false"
  onclick="
    const next = this.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-checked', next);
  "
>
  Dark mode
</button>