Tilbage til Navne, billeder og feedback

Webtilgængelighed

States og statusfeedback

Formidl forskellen på en valgt tilstand og en besked om, at en handling er lykkedes.

Se undervisningsslides

Relevante links

TL;DR

  1. En kontrols navn, tilstand og feedback har forskellige opgaver.
  2. aria-pressed passer til en toggle-knap; aria-expanded passer til udfoldet indhold.
  3. En kort status kan annonceres uden at flytte fokus, hvis live regionen er oprettet før ændringen.

Tilstand er mere end farve

Et fyldt hjerte kan vise, at en vare er valgt som favorit. Gør tilstanden tilgængelig på knappen, ikke kun via ikon eller CSS:

<button
  class="favorite-button"
  type="button"
  aria-label="Favorit, Nova Runner"
  aria-pressed="false">
  <span aria-hidden="true">♡</span>
</button>
const favorite = document.querySelector(".favorite-button");


favorite.addEventListener("click", () => {
  const pressed = favorite.ariaPressed === "true";
  favorite.ariaPressed = String(!pressed);
  favorite.querySelector("span").textContent = pressed ? "♡" : "♥";
});

Bevar navnet, når du bruger dette toggle-mønster; aria-pressed fortæller ændringen. En disclosure bruger derimod aria-expanded. aria-disabled beskriver, at en kontrol er utilgængelig, men stopper ikke selv klik eller fokus. Foretræk native disabled på en knap, når det passer til interaktionen.

En kort besked uden fokusskift

Når en vare lægges i kurven, kan fokus blive på købsknappen. En kort kvittering kan komme fra en eksisterende statusregion:

<p id="cart-status" role="status"></p>

Efter en gennemført handling opdateres dens indhold:

const status = document.querySelector("#cart-status");
status.textContent = "Nova Runner er lagt i kurven.";

role="status" giver implicit en høflig live region: Beskeden kan annonceres, når skærmlæseren har mulighed for det, uden at afbryde som en alarm. Opret regionen før opdateringen, og begræns den til beskeden. W3C’s status-teknik.

Test med en skærmlæser. Et inspector-panel kan vise rollen, men ikke bevise, at beskeden faktisk annonceres. Samme tekst indsat igen giver ikke nødvendigvis en ny annoncering; genindlæs mellem identiske forsøg, eller brug meningsfulde ændringer som et opdateret antal varer.

Se mere