Icoonknoppen

Benodigde stappen

1. Kies het juiste element voor de knop. Zie eventueel HTML-element kiezen.
2. Kies het soort icoon om toe te voegen. Zie Iconen.
   • Zie bij het gebruik van een icoon-lettertype de “met span” voorbeelden.
   • Zie bij het gebruik van een SVG-icoon de “met svg” voorbeelden.
3. Kies de juiste aanpak voor het toevoegen van een icoon aan de knop.
   • Krijgt de knop zowel tekst als een icoon? Zie dan Met tekst.
   • Krijgt de knop alleen een icoon? Zie dan Zonder tekst.
   • Is een subtielere weergave nodig met alléén een icoon zonder het visuele uiterlijk van een knop? Zie dan Icoonknoppen zonder achtergrond.

Met tekst

Aandachtspunten

• Is het icoon decoratief? Verberg het dan voor toegankelijkheids-hulpmiddelen door aria-hidden="true" aan het icoon toe te voegen.
  • Een icoon is decoratief wanneer het dezelfde informatie overbrengt als de tekst van de knop. Bijvoorbeeld: een “Help”-knop met een vraagteken-icoon.
• Is het icoon informatief? Geef het dan in plaats van aria-hidden="true" een aria-label dat dezelfde informatie overbrengt als wat het icoon visueel communiceert.
  • Een icoon is informatief wanneer het visueel extra informatie overbrengt, die niet ook al door de knoptekst overgebracht wordt. Bijvoorbeeld: een knop met de tekst “Verplaats” en een pijl-icoon dat een richting aangeeft.

De onderstaande voorbeelden gaan ervan uit dat het icoon decoratief is.

button met span

Visueel voorbeeld

HTML-voorbeeld

<button>
  <span class="icon icon-on-off" aria-hidden="true"></span>
  Aan- of uitschakelen
</button>

button met svg

Visueel voorbeeld

HTML-voorbeeld

<button>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M7 6a7.75 7.75 0 1 0 10 0" />
    <path d="M12 4l0 8" />
  </svg>
  Aan- of uitschakelen
</button>

Link-knop met span

Visueel voorbeeld

HTML-voorbeeld

<a href="./" class="button">
  <span class="icon icon-user" aria-hidden="true"></span>
  Inloggen
</a>

Link-knop met svg

Visueel voorbeeld

HTML-voorbeeld

<a href="./" class="button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
    <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
  </svg>
  Inloggen
</a>

Zonder tekst

Aandachtspunten

Een icoon op een knop zonder tekst is per definitie informatief. Zorg er daarom altijd voor dat de knop een toegankelijk naam heeft. Dit kan bijvoorbeeld middels een aria-label op het icoon of middels visueel verborgen tekst naast het icoon. Visueel verborgen tekst heeft de voorkeur, omdat die ook als visuele fallback kan dienen voor het icoon wanneer CSS en afbeeldingen niet geladen konden worden.

button met span

Visueel voorbeeld

HTML-voorbeeld

<button>
  <span class="icon icon-on-off" aria-hidden="true"></span>
  <span class="visually-hidden">Aan- of uitschakelen</span>
</button>

button met svg

Visueel voorbeeld

HTML-voorbeeld

<button>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="icon icon-tabler icons-tabler-outline icon-tabler-power"
    aria-hidden="true"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M7 6a7.75 7.75 0 1 0 10 0" />
    <path d="M12 4l0 8" />
  </svg>
  <span class="visually-hidden">Aan- of uitschakelen</span>
</button>

Link-knop met span

Visueel voorbeeld

HTML-voorbeeld

<a href="./" class="button">
  <span class="icon icon-user" aria-hidden="true"></span>
  <span class="visually-hidden">Inloggen</span>
</a>

Link-knop met svg

Visueel voorbeeld

HTML-voorbeeld

<a href="./" class="button">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
    <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
  </svg>
  <span class="visually-hidden">Inloggen</span>
</a>

button met pseudo-content-icoon

Waarschuwing: Het gebruik van pseudo-content direct op de button wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid.

Gebruik bij voorkeur één van de andere opties. Geef anders de knop een aria-label met dezelfde inhoud als de reguliere knop-tekst om te voorkomen dat toegankelijkheids-hulpmiddelen het pseudo-content-icoon als tekst proberen aan te bieden aan de gebruiker.

Visueel voorbeeld

HTML-voorbeeld

<button class="icon icon-on-off" aria-label="Aan- of uitschakelen">Aan- of uitschakelen</button>

Link-knop met pseudo-content-icoon

Waarschuwing: Het gebruik van pseudo-content direct op de link-knop wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid.

Gebruik bij voorkeur één van de andere opties. Geef anders de link een aria-label met dezelfde inhoud als de reguliere knop-tekst om te voorkomen dat toegankelijkheids-hulpmiddelen het pseudo-content-icoon als tekst proberen aan te bieden aan de gebruiker.

Visueel voorbeeld

HTML-voorbeeld

<a href="./" class="button icon icon-on-off" aria-label="Aan- of uitschakelen">
  Aan- of uitschakelen
</a>

Bijbehorende bestanden

Zie voor meer informatie over importeren en instellen van componenten: Componenten gebruiken en styling toevoegen.

Importeer component via npm

CSS-voorbeeld

@use "@minvws/manon/button-base";
@use "@minvws/manon/icon";
@use "@minvws/manon/visually-hidden";
@use "@minvws/manon/button-icon";

Gerelateerde pagina's

• Test- en voorbeelden-pagina