aria-modal

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

Върху елемент role="dialog" или role="alertdialog", който трябва да блокира взаимодействието с останалата част от страницата докато е отворен. Задайте aria-modal="true", така че екранният четец да ограничи виртуалния си курсор до диалога и да обяви фоновото съдържание като недостъпно.

Един модален диалог има три отговорности:

1. aria-modal="true" — казва на помощните технологии, че е модален.
2. Неактивен фон — прилага се чрез атрибута inert върху заобикалящото съдържание или чрез управляван от JavaScript капан за фокус. Без това клавиатурните потребители могат да излязат с таб извън диалога.
3. Начален фокус — премества фокуса в диалога при отварянето му и го възстановява към тригера при затварянето му.

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

Нативният HTML елемент <dialog> с .showModal() обработва и трите автоматично. Предпочетете го, когато е приложимо.

Как да се поддържа синхронизиран

Валидните стойности са "true" и "false". Изобразете "true" докато диалогът е отворен; премахнете атрибута или задайте "false" докато е затворен (обикновено затвореният диалог изобщо не е в DOM, така че атрибутът е без значение).

aria-modal се свързва с два атрибута за означаване:

• aria-labelledby="<dialog-title-id>" — сочи към видимото заглавие.
• aria-describedby="<dialog-body-id>" — незадължителен, за кратко описание.

Заедно те дават на екранния четец последователно начално обявяване: „Диалог, Изтриване на акаунт?, Това действие не може да бъде отменено.”

Чести грешки

• aria-modal="true" без никакъв капан за фокус — клавиатурните потребители преминават с таб във фона.
• Използване на aria-modal върху немодален popover или tooltip. Използвайте role="dialog" само за истински модални диалози; popover не е диалог.
• Липсващ aria-labelledby — екранният четец обявява „Диалог” без наименование.
• Пропускане на преместването на фокуса в диалога при отварянето му.
• Пропускане на възстановяването на фокуса към оригиналния тригер при затварянето му.
• Маркиране на фона с aria-hidden="true" вместо с inert — клавиатурният фокус все още излиза; само курсорът на екранния четец е ограничен.
• Два едновременно отворени модала с aria-modal="true". Дървото на достъпността се обърква; показвайте по един в даден момент.

Пример

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="confirm-title"
  aria-describedby="confirm-body"
>
  <h2 id="confirm-title">Delete account?</h2>
  <p id="confirm-body">This action cannot be undone.</p>

  <button type="button" autofocus>Cancel</button>
  <button type="button">Delete</button>
</div>