aria-haspopup

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

Върху всеки контрол, който отваря временно наслагване — бутон, задействащ меню, поле за въвеждане, което отваря listbox в combobox, иконен бутон, отварящ диалог. Атрибутът позволява на екранния четец да обяви нещо от рода на „Филтър, бутон за меню” или „Търсене, има изскачащ елемент”, така че потребителят да разбере, че натискането на контрола ще разкрие допълнителен интерфейс, а не ще навигира или изпрати форма.

Пропуснете атрибута за контроли, които само превключват секция на същата страница — разкриващ уиджет трябва да използва aria-expanded самостоятелно; разкритото съдържание е част от страницата, не изскачащ елемент.

Поведение

Приема фиксиран набор от токен-стойности:

• "menu" — отваря role="menu" (най-честият случай за бутони с меню).
• "listbox" — отваря role="listbox", използван в персонализирани combobox елементи.
• "tree" — отваря role="tree".
• "grid" — отваря role="grid" (често при избор на дата).
• "dialog" — отваря role="dialog" или role="alertdialog".
• "true" — еквивалентно на "menu" по исторически причини; предпочитайте конкретните стойности.
• "false" — изрично указва „няма изскачащ елемент”; стойността по подразбиране.

Комбинирайте aria-haspopup с aria-expanded="true|false", за да може помощната технология да обяви и дали изскачащият елемент е в момента видим. Двата атрибута изпълняват различни функции — haspopup указва „съществува изскачащ елемент”, expanded указва „и той е в момента видим”.

Чести грешки

• Използване на aria-haspopup="true" върху бутон, отварящ персонализиран избор на дата (което всъщност е grid или dialog) — помощната технология обявява „бутон за меню” и потребителите натискат стрелка надолу в очакване на menuitem елементи.
• Пропускане на aria-expanded. Помощната технология обявява „има изскачащ елемент”, но никога не съобщава дали е отворен или затворен, така че потребителите не могат да разберат дали кликването е имало ефект.
• Добавяне на aria-haspopup към контрол, който всъщност не отваря изскачащ елемент. Въвежда потребителя в заблуждение — той чува указанието и не открива нищо.
• Използване на aria-haspopup върху връзка, която навигира към нова страница. Не става въпрос за изскачащ елемент; оставете връзката да бъде обикновена връзка.
• Пропускане на преместването на фокуса в dialog изскачащ елемент или към първия menuitem в menu. Атрибутът назовава типа на изскачащия елемент, но не управлява фокуса.
• Задаване на aria-haspopup="dialog", без да се постави role="dialog" върху изскачащия елемент. Обещаната семантика никога не се появява.

Пример

<!-- 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>