aria-atomic

Hvornår bruges den

På en live-region, hvis opdateringer kun giver mening, når de læses som en komplet enhed. Det klassiske eksempel er en enkeltlinjestatus som “3 resultater fundet” — hvis live-regionen er aria-atomic="false" (standarden) og kun tallet ændres, kan skærmlæseren annoncere blot “3” uden kontekst. Med aria-atomic="true" annonceres den fulde sætning.

Sæt aria-atomic="false" (eller udelad den), når:

• Regionen er en log eller et chatpanel, hvor hver ny linje er selvstændig — “Alice: hej”, “Bob: hej”. At annoncere hele loggen, hver gang der tilføjes en linje, ville være uudholdelig.
• Kun det nye indhold bærer den nye information.

Sæt aria-atomic="true", når:

• Regionen er en kort, stabil sætning, hvis betydning afhænger af de omgivende ord — “Kurv i alt: 42,18 kr.”, “Side 3 af 12”, “Filtre anvendt: 2”.
• En lille DOM-ændring inden i regionen bærer ringe mening i sig selv.

aria-atomic er uafhængig af aria-live og aria-busy. De arbejder sammen, men justerer forskellige aspekter.

Sådan holdes den synkroniseret

Gyldige værdier er "true" og "false". Standarden er "false".

Sæt attributten én gang på live-regionen og lad den stå — den er en egenskab ved, hvordan regionen bør annonceres, ikke en tilstand, der ændrer sig over tid. Den nedarves også: at anvende aria-atomic="true" på et overordnet element gør underordnede live-regioner atomare, medmindre de overrides.

Hvis din opdateringsstrategi er “erstat hele regionens tekst”, giver aria-atomic="true" den mest naturlige annoncering. Hvis din strategi er “tilføj en ny linje”, vil du normalt have aria-atomic="false", så kun den tilføjede linje læses.

Hyppige fejl

• Lade aria-atomic stå på sin standard på en stabil enkeltlinjestatus og derefter høre kun “5” annonceret i stedet for “5 resultater fundet”.
• Sætte aria-atomic="true" på en chatlog — hver ny besked får hele loggen genoplæst.
• Opdatere kun et <span> inden i en atomisk region og blive overrasket over, at den omgivende tekst annonceres. Det er præcis, hvad atomic betyder.
• Bruge aria-atomic på en region, der ikke har nogen aria-live og ingen implicit live-rolle — det har ingen effekt.
• Sætte aria-atomic på en fokuserbar kontrol. Live-region-attributter hører hjemme på statusbeholdere, ikke interaktive elementer.

Eksempel

<!-- Atomic: the whole sentence is the message -->
<p aria-live="polite" aria-atomic="true">
  Cart total: <span id="cart-total">$0.00</span>
</p>

<!-- Non-atomic: only the new line is announced -->
<ul aria-live="polite" aria-atomic="false" id="chat-log">
  <li>Alice: hi there</li>
</ul>