Alttekst schrijven vanuit de functie van een afbeelding

Alttekst is het tekstalternatief van een afbeelding in de HTML. Een goede alttekst vervangt de betekenis of functie die de afbeelding in haar context heeft. U schrijft dus geen willekeurige beeldbeschrijving en geen rij zoekwoorden. Voor een louter decoratieve afbeelding is doorgaans een leeg alt-attribuut passend.

Bepaal eerst wat iemand zou missen als het beeld niet beschikbaar is. Dat antwoord stuurt de tekst. Dezelfde foto kan op een productpagina informatief zijn en in een sfeerbanner decoratief. Er bestaat daarom geen universele alttekst die bij ieder gebruik van hetzelfde bestand past.

Begin met een functiekeuze

De W3C WAI alt-beslisboom helpt onderscheid maken tussen decoratieve, informatieve, functionele en complexere afbeeldingen. Beoordeel altijd de combinatie met omliggende tekst. Een naastgelegen zin kan dezelfde informatie al geven, waardoor herhaling onnodig wordt.

Stel achtereenvolgens: draagt het beeld informatie over, voert het een handeling uit en is de betekenis elders volledig beschikbaar? Noteer bij twijfel waarom u een keuze maakt. Die korte onderbouwing is bruikbaarder dan de regel “iedere afbeelding krijgt een beschrijving”. Een leeg alt-attribuut is een bewuste technische keuze; het alt-attribuut helemaal vergeten is niet hetzelfde.

Beschrijf relevante informatie, geen beeldinventaris

Voor een informatieve foto benoemt u wat nodig is om de uitleg te begrijpen. Bij een handleiding kan “Het borgpennetje zit door het bovenste gat” bruikbaarder zijn dan “Hand naast metalen onderdelen”. De betekenis komt uit de taak die de afbeelding ondersteunt.

Vermijd eigenschappen die voor de uitleg geen rol spelen. Noem geen identiteit, diagnose of emotie die u niet kunt vaststellen. Schrijf ook niet automatisch “afbeelding van” vóór iedere tekst; de ondersteunende techniek kan het beeldtype al aankondigen. Google's afbeeldingsrichtlijnen raden beschrijvende, relevante alternatieve tekst aan en waarschuwen voor overmatig zoekwoordgebruik.

Vier fictieve situaties met verschillende antwoorden

Deze voorbeelden zijn bedacht en vormen geen uitgevoerde toegankelijkheidstest.

• Productdetail: een foto toont het aansluitpunt dat compatibiliteit bepaalt. De alttekst benoemt het zichtbare type aansluiting, mits dat betrouwbaar is vastgesteld.
• Decoratieve sfeerfoto: een abstracte werktafel voegt geen informatie toe aan de naastgelegen uitleg. Een leeg alt-attribuut voorkomt onnodige beschrijving.
• Klikbaar logo: het beeld is de enige inhoud van een link naar de homepage. Het tekstalternatief maakt de bestemming begrijpelijk.
• Stappenillustratie: het beeld toont drie handelingen die volledig in de naastgelegen genummerde instructie staan. De uitwerking voorkomt dat dezelfde lange instructie tweemaal wordt voorgelezen.

De keuze verschilt door functie en context, ook als alle vier bestanden in dezelfde mediabibliotheek staan.

Benoem bij een afbeelding als knop de handeling

Een afbeelding binnen een link of knop heeft een functionele taak. Als er geen andere toegankelijke naam bestaat, moet het alternatief duidelijk maken wat activeren doet. “Vergroot productfoto” is dan nuttiger dan alleen “blauw kopje”, voor zover dat werkelijk de handeling is.

Voorkom tegenstrijdigheid met een zichtbare knoptekst of ander naamgevend attribuut. Een gebruiker die spraakbediening gebruikt, moet de zichtbare bediening kunnen herkennen. Laat uw ontwikkelaar de volledige toegankelijke naam controleren wanneer afbeeldingen en tekst gecombineerd zijn. De W3C-uitleg over functionele afbeeldingen werkt dit verschil uit. Een alttekst alleen kan een verkeerd opgebouwde bediening niet altijd herstellen.

