aria-atomic

Wanneer gebruiken

Op een live-regio waarvan updates alleen als complete eenheid zinvol zijn. Het klassieke voorbeeld is een statusregel als “3 resultaten gevonden” — als de live-regio aria-atomic="false" heeft (de standaard) en alleen het getal verandert, kan de schermlezer alleen “3” aankondigen, zonder context. Met aria-atomic="true" wordt de volledige zin aangekondigd.

Stel aria-atomic="false" in (of laat het weg) wanneer:

• De regio een logboek of chatvenster is waarbij elke nieuwe regel op zichzelf staat — “Alice: hallo”, “Bob: hoi”. Het hele logboek bij elke update aankondigen zou ondraaglijk zijn.
• Alleen de nieuwe inhoud de nieuwe informatie bevat.

Stel aria-atomic="true" in wanneer:

• De regio een korte, stabiele zin is waarvan de betekenis afhankelijk is van de omliggende woorden — “Winkelwagentotaal: € 42,18”, “Pagina 3 van 12”, “Filters toegepast: 2”.
• Een kleine DOM-wijziging in de regio op zichzelf weinig betekenis heeft.

aria-atomic is onafhankelijk van aria-live en aria-busy. Ze werken samen maar sturen verschillende aspecten aan.

Instellen en laten staan

Geldige waarden zijn "true" en "false". De standaard is "false".

Stel het attribuut eenmaal in op de live-regio en laat het met rust — het is een eigenschap van hoe de regio moet worden aangekondigd, geen toestand die in de loop der tijd verandert. Het wordt ook geërfd: aria-atomic="true" op een bovenliggend element maakt afstammende live-regio’s atomisch, tenzij overschreven.

Als de updatestrategie “vervang de volledige tekst van de regio” is, levert aria-atomic="true" de meest natuurlijke aankondiging op. Als de updatestrategie “voeg een nieuwe regel toe” is, verdient aria-atomic="false" doorgaans de voorkeur, zodat alleen de toegevoegde regel wordt gelezen.

Veelvoorkomende fouten

• aria-atomic op de standaard laten bij een stabiele éénregelige status, waarna alleen “5” wordt aangekondigd in plaats van “5 resultaten gevonden”.
• aria-atomic="true" instellen op een chatlogboek — elk nieuw bericht zorgt ervoor dat het hele logboek opnieuw wordt gelezen.
• Alleen een <span> binnen een atomische regio bijwerken en verrast zijn dat ook de omliggende tekst wordt aangekondigd. Dat is precies wat atomisch betekent.
• aria-atomic gebruiken op een regio zonder aria-live en zonder impliciete live-rol — het heeft geen effect.
• aria-atomic instellen op een focusbaar besturingselement. Live-regio-attributen horen op statuscontainers, niet op interactieve elementen.

Voorbeeld

<!-- Atomisch: de gehele zin is de melding -->
<p aria-live="polite" aria-atomic="true">
  Cart total: <span id="cart-total">$0.00</span>
</p>

<!-- Niet-atomisch: alleen de nieuwe regel wordt aangekondigd -->
<ul aria-live="polite" aria-atomic="false" id="chat-log">
  <li>Alice: hi there</li>
</ul>