Роля Контрола

`button`

Обозначава елемент като бутон — контрол, който задейства действие при активиране. Използвайте първо нативния HTML елемент <button>; прибягвайте до role="button" върху <div> или <span> само когато нативният елемент не може да се използва.

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

Почти никога — използвайте нативния елемент <button>. Нативният елемент обработва фокуса, активирането с клавишите Space и Enter, деактивираното състояние и семантиката на изпращане на формуляри без допълнително усилие. Прибягването до role="button" върху <div> означава, че всичко това трябва да се реализира ръчно — а повечето автори не го правят.

Легитимните случаи за role="button" са тесни:

Ограничения от дизайн система на трета страна, която предоставя компоненти, различни от бутони.
Разработка в среда, в която <button> не е наличен (някои шаблони на остарели CMS системи).
Временна надграждане на <div> за достъпност, докато се планира рефакторинг.

При използване на role="button" трябва да се направи и следното:

Елементът да е достъпен с клавиатура чрез tabindex="0".
Да се обработи събитието keydown за Enter и Space (с event.preventDefault() за Space, за да се предотврати превъртането на страницата).
Деактивираното състояние да се управлява ръчно чрез aria-disabled="true" и да се блокира изпълнението на обработчиците на кликване.

Бутони за превключване

Ако бутонът е за превключване (заглушаване / включване на звук, пускане / пауза, следване / спиране на следване), задайте aria-pressed на "true" или "false". Екранните четци обявяват състоянието заедно с етикета: “Mute, toggle button, not pressed”.

Чести грешки

<div onclick="…">Submit</div> — не е достъпен с клавиатура, няма роля. Потребителите с мишка могат да го използват; всички останали — не.
<a href="#" onclick="…">, маскиращ се като бутон. Браузърът го третира като връзка, екранният четец го обявява като връзка, а потребителят очаква навигация.
role="button" без tabindex="0" — екранният четец обявява „бутон”, но клавиатурата не може да го достигне.
Персонализирани бутони, които реагират на Enter, но не и на Space.
Бутони без достъпно наименование — бутони само с икона без aria-label са най-честата грешка, улавяна от axe-core.

Пример

<!-- Предпочитан начин -->
<button type="button" aria-pressed="false">Mute</button>

<!-- Само когато <button> е невъзможен -->
<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onclick="toggleMute()"
  onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleMute(); }"
>
  Mute
</div>