Alt-tekst voorbeelden: wat schrijft u bij elk soort afbeelding
Alt-tekst voorbeelden
Alt-tekst voorbeelden: goed en slecht, per soort afbeelding | We.Inc
Wat alt-tekst betekent, goede en slechte voorbeelden voor logo's, producten, iconen, grafieken en decoratieve afbeeldingen, de W3C-stappen en een korte oefenquiz.
Alt-tekst is de korte geschreven vervanging voor een afbeelding, ingesteld in het alt-attribuut van een img-tag. Schermlezers lezen hem voor en browsers tonen hem wanneer de afbeelding niet laadt. Goede alt-tekst zegt wat de afbeelding op die plek in de pagina betekent; decoratieve afbeeldingen krijgen een lege alt.
Snelle voorbeelden per soort afbeelding
Afbeelding
Zwakke alt
Betere alt
Logo dat naar de homepage linkt
Smith Roofing home
Productfoto
Bruine leren draagtas met messing gesp
Knop met zoekicoon
vergrootglas
Zoeken
Decoratieve krul als scheiding
decoratieve krul
(leeg: alt="")
Foto van het team
Onze vier dakdekkers buiten bij de werkplaatsbus
Verkoopgrafiek
Verkoop per maand, details in de tabel hieronder
De juiste woorden hangen af van waarom de afbeelding er staat, niet van hoe hij eruitziet. Een vergrootglas in een knop betekent Zoeken; dezelfde vorm als paginadecoratie betekent helemaal niets. Probeer de oefenvragen en neem de patronen daarna over voor uw eigen winkel of site.
Lees de situatie op elke oefenkaart: wat de afbeelding toont en waar hij op de pagina staat.
Kies uit de drie opties de alt-tekst die u zelf zou schrijven.
De kaart vertelt u of die keuze werkt en welke stap van de W3C-beslisboom van toepassing is.
Gebruik de tabel met voorbeelden hieronder als naslag wanneer u afbeeldingen aan uw eigen pagina's toevoegt.
Laat woorden als afbeelding van of foto van weg. Schermlezers melden al dat het om een afbeelding gaat.
Noem bij productfoto's de details waar een klant naar zou vragen: kleur, materiaal, wat deze variant anders maakt.
Staat dezelfde informatie al als tekst direct naast de afbeelding, dan voorkomt een lege alt dat het twee keer wordt gezegd.
Prop nooit zoekwoorden in de alt. Google waarschuwt dat alt-attributen vol zoekwoorden ertoe kunnen leiden dat uw site als spam wordt gezien.
Veelgestelde vragen
Wat betekent alt bij tekst?
Alt is de afkorting van alternative, alternatief. Alt-tekst is de alternatieve tekst voor een afbeelding: de woorden die een schermlezer uitspreekt en wat de browser toont in plaats van een afbeelding die niet kan laden. Hij staat in het alt-attribuut van het img-element.
Moet elke afbeelding alt-tekst hebben?
Elke img moet een alt-attribuut hebben, maar niet elke afbeelding heeft woorden nodig. MDN legt uit dat een lege alt een afbeelding markeert als geen essentieel onderdeel van de inhoud. De alt helemaal weglaten is erger: sommige schermlezers lezen dan de bestandsnaam voor.
Hoe lang moet alt-tekst zijn?
Bij de meeste afbeeldingen kort genoeg om in één adem uit te spreken. De W3C-boom vraagt om een korte beschrijving van eenvoudige foto's. Grafieken en diagrammen zijn de uitzondering: geef een kort label in de alt en zet de volledige informatie als tekst op de pagina.
Helpt alt-tekst voor SEO?
Ja. Volgens de afbeeldingengids van Google gebruikt Google alt-tekst samen met computervisie en de pagina-inhoud om afbeeldingen te begrijpen. Het eigen voorbeeld verkiest Dalmatian puppy playing fetch boven alleen puppy, en waarschuwt tegen lijsten met zoekwoorden.
Welke alt-tekst hoort bij een logo?
Als het logo naar uw homepage linkt, moet de alt beschrijven waar de link heen gaat, bijvoorbeeld uw bedrijfsnaam plus home. Wordt het alleen getoond en staat uw naam er al als tekst naast, dan is een lege alt prima.
De W3C-beslisboom in gewone taal
Eerst: bevat de afbeelding tekst? Staat die tekst ook in de buurt als echte tekst, gebruik dan een lege alt; zo niet, zet de tekst in de alt. Daarna: staat hij in een link of knop? Beschrijf dan waar de link heen gaat of wat de knop doet.
Voegt hij betekenis toe? Geef eenvoudige foto's een korte beschrijving en zet bij grafieken de gegevens elders op de pagina. Is het alleen decoratie? Gebruik een lege alt.
Alt-tekst voor webwinkels
Klanten die een schermlezer gebruiken, vertrouwen op de alt-tekst van productafbeeldingen zoals anderen op inzoomen vertrouwen. Heeft een product meerdere foto's, maak dan elke alt anders: vooraanzicht, detail van de achterzak, gedragen door een model van 170 cm lang.
Meer voorbeelden voor winkel- en bedrijfssites
Alt-tekst voorbeelden voor veelvoorkomende bedrijfsafbeeldingen
Waar de afbeelding staat
Voorbeeld alt-tekst
Waarom
Herofoto van een café-interieur
Zonnige cafétoonbank met verse gebakjes in de vitrine
Schetst de sfeer in een paar woorden
Portretfoto op een Over ons-pagina
Dr. Amira Khan, hoofdtandarts
Naam en functie, niet de haarkleur
Social-icoon dat naar Instagram linkt
Harbour Bakery op Instagram
Beschrijft het doel van de link
Screenshot van een kaart met uw adres ernaast
(leeg: alt="")
Het adres staat al als tekst in de buurt
Voor-en-na-foto van een gerepareerd dak
Dak voor de reparatie, met ontbrekende pannen bij de nok
Zegt wat er tussen de foto's verandert
Certificaatbadge
Gecertificeerd door de regionale vakraad
Zegt wat de badge certificeert
Codevoorbeelden
Drie veelvoorkomende gevallen in HTML
Een gelinkt logo, een productfoto en een decoratieve afbeelding. Let op: de decoratieve heeft nog steeds het alt-attribuut, alleen leeg.
Een grafiek met de gegevens in tekst
De alt noemt de grafiek en verwijst naar de details, die in een bijschrift staan dat elke bezoeker kan lezen.
Oefenen: kies de beste alt-tekst
{n} van {v} goed beantwoord.
Goed.
Niet helemaal. Het beste antwoord is: {v}.
Opnieuw beginnen
Opties voor alt-tekst
Uw logo staat in de header en linkt naar de homepage. Uw bedrijfsnaam staat nergens anders in de header.
Harbour Bakery home
Ons prachtige logo in blauw
Een gelinkte afbeelding heeft alt-tekst nodig die vertelt waar de link heen gaat.
Een dunne golvende lijn scheidt twee secties. Hij voegt geen informatie toe.
golvende lijn
scheidingsafbeelding
Een lege alt (alt="")
Puur decoratieve afbeeldingen krijgen een lege alt, zodat schermlezers ze overslaan.
De hoofdfoto op een productpagina van een mok die in drie kleuren verkrijgbaar is. Dit is de saliegroene.
Saliegroene steengoed mok met een gebogen oor
mok mok koffiemok beste mok cadeau
productfoto
Een korte beschrijving met de details die deze variant onderscheiden. Lijsten met zoekwoorden zijn spam.
Een knop met alleen een winkelwagenicoon opent de winkelwagen.
Icoon van een winkelkarretje
Winkelwagen bekijken
Beschrijf bij een afbeelding in een knop de actie, niet de tekening.
Een bannerafbeelding met de woorden Gratis bezorging dit weekend. Dezelfde woorden staan niet als tekst op de pagina.
Banner
Actiebanner met rode achtergrond
Gratis bezorging dit weekend
Staat tekst alleen in de afbeelding, dan moet de alt die tekst bevatten.