aria-atomic

Kiedy używać

Na regionie na żywo, którego aktualizacje mają sens tylko gdy są odczytywane jako kompletna całość. Klasycznym przykładem jest jednoliniowy status jak „Znaleziono 3 wyniki” — jeśli region na żywo ma aria-atomic="false" (domyślnie) i zmieni się tylko liczba, czytnik ekranu może ogłosić jedynie „3”, bez kontekstu. Z aria-atomic="true" ogłasza całe zdanie.

Ustaw aria-atomic="false" (lub pomiń), gdy:

• Region jest logiem lub panelem czatu, gdzie każda nowa linia jest samodzielna — „Alicja: cześć”, „Bartek: hej”. Ogłaszanie całego logu przy każdej zmianie byłoby nieznośne.
• Tylko nowa treść niesie nową informację.

Ustaw aria-atomic="true", gdy:

• Region to krótka, stabilna fraza, której znaczenie zależy od sąsiadujących słów — „Suma koszyka: 42,18 zł”, „Strona 3 z 12”, „Zastosowane filtry: 2”.
• Mała zmiana DOM wewnątrz regionu sama w sobie niesie niewiele znaczenia.

aria-atomic jest niezależny od aria-live i aria-busy. Działają razem, lecz dostrajają różne aspekty.

Jak utrzymywać synchronizację

Prawidłowe wartości to "true" i "false". Domyślna to "false".

Ustaw atrybut raz na regionie na żywo i zostaw go — jest to właściwość sposobu ogłaszania regionu, a nie stan zmieniający się z upływem czasu. Jest również dziedziczony: zastosowanie aria-atomic="true" do rodzica sprawia, że potomne regiony na żywo są atomiczne, chyba że zostaną nadpisane.

Jeśli Twoja strategia aktualizacji to „zastąp cały tekst regionu”, aria-atomic="true" produkuje najbardziej naturalne ogłoszenie. Jeśli Twoja strategia to „dołącz nową linię”, zazwyczaj chcesz aria-atomic="false", by odczytana była tylko dołączona linia.

Częste błędy

• Pozostawienie aria-atomic przy domyślnej wartości na stabilnym jednoliniowym statusie, a następnie słyszenie ogłoszenia „5” zamiast „5 wyników znaleziono”.
• Ustawianie aria-atomic="true" na logu czatu — każda nowa wiadomość powoduje ponowne odczytanie całego logu.
• Aktualizowanie tylko <span> wewnątrz regionu atomicznego i zdziwienie, że otaczający tekst jest również ogłaszany. To właśnie znaczy atomiczny.
• Używanie aria-atomic na regionie bez aria-live i bez niejawnej roli na żywo — nie ma żadnego efektu.
• Ustawianie aria-atomic na formancie możliwym do aktywowania. Atrybuty regionu na żywo należą na kontenery statusu, nie na elementy interaktywne.

Przykład

<!-- Atomiczny: całe zdanie jest komunikatem -->
<p aria-live="polite" aria-atomic="true">
  Suma koszyka: <span id="cart-total">0,00 zł</span>
</p>

<!-- Nieatomiczny: ogłaszana jest tylko nowa linia -->
<ul aria-live="polite" aria-atomic="false" id="chat-log">
  <li>Alicja: witaj</li>
</ul>