Rola Widget

`button`

Oznacza element jako przycisk — kontrolkę wyzwalającą akcję po aktywacji. Najpierw użyj natywnego elementu HTML <button>; sięgaj po role="button" na <div> lub <span> tylko wtedy, gdy nie ma możliwości użycia elementu natywnego.

Kiedy używać

Prawie nigdy — używaj natywnego elementu <button>. Natywny element obsługuje fokus, aktywację klawiszami spacji i Enter, stan wyłączony oraz semantykę wysyłania formularza bez żadnego dodatkowego kodu. Sięganie po role="button" na <div> oznacza, że musisz samodzielnie odtworzyć całą tę funkcjonalność, a większość autorów tego nie robi.

Uzasadnione przypadki użycia role="button" są wąskie:

Jesteś ograniczony przez system projektowania firmy trzeciej, który dostarcza komponenty niebędące przyciskami.
Piszesz kod w środowisku, gdzie <button> jest niedostępny (niektóre szablony starszych CMS-ów).
Ulepszasz <div> pod kątem dostępności krótkoterminowo, planując refaktoryzację.

Jeśli używasz role="button", musisz też:

Uczynić element dostępnym dla fokusu za pomocą tabindex="0".
Obsłużyć keydown zarówno dla Enter, jak i Space (z event.preventDefault() dla Space, aby zatrzymać przewijanie strony).
Samodzielnie zarządzać stanem wyłączonym poprzez aria-disabled="true" i blokowanie handlerów kliknięć.

Przyciski przełączające

Jeśli przycisk jest przełącznikiem (wycisz / odcisz, odtwórz / wstrzymaj, obserwuj / przestań obserwować), ustaw aria-pressed na "true" lub "false". Czytniki ekranu ogłaszają stan wraz z etykietą: „Wycisz, przycisk przełączający, nie wciśnięty”.

Typowe błędy

<div onclick="…">Wyślij</div> — niefokusowalny, nieobsługiwany klawiaturą, bez roli. Mogą go używać użytkownicy myszy; nikt inny nie może.
<a href="#" onclick="…"> udający przycisk. Przeglądarka traktuje go jako link, czytnik ekranu ogłasza go jako link, użytkownik oczekuje nawigacji.
role="button" bez tabindex="0" — czytnik ekranu ogłasza „przycisk”, ale klawiatura nie może go osiągnąć.
Niestandardowe przyciski reagujące na Enter, ale nie na Space.
Przyciski bez dostępnej nazwy — przyciski zawierające tylko ikony, bez aria-label, to najczęstszy błąd wykrywany przez axe-core.

Przykład

<!-- Preferowane -->
<button type="button" aria-pressed="false">Wycisz</button>

<!-- Tylko gdy <button> jest niemożliwy -->
<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onclick="toggleMute()"
  onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleMute(); }"
>
  Wycisz
</div>