Afbeeldingen en alt-teksten check voor snellere en toegankelijkere pagina's

Een alt-attribuut hoort op elk img-element in de HTML te staan. De waarde is een korte tekst die beschrijft wat de afbeelding overbrengt in de context van de pagina. Een schermlezer leest die tekst voor, een zoekmachine indexeert hem, en de browser toont hem als de afbeelding niet laadt. De vuistregel is: beschrijf de functie en betekenis van de afbeelding op die plek, niet elk detail. Een foto van een monteur bij een ketel hoeft niet 'man met blauwe overall en moersleutel bij een witte cv-ketel' te zijn; 'monteur installeert een cv-ketel' is vaak genoeg.

Het belangrijkste onderscheid is informatief versus decoratief. Een informatieve afbeelding draagt inhoud over (een grafiek, een productfoto, een diagram, tekst in beeld) en heeft een betekenisvolle alt-tekst nodig. Een puur decoratieve afbeelding (een sfeerlijn, een achtergrondvorm, een scheidingselementje) voegt geen informatie toe en hoort juist een leeg alt-attribuut te krijgen: alt="". Dat lege attribuut is geen fout maar een bewuste keuze: het vertelt de schermlezer dat hij de afbeelding mag overslaan. Het attribuut helemaal weglaten is wel een probleem, want dan gaat de schermlezer vaak terugvallen op de bestandsnaam.

Het gaat geregeld mis op een paar vaste plekken. Bestandsnamen als alt-tekst ('IMG_1234.jpg') zeggen niets. Generieke woorden als 'afbeelding' of 'foto' ook niet, want dat weet de gebruiker al. Tekst die in een afbeelding zit (bijvoorbeeld een prijslijst of een poster als plaatje) is onzichtbaar voor zoekmachines en schermlezers als die tekst niet ook in de alt-tekst of als gewone tekst op de pagina staat. En afbeeldingen die als knop of link werken, zoals een logo dat naar de homepage linkt of een winkelwagen-icoon, moeten een alt-tekst hebben die het doel van de link beschrijft ('naar de homepage', 'winkelwagen openen'), niet alleen het uiterlijk.

Let ook op afbeeldingen die via CSS als achtergrond worden geladen of via moderne technieken (picture-elementen, lazy loading, icon fonts, inline SVG). Een CSS-achtergrond heeft geen alt-attribuut; als daar inhoud in zit, moet die ergens anders in tekst beschikbaar zijn. Bij SVG gelden eigen regels (een title- of aria-label-aanpak). Een veelgemaakte fout is dat afbeeldingen pas via JavaScript worden ingeladen zonder dat het alt-attribuut meekomt. Een goede pagina heeft dus niet alleen alt-teksten, maar zorgt dat ze ook echt aanwezig zijn in de uiteindelijke HTML die bezoeker en schermlezer te zien krijgen.

CheckBorg detecteert en signaleert deze situaties: ontbrekende alt-attributen, lege alt waar dat (on)terecht is, bestandsnamen en generieke teksten, en afbeeldingen in links zonder bruikbaar alternatief. We laten zien waar het misgaat en helpen prioriteren wat het zwaarst weegt. Het daadwerkelijk aanpassen gebeurt in je CMS, thema of broncode, want daar staan de afbeeldingen en hun attributen. Voor de vraag of jouw site aan toegankelijkheidswetgeving voldoet, geven we geen juridisch eindoordeel; raadpleeg daarvoor een toegankelijkheidsspecialist.