aria-pressed

När ska det användas

På en knapp som fungerar som en växling — ljud av/på, följ/sluta följa, fet/inte fet i ett textredigeringsprogram, sidopanel öppen/stängd. Knappen byter tillstånd men navigerar inte; etiketten förblir densamma och enbart det trycka tillståndet kommunicerar förändringen.

Tre värden är giltiga:

• aria-pressed="false" — växlingen är av.
• aria-pressed="true" — växlingen är på.
• aria-pressed="mixed" — används när växlingen styr flera underobjekt och de befinner sig i ett blandat tillstånd (några på, några av). Sällsynt i praktiken; de flesta författare delar upp det i separata kontroller i stället.

Om din knapp inte växlar — den skickar bara ett formulär eller öppnar en modal — använd inte aria-pressed. Använd aria-expanded för upplysningskontroller, eller inget tillståndsattribut alls för vanliga åtgärdsknappar.

Hur man håller det synkroniserat

aria-pressed är ett tillstånd, vilket innebär att det förändras när användaren interagerar. Oavsett vilken klickhanterare som uppdaterar knappens visuella utseende måste den också uppdatera attributet. De två ska aldrig skilja sig åt — om ikonen visar tystat ljud ska aria-pressed ange "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');
  "
>
  Mute
</button>

Vanliga fel

• Att sätta aria-pressed på ett icke-knappelement (en <div> eller <a>). Använd role="button" eller, ännu bättre, byt till <button>.
• Att växla det visuella tillståndet med CSS men aldrig uppdatera aria-pressed. Skärmläsaranvändare fortsätter höra samma tillstånd.
• Att använda aria-pressed="true" på en knapp som inte växlar (en “Skicka”-knapp) — förvirrar hjälpmedlet att meddela ett irrelevant tillstånd.
• Att blanda ihop aria-pressed med aria-selected (för objekt i en enkelvalswidget som ett fliksystem eller ett alternativ) eller aria-checked (för kryssrutor och radioknappar). Var och en har olika semantik; välj den som matchar widgetmönstret.