aria-atomic

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

На жив регион, чиито актуализации имат смисъл само когато се четат като цялостна единица. Класическият пример е едноредов статус като „Намерени са 3 резултата” — ако живият регион е aria-atomic="false" (по подразбиране) и само числото се промени, екранният четец може да обяви само „3”, без контекст. С aria-atomic="true" се обявява цялото изречение.

Задайте aria-atomic="false" (или пропуснете атрибута), когато:

• Регионът е журнал или чат панел, в който всеки нов ред е самостоятелен — „Алиса: здравей”, „Боб: здравей”. Обявяването на целия журнал при всяка промяна би било непоносимо.
• Само новото съдържание носи новата информация.

Задайте aria-atomic="true", когато:

• Регионът е кратка, стабилна фраза, чийто смисъл зависи от съседните думи — „Сума в количката: 42,18 €”, „Страница 3 от 12”, „Приложени филтри: 2”.
• Малка промяна в DOM вътре в региона носи малко смисъл сама по себе си.

aria-atomic е независим от aria-live и aria-busy. Те работят заедно, но регулират различни аспекти.

Как да се поддържа актуален

Валидните стойности са "true" и "false". По подразбиране е "false".

Задайте атрибута веднъж на живия регион и не го променяйте — той е свойство на начина, по който регионът трябва да се обявява, а не състояние, което се изменя с времето. Атрибутът е и наследствен: прилагането на aria-atomic="true" към родителски елемент прави потомствените живи региони атомарни, освен ако не са заместени.

Ако стратегията за актуализация е „замести целия текст на региона”, aria-atomic="true" произвежда най-естественото обявяване. Ако стратегията е „добави нов ред”, обикновено се иска aria-atomic="false", за да се чете само добавеният ред.

Чести грешки

• Оставяне на aria-atomic с подразбиращата се стойност на стабилен едноредов статус — чува се само „5” вместо „5 намерени резултата”.
• Задаване на aria-atomic="true" на журнал за чат — всяко ново съобщение предизвиква повторно четене на целия журнал.
• Актуализиране само на <span> вътре в атомарен регион и изненада, че съседният текст също се обявява. Това е точно смисълът на атомарността.
• Използване на aria-atomic на регион без aria-live и без имплицитна жива роля — атрибутът няма ефект.
• Задаване на aria-atomic на фокусируем контрол. Атрибутите на живия регион принадлежат на контейнерите за статус, а не на интерактивните елементи.

Пример

<!-- Атомарен: цялото изречение е съобщението -->
<p aria-live="polite" aria-atomic="true">
  Сума в количката: <span id="cart-total">0,00 €</span>
</p>

<!-- Неатомарен: обявява се само новият ред -->
<ul aria-live="polite" aria-atomic="false" id="chat-log">
  <li>Алиса: здравей</li>
</ul>