alert
Жива зона, която предава спешно, чувствително към времето съобщение. Екранните четци го обявяват незабавно, прекъсвайки текущото четене. Използвайте рядко — запазете за истински грешки и предупреждения; злоупотребата причинява умора от помощните технологии.
Кога да се използва
За съобщения, които наистина прекъсват потребителя — неуспешно изпращане на формуляр, наближаваща автоматична отвреждане на сесия, загубена връзка. role="alert" е еквивалентен на aria-live="assertive" плюс aria-atomic="true", което означава, че екранният четец спира текущото обявяване и прочита предупреждението следващо.
Използвайте рядко. Assertive обявявания прекъсват текущата задача на потребителя; изпращането на такова при всяко запазено поле или успешно действие е враждебно. За нетрочни промени в статуса използвайте role="status" (aria-live="polite") вместо това.
Единственото най-трудно правило: елементът alert ТРЯБВА да съществува в DOM преди да бъде вмъкнато съобщението, а съдържанието ТРЯБВА да бъде добавено (не превключено от hidden) за да се задейства обявяването. Вмъкването на <div role="alert">Грешка</div> от нулата е ненадеждно при различните екранни четци. Безопасният модел: изобразете празен <div role="alert"></div> при зареждане на страницата, след това обновете текстовото му съдържание когато настъпи предупреждение.
Кога да се използва alert срещу status
Използвайте role="alert" | Използвайте role="status" |
|---|---|
| Грешки при валидация на формуляр | „Артикулът е добавен в количката” |
| Наближаваща автоматична отвреждане на сесия | Актуализиран брой резултати от търсене |
| Загубена връзка | Индикатор „Запазено” |
| Неуспешно плащане | Завършено зареждане |
Чести грешки
- Елементът alert е добавен в DOM след съобщението — много екранни четци не го обявяват.
- Превключване на
hiddenвърху предварително попълнен alert. Промяната в текстовото съдържание е това, което задейства обявяването; превключването на видимостта само по себе си може да не е достатъчно. - Използване на
role="alert"за рутинен статус. Претоварва потребителя с прекъсвания. - Множество предупреждения, вмъкнати бързо едно след друго — по-късните съобщения се нареждат зад по-ранните, понякога за десетки секунди.
- Съобщение за предупреждение, което не назовава полето или причината — само „Грешка” е безполезно. „Адресът на електронна поща е задължителен.” е приложимо.
- Поставяне на
role="alert"върху обвивка около формуляр с очакване промените вътре да бъдат обявени. Само промените в текста на самия alert елемент задействат обявяването.
Пример
<!-- Изобразете това празно при зареждане на страницата -->
<div role="alert" id="formErr"></div>
<script>
// При неуспешно изпращане:
document.getElementById('formErr').textContent =
'Email address is required.';
</script>