Перейти к содержимомуПерейти к содержимому

🗣️ Простой язык • По состоянию на 27 мая 2026 г. |  ← Обычный язык

Manche Inhalte ändern sich schnell. Beispiele sind Formfehler, Ladezeiten und Mini-Einkaufswagen. Diese sagt der Screenreader an.

ARIA-Live-Regionen sind HTML-Bereiche mit einer Eigenschaft: aria-live="polite" oder "assertive". Wenn sich diese Bereiche ändern, sagt der Screenreader die Änderung. Der Nutzer muss nicht dorthin gehen. Beispiele: Fehlermeldungen im Formular, "Produkt ist im Einkaufswagen", Anzahl der Suchergebnisse.

Regel WCAG 4.1.3 ist wichtig. Sie gilt bei Änderungen ohne Fokus-Wechsel. Ohne Live-Region merkt der Nutzer nicht immer die Änderung. Zum Beispiel, "Bitte E-Mail angeben" wird gezeigt. Oder die Suche hat 0 Treffer. Das kann frustrieren.

15 Minuten Gespräch: Wir prüfen, ob es wichtig für Ihre Seite ist. Weitere Infos: Überblick zu BFSG, Leistungen, BAFA-Hilfe, häufige Fragen.

WCAG 4.1.3 · Модуль WCAG

Регионы ARIA Live

Динамический контент (ошибки форм, индикатор загрузки, мини-корзины) озвучивается программой чтения с экрана.

Что это такое?

Что означает "ARIA Live Regions"?

ARIA-области в режиме реального времени — это HTML-области с атрибутом aria-live="polite"" или ""напористый"". При изменении содержимого этих областей программа чтения с экрана автоматически сообщает об этом изменении — пользователю не нужно переходить на другую страницу. Примеры: сообщение об ошибке формы, „товар в корзине", номер результата поиска.

Почему это важно?

Обязательства и выгоды — WCAG 4.1.3.

WCAG 4.1.3 (Сообщения о состоянии) Уровень AA применяется везде, где происходит визуальное изменение статуса без смещения фокуса. Без активной области пользователь программы чтения с экрана не заметит, что отобразилось сообщение „Пожалуйста, введите адрес электронной почты" или что поиск не дал результатов. Следствием этого является разочарование и отказ от дальнейшего поиска.

Наша реализация

Как именно мы это решим.

  • aria-live="polite"" для некритических обновлений (загрузчик, результаты поиска).
  • aria-live="assertive"" Только для срочных сообщений (истекание сессии, критические ошибки).
  • role="status"" для сообщений о состоянии и role="alert"" для сообщений об ошибках — неявные активные области.
  • Контейнер должен присутствовать в DOM с самого начала (даже если он пустой), иначе функция live работать не будет.
  • Именно такая логика проявляется в быстрой проверке DigElite: <div id="check-result" role="status" aria-live="polite">.
Другие модули WCAG

Соответствующие структурные элементы нашего модульного комплекса

Все модули в обзоре BFSG →

Вам нужен именно этот модуль?

Первичная консультация (15 минут) — мы выясним, насколько она актуальна для вашего сайта.

Запишитесь на первичную консультацию

Дополнительная информация:
Обзор BFSG ·
Обзор производительности ·
Финансирование BAFA ·
Часто задаваемые вопросы

Обычный язык