spring naar de tekst
toolsside

klikbare koptekst

Ikkreeg van een klant de vraag of het mogelijk is om tekst te verbergen en met een klik zichtbaar te maken. Natuurlijk is dat mogelijk was mijn antwoord. Moet toch niet zo heel moeilijk zijn was mijn eerste gedachte.

Alle tekst van een bepaald artikel moet zichtbaar worden als je op een koptekst klikt. Standaard, als de pagina geladen is, is de tekst verbogen. Dit is met CSS en Javascript vrij gemakkelijk te doen. Alleen vanuit het oogpunt van toegankelijk was het toch iets bewerkelijker dan ik dacht.

Daarnaast moest de tekst natuurlijk wel zichtbaar zijn als de Javascript niet zou werken, oftewel graceful decredation (mocht er technisch iets mis gaan, bijvoorbeeld de Javascript of de CSS laad niet dan moet de pagina wel nog gewoon te lezen zijn). Dit laatste punt is natuurlijk ook een vorm van toegankelijkheid. Als je in de CSS de tekst op page-load zou verbergen en daarna zichtbaar zou maken met Javascript dan is de tekst dus niet zichtbaar als de CSS wel werkt en de Javascript niet. Dan maak je het voor mensen die geen handicap hebben en de tekst dus willen lezen onmogelijk om deze te lezen. Zoef en weg zijn ze. Het is dus zaak de tekst bij het laden van de pagina te verbergen met Javascript en ook weer zichtbaar te maken met Javascript.

Een ander punt is dat je moet uitkijken met display: none of visibility: hidden. Als je dat doet dan is de tekst voor iedereen onzichtbaar, ook voor mensen met een screenreader. Dit kan je oplossen door de tekst buiten het zichtbare venster te plaatsen.

Voorbeeld CSS voor verborgen tekstp.hide {
  position: absolute;
  left: -999px;
}

De tekst staat nu onzichtbaar buiten beeld maar is niet echt verborgen en dus nog steeds zichtbaar voor een screenreader. Als je de tekst zichtbaar wilt maken kan je position weer op static zetten. Wilt je dit er leuk uit laten zien dan kan je de left, right en top waarden laten animeren.

De bezoeker moet ook kunnen zien dat de kop klikbaar is. Standaard is dit natuurlijk niet zo, een koptekst is niet interactief. Dit heb ik opgelost door onder de kop een rode streep te zetten en naast de kop een pijl naar beneden. Met CSS heb ik de muisaanwijzer verandert in een wijzend handje, je weet wel dat krijg je ook als je met de muis over een link gaat. Wat je ook nog kan is de kop onderlijnen. Als bezoekers een onderlijnde tekst zien dan is het meteen logisch dat een link is.

Voorbeeld CSS voor onderlijnde koptekstbutton {
  text-decoration: underline;
  cursor: pointer;
}

Nu is de kop visueel zichtbaar als een link. Ik kies er voor om van de h2-kop een button te maken. Een link gebruiken we om naar een andere pagina te gaan en een button voor een actie. Een tekst zichtbaar maken is een actie. Wil je hier meer over weten kijk dan bij mijn blog over het gebruik van een link of een button.

Dus ik stop gewoon een button element in een h2 element. De button stijl ik weg met css en dan heb ik dus nog steeds een h2 kop en ik heb deze met gebruik van een button klikbaar gemaakt. En dit mag gewoon. Als je de HTML van de site valideert dan gaat dat goed. Een ander groot voordeel van het gebruik van een button is dat deze toegankelijk is met een toetsenbord en ook focus krijgt als ik hier naar toe tab met mijn toetsenbord.

Waarom niet gewoon de h2 klikbaar maken met Javascript? Dat kan ook maar dan moet je ook keyboardfocus aan de h2 toevoegen, dat kan wel maar is meer werk dan gewoon een button element toevoegen. Meer weten over een element focus geven met Javascript? kijk dan bij mijn blog focus met JS

Blijft er wel 1 nadeel! Als de Javascript niet werkt dan is blijft de h2-kop klikbaar, we hebben immers de button in de h2 zitten, alleen gebeurt er nu niks als de bezoeker op de tekst klik. Een gebruiker kan zich dan afvragen waarom de kop wel klikbaar, lijkt, te zijn maar er niks gebeurt. Ik los dat zelf op door de button in de h2 te zetten met Javascript. Als de Javascript nu niet werkt dan is de kop een normale h2 kop en de tekst is zichtbaar.Gepubliceerd op 31 maart 2020 door Renee de Kruijf