Geef complexe informatie ook als gewone tekst

Een grafiek, kaart of technisch schema kan meer informatie bevatten dan in een korte alttekst past. Benoem het doel en geef de noodzakelijke uitwerking op de pagina of via een duidelijke, bereikbare beschrijving. De exacte aanpak hangt af van de informatie en de taak.

Een grafiek met een ontwikkeling kan bijvoorbeeld een korte conclusie, relevante waarden en beperkingen in tekst krijgen. Verzin daarbij geen patroon dat de bron niet ondersteunt. Een afbeelding van tekst moet dezelfde essentiële informatie beschikbaar maken, maar gewone HTML-tekst is vaak beter aanpasbaar. Vermijd dat belangrijke voorwaarden alleen in pixels op een banner staan.

Bewerk alttekst op de gebruiksplaats

Een mediabibliotheek met één standaardbeschrijving kan een begin zijn, maar niet het eindpunt. Controleer bij plaatsing of de foto op deze pagina dezelfde functie heeft. Een maatdetail vraagt een andere nadruk dan een algemeen overzichtsbeeld van hetzelfde product.

Koppel dit aan afbeeldingen optimaliseren en de inhoudelijke dienstpagina. Bij foto's van echte projecten controleert u ook toestemming en juistheid. Bij een gegenereerd sfeerbeeld verzint u geen echte locatie of klant als alttekst. De herkomstmelding kan zichtbaar op de pagina nodig zijn; alttekst is geen verborgen plek om misleidende beeldcontext te corrigeren.

Controleer met meerdere leeswijzen

Lees de tekst zonder afbeeldingen en beoordeel of de taak nog uitvoerbaar is. Bekijk vervolgens hoe de afbeeldingen samen met omliggende tekst worden aangekondigd in ondersteunende technologie. Controleer vooral links, knoppen en herhalende kaarten. Een automatische scan kan een ontbrekend attribuut vinden, maar beoordeelt niet betrouwbaar of de beschrijving inhoudelijk klopt.

Controleer ook met toetsenbord en vergroting of bediening en bijschriften bruikbaar blijven. Neem dit mee in de controle na publicatie. Een enkel geslaagd voorbeeld bewijst geen volledige toegankelijkheid van uw website. Bewaar daarom bevindingen per paginatype en herstel de oorzaak in herbruikbare componenten.

Maak van alttekst een redactionele keuze

Voeg in uw beeldbriefing een veld toe voor functie, noodzakelijke informatie en eventuele langere uitleg. De fotograaf of ontwerper kan daarmee rekening houden bij het maken van het beeld. Uw fotografievoorbereiding wordt zo bruikbaarder dan een overdracht met alleen bestandsnamen.

Laat bij inhoudelijke wijzigingen ook de alttekst opnieuw bekijken. Een foto kan vervangen zijn terwijl een oude beschrijving blijft staan. Controleer evenzeer of de linkfunctie veranderde. Goede alttekst ontstaat niet door overal hetzelfde aantal tekens af te dwingen, maar door relevante betekenis zorgvuldig te bewaren voor verschillende manieren van lezen.

Laat bij een inhoudelijke beoordeling iemand uitleggen welke informatie het beeld aan de taak toevoegt. Kan niemand dat benoemen, onderzoek dan of het decoratief is of beter kan verdwijnen. Voeg niet alsnog een lange beschrijving toe om een lege functie te verhullen.

Bronnen en verder lezen

W3C WAI publiceert de alt-beslisboom en uitleg over functionele afbeeldingen. Google Search Central geeft aanvullende afbeeldingsrichtlijnen. De voorbeelden zijn fictieve schrijfoefeningen en geen conformiteitsverklaring.