aria-haspopup

Kiedy używać

Na każdym elemencie sterującym, który otwiera tymczasową nakładkę — przycisku wywołującym menu, polu input otwierającym listbox w comboboxie, ikonie otwierającej dialog. Atrybut pozwala czytnikowi ekranu ogłosić coś w stylu „Filtruj, przycisk menu” lub „Szukaj, ma wyskakujące okno”, dzięki czemu użytkownik wie, że naciśnięcie elementu sterującego ujawni dodatkowy interfejs, a nie spowoduje nawigacji ani wysłania formularza.

Pomiń atrybut dla elementów sterujących, które jedynie przełączają sekcję na tej samej stronie — widget rozwijany powinien samodzielnie używać aria-expanded; ujawniona treść jest częścią strony, a nie wyskakującym oknem.

Działanie

Przyjmuje stały zestaw wartości tokenowych:

• "menu" — otwiera role="menu" (najczęstszy przypadek dla przycisków menu).
• "listbox" — otwiera role="listbox", używany w niestandardowych comboboxach.
• "tree" — otwiera role="tree".
• "grid" — otwiera role="grid" (często w selektorach dat).
• "dialog" — otwiera role="dialog" lub role="alertdialog".
• "true" — równoważne "menu" ze względów historycznych; preferuj konkretne wartości.
• "false" — jawne oznaczenie „nie ma wyskakującego okna”; wartość domyślna.

Łącz aria-haspopup z aria-expanded="true|false", by AT mogło ogłaszać, czy wyskakujące okno jest aktualnie widoczne. Oba atrybuty pełnią różne funkcje — haspopup mówi „istnieje wyskakujące okno”, expanded mówi „i jest ono aktualnie widoczne”.

Typowe błędy

• Używanie aria-haspopup="true" na przycisku otwierającym niestandardowy selektor dat (który w rzeczywistości jest gridem lub dialogiem) — AT ogłasza „przycisk menu”, a użytkownicy naciskają strzałkę w dół spodziewając się elementów menuitem.
• Pomięcie aria-expanded. AT ogłasza „ma wyskakujące okno”, ale nigdy nie informuje o stanie otwarcia lub zamknięcia, przez co użytkownicy nie mogą stwierdzić, czy kliknięcie cokolwiek zrobiło.
• Dodawanie aria-haspopup do elementu sterującego, który w rzeczywistości nie otwiera wyskakującego okna. Wprowadza użytkownika w błąd — słyszy wskazówkę, ale nic nie znajduje.
• Używanie aria-haspopup na łączu nawigującym do nowej strony. To nie jest wyskakujące okno; pozwól, by łącze pozostało zwykłym łączem.
• Pomięcie przeniesienia fokusu do wyskakującego okna dialog lub do pierwszego menuitem w menu. Atrybut nazywa typ wyskakującego okna, ale nie zarządza fokusem.
• Ustawienie aria-haspopup="dialog" bez dodania role="dialog" na wyskakującym oknie. Obiecana semantyka nigdy się nie pojawia.

Przykład

<!-- Menu button -->
<button
  type="button"
  id="filter-btn"
  aria-haspopup="menu"
  aria-expanded="false"
  aria-controls="filter-menu"
>
  Filter
</button>
<ul id="filter-menu" role="menu" hidden>
  <li role="menuitem">All</li>
  <li role="menuitem">Unread</li>
  <li role="menuitem">Flagged</li>
</ul>