In WordPress staat bij elke afbeelding een veld met de naam “Alternatieve tekst”. Bij de meeste sites is dat veld leeg, en bij de sites waar het is ingevuld staat er vaak iets als “loodgieter Utrecht badkamer renovatie offerte”. Beide zijn een gemiste kans, en de tweede is bovendien schadelijk.
Een alt tekst bij een afbeelding heeft een concreet doel: hij vervangt het beeld voor iemand die het niet ziet. Dat is een bezoeker met een schermlezer, iemand met een trage verbinding waarbij de foto niet laadt, en, als bijvangst, een zoekmachine die niet kan kijken. In dit artikel leest u hoe u ze schrijft zonder er een middag aan kwijt te zijn.
Waar de alt tekst bij een afbeelding voor dient
Stelt u zich voor dat iemand uw pagina hardop voorgelezen krijgt. Bij elke afbeelding leest de software de alternatieve tekst voor. Staat daar niets, dan zegt hij “afbeelding” of leest hij de bestandsnaam op, wat neerkomt op “I M G onderstreep twee nul twee vier nul negen…” Dat is het geluid van een pagina die niet is nagelopen.
De vraag die u bij elke afbeelding stelt is dus simpel: als deze foto er niet was, welke zin zou ik hier neerzetten zodat de lezer niets mist? Dat is de alt-tekst. Niet meer, niet minder.
Voor uw vindbaarheid telt hij ook mee, maar minder zwaar dan veel mensen denken. Een goed geschreven, beschrijvende alt-tekst helpt uw afbeeldingen gevonden te worden in de afbeeldingenzoekresultaten. Een alt-tekst volgestopt met zoektermen doet het tegenovergestelde en valt bovendien op als kunstmatig.
Hoe u er een schrijft
- Beschrijf wat er te zien is, in een gewone zin van vijf tot vijftien woorden. “Monteur controleert de leidingen onder een keukenaanrecht” is prima.
- Beschrijf wat relevant is voor de context. Dezelfde foto krijgt op een pagina over uw team een andere alt-tekst dan op een pagina over lekkage. In het eerste geval is de persoon belangrijk, in het tweede het werk.
- Begin niet met “afbeelding van” of “foto van”. De software vertelt de gebruiker al dat het een afbeelding is; u herhaalt dat dan.
- Eindig niet met een punt. Kleinigheid, maar bij sommige schermlezers geeft dat een onnodige pauze.
- Gebruik geen bestandsnaam als tekst. WordPress vult soms automatisch de bestandsnaam in; die haalt u weg.
- Herhaal het bijschrift niet. Staat er al een zichtbaar bijschrift onder de foto, dan hoort iemand met een schermlezer die tekst twee keer. Kies dan voor een korte alt-tekst of laat hem leeg.
Wanneer u het veld juist leeg laat
Dit is het deel dat bijna nooit wordt verteld, en het scheelt u veel werk. Niet elke afbeelding hoeft een alt-tekst.
- Decoratieve beelden. Een achtergrondvlak, een lijntje, een sfeerfoto die niets toevoegt aan de informatie. Laat het veld leeg; de schermlezer slaat de afbeelding dan over. Dat is beter dan hem te vullen met iets nietszeggends.
- Afbeeldingen die direct naast dezelfde tekst staan. Staat er onder een logo al de naam van het merk, dan hoeft die naam er niet nog eens in.
- Pictogrammen bij een tekstlabel. Een envelopje naast het woord “E-mail” hoeft niet beschreven te worden.
Belangrijk verschil: leeg laten is iets anders dan het veld negeren. In WordPress komt dat op hetzelfde neer, maar de gedachte erachter niet. U besluit bewust dat deze afbeelding geen informatie draagt, in plaats van dat u er niet aan gedacht heeft.
Bijzondere gevallen
Een afbeelding met tekst erin, zoals een aanbieding of een openingstijdenkaartje: zet de volledige tekst in de alt-tekst. Beter nog: haal de tekst uit het beeld en zet hem als gewone tekst op de pagina, want dan is hij ook doorzoekbaar en leesbaar bij inzoomen.
Een grafiek of schema: een korte alt-tekst met de conclusie, plus de onderliggende gegevens in tekst op de pagina zelf. “Omzetverdeling per kwartaal” vertelt iemand niets; de cijfers wel.
Een afbeelding die een link is, bijvoorbeeld een knop of een logo dat naar de homepage wijst: beschrijf de bestemming, niet het plaatje. “Naar de homepage” is bruikbaarder dan “logo in blauw en grijs”.
Productfoto’s in een webshop: houd het feitelijk en onderscheidend. Bij vijf foto’s van hetzelfde product is “vooraanzicht”, “achterkant” en “detail van de sluiting” nuttiger dan vijf keer de productnaam.
In WordPress praktisch invullen
Het veld staat op twee plekken. Bij het uploaden van een afbeelding in een bericht verschijnt het in de rechterzijbalk zodra u de afbeelding aanklikt. En in de mediabibliotheek staat het bij elk bestand onder Alternatieve tekst.
Wilt u bestaande afbeeldingen bijwerken, dan is dat de plek om te beginnen. Zet de mediabibliotheek in lijstweergave, en loop de afbeeldingen langs die daadwerkelijk op belangrijke pagina’s staan. Alles in één keer doen is bij een site met achthonderd afbeeldingen geen realistisch plan; begin bij uw homepage, uw dienstenpagina’s en uw best bezochte artikelen.
Vult u het veld in, doe dat dan meteen goed bij de bestandsnaam en de afmetingen. Een afbeelding met een fatsoenlijke naam en een verstandig formaat scheelt ook laadtijd; wat dat concreet oplevert leest u in het artikel over het optimaliseren van afbeeldingen.
Het bredere plaatje
Alt-teksten zijn het zichtbaarste onderdeel van toegankelijkheid, maar ze zijn er één van meerdere. Kleurcontrast, leesbare koppen, formulieren met echte labels en een site die met alleen het toetsenbord te bedienen is, wegen minstens zo zwaar. Voor publieke instellingen gelden hier inmiddels concrete verplichtingen; voor gewone bedrijven is het vooralsnog vooral fatsoen en een breder bereik. Een overzicht van de basis staat in de uitleg over toegankelijkheid van websites.
Wie dit soort werk graag structureel wil laten meelopen in plaats van het jaarlijks op te pakken, kan het opnemen in de afspraken rond het bijhouden van de inhoud van uw site. Bij WebMaintor komt het langs bij nieuwe pagina’s die wij plaatsen: een lege alt-tekst is dan een bewuste keuze, geen omissie.
Concrete volgende stap: open uw homepage, klik met de rechtermuisknop op een afbeelding en kies voor het bekijken van de paginacode. Zoek naar alt= en kijk wat daar staat. Bij de meeste sites is dat een leerzaam en licht ontnuchterend moment.
