Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. 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 staten Toetsenbordbediening […]
Categorie: Componenten
Broodkruimelpad
Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. 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 […]
Carrousel
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 […]
Combobox
Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. 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 […]
Dialoogvenster
Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. 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 […]
Switch
Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Een switch is als een lichtknop: aan of uit. Het is direct duidelijk wat de huidige status 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 staten Toetsenbordbediening Voorbeeld […]
Tabpaneel
Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. 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: […]
Toggle
Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. 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 staten Toetsenbordbediening […]
Tooltip
Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. 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