aria-pressed

Hvornår bruges det

På en knap, der fungerer som et skift — lyd fra / lyd til, følg / afølg, fed / ikke-fed i en teksteditor, sidebar åben / sidebar lukket. Knappen skifter tilstand, men udfører ikke navigation; labelen forbliver den samme, og kun pressed-tilstanden kommunikerer ændringen.

Tre værdier er gyldige:

• aria-pressed="false" — skiftet er slukket.
• aria-pressed="true" — skiftet er tændt.
• aria-pressed="mixed" — bruges, når skiftet styrer flere underpunkter, og de er i en blandet tilstand (nogle tændt, nogle slukket). Sjældent i praksis; de fleste forfattere opdeler i separate kontroller.

Hvis din knap ikke skifter — den bare indsender en formular eller åbner en modal — brug ikke aria-pressed. Brug aria-expanded til visningstjek-kontroller, eller slet ingen tilstandsattribut til simple handlingsknapper.

Sådan holdes det synkroniseret

aria-pressed er en tilstand, hvilket betyder, at den ændres, efterhånden som brugeren interagerer. Enhver klikhåndterer, der opdaterer knappens visuelle udseende, skal også opdatere attributten. De to bør aldrig være uenige — hvis ikonet viser lydfra, skal aria-pressed sige "true".

<button
  type="button"
  aria-pressed="false"
  onclick="
    const next = this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-pressed', next);
    toggleMute(next === 'true');
  "
>
  Lyd fra
</button>

Hyppige fejl

• Sætning af aria-pressed på et ikke-knap-element (en <div> eller <a>). Brug role="button" eller, endnu bedre, skift til <button>.
• Skift af den visuelle tilstand med CSS, men aldrig opdatering af aria-pressed. Skærmlæserbrugere hører fortsat den samme tilstand.
• Brug af aria-pressed="true" på en knap, der ikke skifter (en “Send”-knap) — forvirrer hjælpeteknologien til at annoncere en irrelevant tilstand.
• Forveksling af aria-pressed med aria-selected (for punkter i en single-select-widget som en fane eller option) eller aria-checked (for afkrydsningsfelter og radioknapper). Hvert har forskellig semantik; vælg det, der matcher widget-mønsteret.