aria-atomic

När du ska använda det

På en direktsänd region vars uppdateringar bara är meningsfulla när de läses som en hel enhet. Det klassiska exemplet är en enstaka rad med status som “3 resultat hittades” — om den direktsända regionen har aria-atomic="false" (standard) och bara siffran ändras kan skärmläsaren meddela bara “3”, utan sammanhang. Med aria-atomic="true" meddelas hela meningen.

Sätt aria-atomic="false" (eller utelämna det) när:

• Regionen är en logg eller ett chattfönster där varje ny rad är fristående — “Alice: hej”, “Bob: hej”. Att meddela hela loggen varje gång vore outhärdligt.
• Bara det nya innehållet bär den nya informationen.

Sätt aria-atomic="true" när:

• Regionen är en kort, stabil fras vars mening beror på omgivande ord — “Kundvagnssumma: 42,18 kr”, “Sida 3 av 12”, “Filter tillämpade: 2”.
• En liten DOM-ändring inuti regionen bär liten mening på egen hand.

aria-atomic är oberoende av aria-live och aria-busy. De fungerar tillsammans men reglerar olika aspekter.

Hur du håller det i synk

Giltiga värden är "true" och "false". Standard är "false".

Sätt attributet en gång på den direktsända regionen och lämna det ifred — det är en egenskap hos hur regionen ska meddelas, inte ett tillstånd som förändras över tid. Det ärvs också: att tillämpa aria-atomic="true" på ett förälderelement gör underordnade direktsända regioner atomiska om inget annat anges.

Om din uppdateringsstrategi är “ersätt hela regionens text” ger aria-atomic="true" det naturligaste meddelandet. Om din strategi är “lägg till en ny rad” vill du vanligen ha aria-atomic="false" så att bara den tillagda raden läses.

Vanliga fel

• Lämnar aria-atomic på standard för en stabil enstaka rad och hör sedan bara “5” meddelas i stället för “5 resultat hittades”.
• Sätter aria-atomic="true" på en chattlogg — varje nytt meddelande gör att hela loggen läses om.
• Uppdaterar bara ett <span> inuti en atomisk region och förvånas över att den omgivande texten meddelas också. Det är exakt vad atomisk innebär.
• Använder aria-atomic på en region som saknar aria-live och ingen implicit live-roll — det har ingen effekt.
• Sätter aria-atomic på en fokuserbar kontroll. Attribut för direktsända regioner hör hemma på statushållare, inte interaktiva element.

Exempel

<!-- Atomisk: hela meningen är meddelandet -->
<p aria-live="polite" aria-atomic="true">
  Cart total: <span id="cart-total">$0.00</span>
</p>

<!-- Icke-atomisk: bara den nya raden meddelas -->
<ul aria-live="polite" aria-atomic="false" id="chat-log">
  <li>Alice: hi there</li>
</ul>