Stan Stan widgetu

`aria-expanded`

Wskazuje, czy element zwijaný — przycisk ujawniający, combobox, menu, treeitem — jest aktualnie otwarty. Przyjmuje wartości "true" lub "false". Zazwyczaj łączony z aria-controls wskazującym na region, który kontrolka otwiera.

Kiedy stosować

Na każdej kontrolce, która otwiera i zamyka inny obszar interfejsu: nagłówek akordeonu, przycisk „pokaż więcej”, wyzwalacz comboboxa, przycisk menu, treeitem z elementami podrzędnymi, przełącznik nawigacji hamburger. Kontrolka pozostaje tym samym elementem w obu stanach — zmienia się tylko atrybut.

Jeśli kontrolka przełącza stan na samym elemencie (wycisz / odcisz, obserwuj / przestań obserwować), użyj zamiast tego aria-pressed. aria-expanded opisuje relację z innym regionem, zwykle identyfikowanym przez aria-controls.

Rola decyduje o tym, czy aria-expanded ma znaczenie: jest obsługiwany na button, combobox, link, tab, treeitem, menuitem, gridcell, row i kilku innych. Umieszczenie go na <div> bez roli nie przynosi żadnego efektu.

Jak utrzymywać synchronizację

Prawidłowe wartości to "true" (region jest otwarty) i "false" (region jest zamknięty). Wartość domyślna przy pominięciu to „brak stanu rozwinięcia” — co różni się od "false". Jeśli kontrolka jest kiedykolwiek rozwijalna, renderuj aria-expanded="false" w stanie zamkniętym zamiast pomijać atrybut.

Aktualizuj atrybut w tej samej ścieżce kodu, która animuje otwieranie lub zamykanie regionu. Atrybut jest źródłem prawdy, który czytają czytniki ekranu; wizualna strzałka jest drugorzędną wskazówką dla widzących użytkowników.

Łącz z aria-controls="<id-regionu>", aby czytnik ekranu mógł ogłosić relację: „Filtry, przycisk, zwinięty, kontroluje panel-filtrów”. Niektóre technologie asystujące oferują skrót do przejścia do kontrolowanego regionu.

Częste błędy

Przełączanie klasy CSS na panelu, ale zapominanie o zmianie aria-expanded.
Użycie aria-expanded na nieinteraktywnym elemencie bez roli. Atrybut jest ignorowany.
Dodawanie tylko aria-expanded="true" — nigdy nie renderując stanu "false". Czytniki ekranu nie ogłaszają niczego w stanie zamkniętym.
Używanie aria-expanded na kontrolce, która w rzeczywistości nie rozwija żadnego regionu (przycisk „Wyślij”).
Mylenie aria-expanded z aria-pressed na przyciskach przełączania, które nie otwierają oddzielnego regionu.
Pominięcie aria-controls, pozostawiając relację między wyzwalaczem a panelem niejawną.

Przykład

<button
  type="button"
  aria-expanded="false"
  aria-controls="filters-panel"
  onclick="toggle(this)"
>
  Filters
</button>

<div id="filters-panel" hidden>
  <!-- filter controls -->
</div>