Normaal gesproken worden de functies van Tolkie Leeshulp aangeroepen via knoppen van Tolkie. Denk aan knoppen als Lees voor, Uitleg woorden, Simpele tekst en het zwevende vraagteken rechts onderin. Maar je kunt ook zelf knoppen op je website plaatsen die de functies van Tolkie activeren. In dit kennisbank-artikel lees je hoe dat werkt.
Om eigen knoppen te gebruiken, volg je de volgende stappen.
Voeg een ‘domme’ knop toe aan de website. Deze knop doet in eerste instantie nog niets. Je kunt de knop zelf plaatsen of door je webbouwer laten maken. Verderop deze pagina staat voorbeeldcode voor de verschillende knoppen
Voeg nu een class toe aan de knop. De class is per functie verschillend. Hieronder zie je welke class bij welke functie hoort:
Vertalen: tolkie-translate-button
Lees voor: tolkie-tts-button
Uitleg woorden: tolkie-dictionary-button
Simpele tekst: tolkie-summary-button
Grote letters: tolkie-fontsize-button
Menu/alle functies: tolkie-tool-button
Belangrijk:
Zodra ons script op de website wordt geladen, kijkt het script of het 1 van deze classes tegenkomt op de pagina. Als het script een class vindt, voegt het een klik-functionaliteit toe aan de knop met de class. Het script zorgt er ook voor dat de knop met een druk op ‘Enter’ wordt geactiveerd, zodat de knop ook meteen toegankelijk is voor gebruikers van een toetsenbord
Klikt of drukt een gebruiker op de knop? Dan opent de leeshulp op de functie die aan de knop is gekoppeld. Het script geeft de knop dan ook de class ‘active’, zodat via styling kan worden aangegeven dat de functie actief is
Deze oplossing werkt voor meerdere knoppen op een pagina. Zo kun je een vertaalknop toevoegen aan bovenkant van de pagina en nog eentje onderaan, bijvoorbeeld in de footer
Voorbeeld-html voor de verschillende knoppen
Hieronder vind je een aantal voorbeelden van html-code voor de knoppen:
Lees voor
<button class="tolkie-single-button tolkie-tts-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/tts.svg">
Lees voor
</button>
Uitleg woorden
<button class="tolkie-single-button tolkie-dictionary-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/dictionary.svg">
Uitleg woorden
</button>
Simpele tekst
<button class="tolkie-single-button tolkie-summary-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/summary.svg">
Simpele tekst
</button>
Vertalen
<button class="tolkie-single-button tolkie-translate-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/globe-translate.svg">
Vertalen
</button>
Grote letters
<button class="tolkie-single-button tolkie-fontsize-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/font-size.svg">
Grote letters
</button>
'Alle functies' menu
<button class="tolkie-single-button tolkie-tool-button" tabindex="0" type="button">
<img alt="" src="https://cdn.tolkie.nl/assets/question-file.svg">
Leeshulp
</button>