Kennisbank & Ticketsysteem

Het alt-attribuut (alt) is een belangrijk onderdeel van je webshop. Het zorgt ervoor dat afbeeldingen correct worden geïnterpreteerd door zoekmachines en toegankelijk blijven voor bezoekers met een visuele beperking. In dit artikel leggen we uit wanneer en hoe je het alt-attribuut correct gebruikt.

Waarom is het alt-attribuut belangrijk?

1. Toegankelijkheid: Screenreaders gebruiken het alt-attribuut om de inhoud van een afbeelding voor te lezen.

2. SEO (zoekmachine-optimalisatie): Zoekmachines zoals Google gebruiken de alt-tekst om de afbeelding beter te begrijpen en te indexeren.

3. Fallback bij laadproblemen: Als een afbeelding niet laadt, wordt de alt-tekst weergegeven.

Wanneer gebruik je een alt-attribuut?

Je moet alt altijd toevoegen, maar de inhoud ervan hangt af van het type afbeelding:

1. Informatieve afbeeldingen (nodig)

• Voor productafbeeldingen, banners met tekst, en iconen die een functie hebben (zoals betaalmethodelogo’s).

• Voorbeeld:

  <img src="paypal-logo.png" alt="Betalen met PayPal">

2. Decoratieve afbeeldingen (leeg laten)

• Voor afbeeldingen die puur voor design zijn, zoals achtergrondafbeeldingen of versieringen.

• Gebruik een lege alt om te voorkomen dat screenreaders de afbeelding voorlezen.

• Voorbeeld:

  <img src="decoratie.png" alt="">

3. Functie-gebaseerde afbeeldingen (nodig)

• Voor knoppen of iconen die een actie vertegenwoordigen (zoals een WhatsApp-chatknop).

• Voorbeeld:

  <img src="whatsapp-icon.png" alt="Chat met ons op WhatsApp">

Veelgemaakte fouten

❌ Alt-tekst weglaten → Screenreaders lezen dan de bestandsnaam voor, wat verwarrend is.
❌ Alt-tekst te algemeen maken → Zoals "afbeelding" of "foto", dit voegt niets toe.
❌ Decoratieve afbeeldingen voorzien van tekst → Dit maakt de webshop onnodig druk voor screenreaders.

Samenvatting

Met deze richtlijnen zorg je ervoor dat je webshop toegankelijker is, beter scoort in zoekmachines en een betere gebruikerservaring biedt!