aria-pressed

Wanneer te gebruiken

Op een knop die als schakelaar werkt — dempen/demping opheffen, volgen/ontvolgen, vet/niet-vet in een teksteditor, zijbalk-open/zijbalk-gesloten. De knop wisselt van toestand maar navigeert niet; het label blijft hetzelfde en alleen de ingedrukte toestand communiceert de wijziging.

Drie waarden zijn geldig:

• aria-pressed="false" — de schakelaar staat uit.
• aria-pressed="true" — de schakelaar staat aan.
• aria-pressed="mixed" — gebruikt wanneer de schakelaar meerdere subitems bestuurt en deze zich in een gemengde toestand bevinden (sommige aan, sommige uit). Zeldzaam in de praktijk; de meeste auteurs splitsen dit op in afzonderlijke besturingselementen.

Als een knop niet schakelt — het stuurt alleen een formulier in of opent een modal — gebruik dan geen aria-pressed. Gebruik aria-expanded voor openbaarmakingsbesturingselementen, of helemaal geen toestandsattribuut voor gewone actieknoppen.

Synchronisatie

aria-pressed is een toestand, wat betekent dat deze verandert naarmate de gebruiker interageert. Welke klikhandler ook de visuele weergave van de knop bijwerkt, moet ook het attribuut bijwerken. De twee mogen nooit van elkaar afwijken — als het pictogram gedempt toont, moet aria-pressed "true" zijn.

<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>

Veelvoorkomende fouten

• aria-pressed instellen op een niet-knop (een <div> of <a>). Gebruik role="button" of, beter nog, schakel over naar <button>.
• De visuele toestand wisselen met CSS maar aria-pressed nooit bijwerken. Schermlezersgebruikers blijven dezelfde toestand horen.
• aria-pressed="true" gebruiken op een knop die niet schakelt (een “Verzenden”-knop) — verwarrt de hulptechnologie door een irrelevante toestand aan te kondigen.
• aria-pressed verwarren met aria-selected (voor items in een enkelvoudig selectie-widget zoals een tabblad of optie) of aria-checked (voor selectievakjes en keuzerondjes). Elk heeft andere semantiek; kies degene die overeenkomt met het widgetpatroon.