Live-region

En live-region er en del af DOM’en, der — når dens indhold ændrer sig — automatisk annonceres til skærmlæserbrugere, uden at fokus flyttes, uden at brugeren skal navigere til den, og uden at de behøver at genindlæse siden.

Live-regioner er mekanismen bag enhver „Toast: Vare tilføjet til kurv“-notifikation, enhver formularvalideringsbesked som „Fejl: E-mail er påkrævet“, enhver opdatering af søgeresultattallet, som en skærmlæserbruger faktisk hører.

Den grundlæggende attribut

Den enkleste live-region er en div med aria-live="polite":

<div aria-live="polite" id="status">
  <!-- indhold her vil blive annonceret, når det ændres -->
</div>

Når JavaScript indsætter tekst i #status, annoncerer skærmlæseren den nye tekst ved den næste naturlige pause — uden at afbryde det, brugeren aktuelt læser.

Polite versus assertive

aria-live har to operationelle værdier:

• polite — vent til brugeren er inaktiv, og annoncer derefter. Brug til de fleste notifikationer: bekræftelser, søgetal, statusbeskeder.
• assertive — afbryd brugerens aktuelle læsning og annoncer straks. Brug kun til ægte hastende beskeder: kritiske fejl, adgangskodeudløbsadvarsler, tidsfølsomme underretninger.

Kraftig brug af assertive er den hyppigste live-regionsfejl. Enhver lille toast, der fyrer assertive, gør skærmlæseren til en konstant afbryder og træner brugeren til at slå live-regionen helt fra.

ARIA-afledte alternativer

Adskillige ARIA-roller indebærer aria-live automatisk:

• role="alert" → opfører sig som aria-live="assertive".
• role="status" → opfører sig som aria-live="polite".
• role="log" → polite, med den konceptuelle antydning af en tilføjelses-log (chathistorik, konsoloutput).
• role="timer" → polite, til nedtælingstimere.

At vælge en rolle er ofte klarere end direkte at vælge en aria-live-værdi — det dokumenterer regionens formål.

Hvad der går galt i praksis

• Live-region tilføjet på samme tid som indholdet. ARIA annoncerer kun ændringer i live-regioner, der allerede eksisterede i DOM’en. At indsætte <div aria-live="polite">Indlæst</div> som en enkelt blok annoncerer ikke — region og indhold ankom sammen. Løsning: behold den tomme live-region i DOM’en fra sideindlæsning og udfyld den efterfølgende.
• For hurtige opdateringer. At indsætte tekst i en live-region flere gange i sekundet skyller den forrige annoncering ud, inden den er færdig. Brugeren hører fragmenter. Brug throttling eller debouncing af opdateringer.
• Modal-styrede annonceringer, der burde bruge fokus i stedet. Hvis brugerens bevidste handling udløste beskeden, er det ofte bedre at flytte fokus til beskeden (eller et relateret kontrolelement) frem for at stole på en live-regions-annoncering. Live-regioner er til passive notifikationer.
• Dekorativ støj i live-regionen. En live-region, der indeholder loading-spinnere, ikoner og tidsstempler ud over selve beskeden, får skærmlæseren til at læse det hele ved hver opdatering. Hold regionens indhold til kun beskeden.