spring naar de tekst
toolsside

:focus met Javascript

focus met JSVan een klant kregen we de vraag of het mogelijk is om teksten te verbergen en ze met een klik zichtbaar te maken. Dat is niet zo moeilijk. We hebben, in dit geval, de paragraaf verborgen met css en de gebruiker de mogelijkheid gegeven om de tekst weer zichtbaar te maken door op de h2 te klikken. In de afbeelding zijn dit de woorden missie, visie en uitgangspunten. Dit gebeurt allemaal in Javascript (aangezien een h2 normaal niet klikbaar is). Mocht de Javascript niet werken dan zie je gewoon alle tekst.

klikbare headings met focusMaar met de muis werkt dit gewoon maar niet als je met je toetsenbord navigeert. Een h2 is niet te bereiken met de tab-toets omdat dit geen interactief item is. We kunnen dit oplossen met Javascript.

Javascript code voor een keywdown event en tabindexNaast de eventhandler om de h2 klikbaar te maken heb ik er ook eentje voor het toetsenbord opgezet. Keydown zorgt voor een event als er op een willekeurige toets wordt geklikt. Als er een toets wordt ingedrukt wordt de functie clickHanlder uitgevoerdt.De regel daaronder zorgt ervoor dat er een attribuut aan de h2 wordt toegevoegd zodat de h2 bereikbaar (focusable) wordt met de tab-toets.

if statement voor enter of muisIn de funtie clickHandler kijken we dan eerste of de text al zichtbaar is (zo niet dan wordt deze zichtbaar en anders wordt deze weer verborgen) vervolgens wordt gekeken of de toets een enter toets is of een muisklik. In beide gevallen wordt de tekst getoont of verborgen. Gepubliceerd op 04 oktober 2019 door Renee de Kruijf