Tilbage til Semantik og struktur

Webtilgængelighed

Disclosure og synkroniseret state

Lad en knap vise og skjule indhold, mens den faktiske synlighed og aria-expanded følges ad.

Se undervisningsslides

Relevante links

TL;DR

  1. Knappen håndterer aktivering, hidden styrer panelets synlighed, og aria-expanded formidler tilstanden.
  2. aria-controls forbinder knappen med panelets id, men åbner ikke noget.
  3. Test både den lukkede og åbne tilstand — og luk igen.

Tre dele med hvert sit ansvar

Et disclosure er en kontrol, der folder tilknyttet indhold ud og sammen. Knappen står før panelet i DOM’en, så indholdet kan læses efter kontrollen.

<button
  class="disclosure-button"
  type="button"
  aria-expanded="false"
  aria-controls="fit-tips">
  Vis tips om pasform
</button>


<div id="fit-tips" hidden>
  <p>Vælg størrelse ud fra din fodlængde.</p>
</div>

aria-expanded hører til kontrollen, ikke panelet. aria-controls beskriver relationen og er valgfri i APG’s disclosure-mønster; her bruger vi den til at gøre forbindelsen eksplicit.

hidden er et boolesk HTML-attribut. hidden="false" er derfor stadig skjult. ARIA-tilstande bruger derimod strengene "true" og "false".

En kilde til tilstanden

Her tager JavaScript udgangspunkt i panelets faktiske tilstand og opdaterer knappens information ud fra den:

const button = document.querySelector(".disclosure-button");
const panel = document.querySelector("#fit-tips");


button.addEventListener("click", () => {
  panel.hidden = !panel.hidden;
  button.ariaExpanded = String(!panel.hidden);
});

Kør koden efter markuppen er indlæst, fx i et modulscript. Når panel.hidden er false, skal aria-expanded være "true". Initial HTML og efterfølgende opdateringer skal være enige.

Afprøv klik, Enter og Mellemrum. Bliver fokus på knappen? Kan indholdet læses, når det er åbent, og er det væk fra accessibility-træet, når det er lukket? Du behøver ikke flytte fokus ind i et almindeligt disclosure.

Vælg native når det passer

Til en enkel udfoldelig forklaring kan details og summary allerede løse opgaven:

<details>
  <summary>Tips om pasform</summary>
  <p>Vælg størrelse ud fra din fodlængde.</p>
</details>

Tilføj ikke et parallelt aria-expanded, som du selv skal vedligeholde. Bro-øvelsen bruger en separat knap for at gøre ansvarsfordelingen tydelig.

Se mere