Categorie: Componenten

Een accordeon is perfect om veel content compact te presenteren. Het is een verzameling knoppen waarmee je content kunt tonen of verbergen. Met deze toon/verberg-knoppen kunnen gebruikers zelf kiezen welke informatie ze willen zien. Gebruik een accordeon: Belangrijke onderdelen: Technische opbouw Optioneel Component eigenschappen Toetsenbordbediening Optionele toetsen Focus management Voorbeeld accordeon See the Pen Accordeon […]

Een broodkruimelpad laat zien waar je bent op een website. Het is een lijst met links naar bovenliggende pagina’s. Gebruikers zien waar ze zijn en kunnen makkelijk terug naar vorige niveaus. Technische opbouw Optioneel Algemeen Content Bedieningselementen Voorbeeld broodkruimelpad See the Pen Broodkruimelpad by Niek (@niekd) on CodePen. Bronnen

Carousels zijn populair maar vaak een toegankelijkheidsnachtmerrie. Bewegende content, automatisch afspelen, onduidelijke navigatie: Het kan allemaal fout gaan. Maar het kan ook goed! De belangrijkste regel: gebruikers moeten de carousel kunnen pauzeren. Bewegende content is voor veel mensen storend of zelfs onmogelijk te lezen. Een pauzeknop is dus een must. Elke slide moet: Technische opbouw […]

Een combobox is een invoerveld met een bijbehorende popup. Gebruikers kiezen een waarde uit de popup. Deze popup kan een list, grid, tree of dialog zijn. In dit voorbeeld gebruik ik een lijst. Gebruik een combobox als: Er zijn twee hoofdtypen combobox: Technische opbouw Optioneel Component eigenschappen Toetsenbordbediening Invoerveld Popup Optionele toetsen Focus management Voorbeeld […]

Een sorteerbare tabel laat gebruikers data sorteren op verschillende kolommen. Gebruikers klikken op kolomkoppen om de volgorde te wijzigen. Dit helpt bij het analyseren en vergelijken van informatie. Gebruik een sorteerbare tabel als: Technische opbouw Toetsenbordbediening Focus management Voorbeeld datatabel See the Pen Datatabel (sorteerbaar) by Niek (@niekd) on CodePen. Bronnen

Een dialoogvenster is een venster dat over de content van je pagina heen verschijnt. Vaak staat hier een melding waar de gebruiker meteen iets mee moet doen. Je blokkeert daarmee de achtergrond zodat bezoekers eerst de melding moeten afhandelen voordat ze verder kunnen. Technische opbouw Optioneel Toetsenbordbediening Focus management Voorbeeld dialoogvenster See the Pen Dialoogvenster […]

Navigatie helpt gebruikers door je website bewegen. Het toont de structuur van je site en geeft toegang tot verschillende pagina’s. Een goede navigatie werkt voor iedereen: met muis, toetsenbord, touch en schermlezer. Belangrijke termen: Technische opbouw Navigatiemenu Mobile toggle Toetsenbordbediening Navigatiemenu Mobile toggle: Focus management Voorbeeld navigatie See the Pen Navigatie by Niek (@niekd) on […]

Een switch is als een lichtknop: aan of uit. Het is direct duidelijk wat de huidige toestand is. Bij een switch gebeurt de actie direct als je schakelt. Zoals bij dark mode aan/uit, notificaties aan/uit, enz. Gebruik een switch: Technische opbouw Component eigenschappen Toetsenbordbediening Voorbeeld switch See the Pen Switch by Niek (@niekd) on CodePen. […]

Tabs zijn een set gelaagde inhoudssecties. Je toont één inhoudspaneel tegelijk. Elk paneel heeft een bijbehorend tab-element. Als je een tab activeert, zie je het bijbehorende paneel. De lijst met tab-elementen staat meestal aan de bovenkant van het zichtbare paneel. Gebruik een tabpaneel: Belangrijke termen: Technische opbouw Optioneel Component eigenschappen Toetsenbordbediening Optionele toetsen Voorbeeld tabpaneel […]

Een toggle is als een schakelaar tussen verschillende toestanden. Je wisselt tussen opties zoals weergave, sortering of filters. Bij een toggle verander je de huidige toestand naar een andere toestand. Zoals bij lijst/raster weergave, oplopend/aflopend sorteren, enz. Gebruik een toggle: Technische opbouw Component eigenschappen Toetsenbordbediening Voorbeeld toggle See the Pen Toggle by Niek (@niekd) on […]

Tooltips zijn een kleine informatievensters die verschijnen bij hover of focus van een element. Ze geven extra informatie zonder je interface vol te proppen. Gebruik een tooltip: Een goede tooltip: Technische opbouw Toetsenbord Voorbeeld tooltip See the Pen Tooltip by Niek (@niekd) on CodePen. Bronnen

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: Technische opbouw Toetsenbordbediening Focus management Voorbeeld toon meer See the Pen Toon […]