Basisinstellingen

Tekst

Kernpunt:
Stel de tekst in die op de knop wordt getoond.

Wat dit verandert:
De formulering heeft directe invloed op begrip en klikratio.

Insteltip:
Houd de tekst kort (ongeveer 2-5 woorden) en gebruik bij voorkeur een werkwoord.

Instellingen

• Tekst: knoplabel. Standaardwaarde: BUTTON STYLE.

Je kunt voor hover ook een aparte tekst instellen in het paneel Tekstanimatie.

Tag

Kan enigszins afwijken van de daadwerkelijke interface.

Kernpunt:
Bepaalt de HTML-tag en bijbehorende attributen.

Wat dit verandert:
Heeft invloed op semantiek, toegankelijkheid, SEO en meting.

Insteltip:
Gebruik a (Link) voor navigatie en button (Knop) voor acties.

Instellingen

• HTML-tag: kies Link (<a>) of Knop (<button>). Standaard: Link.

Voor interne navigatie is Link meestal correct. Voor acties (formulier/JS) is Knop semantisch juist.

Bij keuze van Link

Kan enigszins afwijken van de daadwerkelijke interface.

Kan enigszins afwijken van de daadwerkelijke interface.

• Link-URL: doel-URL.
• Link-doel: zelfde tab (_self) of nieuw tabblad (_blank).
• rel-attribuut: bijvoorbeeld noopener, noreferrer, nofollow.

Bij target="_blank" wordt rel="noopener" automatisch toegevoegd.

• Linktitel: aanvullende beschrijving voor semantiek en toegankelijkheid.

Bij keuze van Knop

Kan enigszins afwijken van de daadwerkelijke interface.

• Knoptype: button / submit / reset.

submit verstuurt een formulier, reset wist invoer. Standaard is button.

Toegankelijkheid:
Als de Link-URL leeg is of # is, wordt automatisch role="button" toegevoegd.

Hover-tekst fallback:
Als geen hover-tekst is ingesteld, wordt de normale tekst ook bij hover gebruikt.

Algemene opties

Kan enigszins afwijken van de daadwerkelijke interface.

• aria-label: label voor screenreaders.
• Tracking ID: identifier voor meting (bijv. GTM/analytics).
• Knoplocatie: positielabel voor beheer/AB-testen.
• ID: uniek element-ID voor CSS/JS.

Tracking ID en Knoplocatie worden als data-* attributen uitgevoerd. ID moet uniek zijn binnen de pagina.