alertdialog

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

Само при прекъсвания: грешка, блокираща продължаването на работата; потвърждение от типа „Сигурни ли сте, че искате да изтриете?”; предупреждение за незапазени промени при напускане на страницата. Използването на alertdialog за стандартни модални прозорци е прекомерно — за тях се използва обикновеното role="dialog".

Разликата от role="dialog" е, че alertdialog се обявява като role="alert" — настоятелно и незабавно — в момента на появяването си. Това е подходящо само при истински прекъсвания; неправилното използване води до умора от екранния четец.

aria-labelledby (насочен към заглавието) и aria-describedby (насочен към основния текст) са задължителни. Alertdialog трябва да съдържа поне един фокусируем бутон, чрез който потребителят да го затвори.

Клавиатура и управление на фокуса

Съгласно шаблона alertdialog в APG:

• При отваряне фокусът се премества към alertdialog — обикновено към най-безопасния бутон (Отказ), за да не се потвърди деструктивно действие при случайно натискане на Enter.
• Tab / Shift+Tab преместват фокуса в рамките на диалога.
• Escape затваря alertdialog и връща фокуса към елемента, отворил диалога.
• Останалата част от страницата е неактивна, докато alertdialog е отворен.

Първоначалният фокус трябва да се избира внимателно: при подкани „Изтриване?”, фокусът по подразбиране трябва да е върху Отказ — никога върху деструктивния бутон.

Чести грешки

• Използване на role="alertdialog" за всеки модален прозорец. Екранните четци обявяват настоятелно съобщение при всяко отваряне на модален прозорец.
• Начален фокус върху деструктивния бутон (Изтриване, Отхвърляне) — случайно натиснат Enter унищожава работата на потребителя.
• Липсващ aria-describedby към основния текст. Потребителят чува заглавието и бутоните, но не и предупреждението.
• Alertdialog без бутони — няма начин да се затвори, а ролята изисква действие от потребителя.
• Alertdialog, затварящ се автоматично след изтичане на времето. Това противоречи на семантиката „изисква отговор”.

Пример

<div
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="confTitle"
  aria-describedby="confDesc"
>
  <h2 id="confTitle">Delete draft?</h2>
  <p id="confDesc">"Untitled draft (March 12)" will be permanently deleted. This action cannot be undone.</p>
  <button type="button" autofocus>Cancel</button>
  <button type="button">Delete draft</button>
</div>