aria-pressed

Kiedy używać

Na przycisku działającym jako przełącznik — wycisz / odcisz, obserwuj / przestań obserwować, pogrubienie / brak pogrubienia w edytorze tekstu, panel boczny otwarty / zamknięty. Przycisk zmienia stan, ale nie wykonuje nawigacji; etykieta pozostaje taka sama, a tylko stan wciśnięcia komunikuje zmianę.

Prawidłowe są trzy wartości:

• aria-pressed="false" — przełącznik jest wyłączony.
• aria-pressed="true" — przełącznik jest włączony.
• aria-pressed="mixed" — używane, gdy przełącznik steruje wieloma podrzędnymi elementami i są one w stanie mieszanym (niektóre włączone, niektóre wyłączone). W praktyce rzadkie; większość autorów dzieli na osobne kontrolki.

Jeśli przycisk nie jest przełącznikiem — tylko wysyła formularz lub otwiera okno modalne — nie używaj aria-pressed. Dla kontrolek rozwijanych stosuj aria-expanded, a dla zwykłych przycisków akcji nie dodawaj żadnego atrybutu stanu.

Jak zachować synchronizację

aria-pressed to stan, co oznacza, że zmienia się podczas interakcji użytkownika. Każda procedura obsługi kliknięcia aktualizująca wygląd przycisku musi również aktualizować atrybut. Obie wartości nigdy nie powinny być rozbieżne — jeśli ikona wskazuje wyciszenie, aria-pressed powinien mieć wartość "true".

<button
  type="button"
  aria-pressed="false"
  onclick="
    const next = this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-pressed', next);
    toggleMute(next === 'true');
  "
>
  Wycisz
</button>

Typowe błędy

• Ustawienie aria-pressed na elemencie niebędącym przyciskiem (<div> lub <a>). Użyj role="button" lub — lepiej — zamień na <button>.
• Przełączanie stanu wizualnego przez CSS bez aktualizacji aria-pressed. Użytkownicy czytników ekranu wciąż słyszą ten sam stan.
• Użycie aria-pressed="true" na przycisku, który nie jest przełącznikiem (np. „Wyślij”) — wprowadza technologię wspomagającą w błąd, ogłaszając nieistotny stan.
• Mylenie aria-pressed z aria-selected (dla elementów w widżecie jednokrotnego wyboru, takim jak zakładka lub opcja) lub z aria-checked (dla pól wyboru i przycisków radiowych). Każdy atrybut ma inną semantykę; wybierz ten, który pasuje do wzorca widżetu.