Statusne poruke koje doista stignu

Kriterij 4.1.3 primjećuje se zadnji jer vizualno ništa ne izgleda pokvareno: obavijest se pojavi, broj rezultata se osvježi, filtar proradi. Samo o tome ne sazna nitko tko upravo ne gleda to mjesto. Upravo te slučajeve pronalazi naš sloj za dinamički sadržaj, pokretanjem interakcije i promatranjem što se semantički zatim dogodi.

Tri tipične pogreške

<!-- 1. Toast wird samt Text neu ins DOM gehaengt:
     oft kommt gar keine Ansage an, weil die Live-Region
     im selben Moment erst entsteht -->
<script>
  const toast = document.createElement("div");
  toast.className = "toast";
  toast.textContent = "In den Warenkorb gelegt";
  document.body.appendChild(toast);
</script>

<!-- 2. Ergebniszahl aendert sich stumm -->
<p class="results">42 Treffer</p>

<!-- 3. Alles laut: assertive fuer eine harmlose Bestaetigung
     unterbricht die laufende Ausgabe -->
<div aria-live="assertive">Filter angewendet</div>

Prvi je slučaj najčešći i najpodmukliji: živo područje nastaje u istom trenutku kad i njegov sadržaj. Mnogi čitači zaslona prate samo područja koja su već postojala, pa ne jave ništa. U izvještaju to piše kao „živo područje umetnuto sa sadržajem“, i upravo se to misli.

Pouzdana izvedba

<!-- Die Live-Region steht von Anfang an im DOM und ist leer.
     Spaeter wird nur ihr Text gesetzt: das loest die Ansage aus. -->
<div id="status" role="status" aria-live="polite" class="sr-only"></div>

<p class="results">
  <span id="result-count" role="status">42 Treffer</span>
</p>

<script>
  function announce(message) {
    const region = document.getElementById("status");
    // Leeren und im naechsten Frame setzen: identische Texte
    // hintereinander werden sonst nicht erneut angesagt.
    region.textContent = "";
    requestAnimationFrame(() => {
      region.textContent = message;
    });
  }

  announce("In den Warenkorb gelegt");
</script>

/* Visuell versteckt, aber im Accessibility-Tree vorhanden.
   Nicht display:none verwenden: das entfernt die Region komplett. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

polite, assertive ili fokus

• role="status" (polite): potvrde, broj rezultata, stanja učitavanja. Čeka da trenutačno čitanje završi.
• role="alert" (assertive): pogreške i upozorenja koja moraju stići odmah. Prekida, pa ga koristite štedljivo.
• Pomak fokusa: za događaje kod kojih se treba promijeniti i mjesto upravljanja, primjerice sažetak pogrešaka nakon slanja.

Detalji koji čine razliku

• Isti tekst dvaput zaredom često se ne najavi ponovno: prvo ispraznite, pa postavite u sljedećem okviru.
• Poruku držite kratkom i potpunom: „Dodano u košaricu: tenisica 4711“ bolje je od „Uspjeh“.
• Ako obavijest nestane nakon tri sekunde, informacija je za sporije čitanje izgubljena. Važne poruke zadržite ili ih ponovite na trajnom mjestu.
• Jedno živo područje po svrsi je dovoljno. Više njih istodobno se preklapa.

Provjera

1. Pokrenite čitač zaslona, radnju izvedite tipkovnicom i odvratite pogled: stiže li najava?
2. Provjerite je li fokus ostao gdje je bio (statusne poruke ga ne smiju krasti).
3. Pokrenite istu radnju dvaput: najavljuje li se i drugi put?