Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.
Een toon meer knop toont of verbergt extra content. Gebruikers klikken op de knop om meer informatie te zien zonder naar een andere pagina te gaan. De knop verandert naar “Toon minder” om de content weer te verbergen.
Gebruik een toon meer knop:
- Bij lange lijsten die je wilt beperken (filters, producten, nieuws)
- Bij lange artikelen waar je een samenvatting toont
- Om de pagina overzichtelijk te houden
Technische opbouw
- (4.1.2) De knop moet een
<button>-element zijn - (2.4.6) De knop moet een toegankelijke naam hebben die de actie beschrijft
- (4.1.1) De verborgen items moeten een uniek
idhebben - (4.1.2) Een uitgevouwen knop moet
aria-expanded="true"hebben - (4.1.2) Een samengevouwen knop moet
aria-expanded="false"hebben - (1.3.1) De knop moet
aria-controlshebben met deid’s van de verborgen items - (4.1.2) Verborgen items moeten verborgen zijn (
hiddenofdisplay: none) - (1.3.1) Alle items moeten in één
<ul>lijst staan (niet twee aparte lijsten)
Toetsenbordbediening
- Enter of Spatie:
- Bij een samengevouwen lijst: toont de extra items
- Bij een uitgevouwen lijst: verbergt de extra items
- Tab:
- Gaat naar het volgende focusbare element
- Shift + Tab:
- Gaat naar het vorige focusbare element
Focus management
- Na het openen verplaatst de focus naar het eerste nieuwe item
- Na het sluiten blijft de focus op de knop