Ga naar hoofdinhoud

Introductie richtlijnen NL Design System voor afbeeldingen

Het NL Design System geeft richtlijnen voor afbeeldingen. Hierbij zijn we uitgegaan van toegankelijkheid, gebruikersvriendelijkheid en consistentie, ondersteund door gebruikersonderzoek.

Deze richtlijnen staan gesorteerd op onderwerp.

Alternatieve teksten bij afbeeldingen

Niet iedereen kan afbeeldingen zien. Daarom is het belangrijk om alternatieve teksten toe te voegen aan de afbeeldingen op jouw website. Zo heeft iedereen, met of zonder beperking, toegang tot dezelfde informatie.

Wie gebruiken tekstalternatieven?

Alternatieve teksten helpen bezoekers die geen of moeilijk afbeeldingen kunnen zien. Denk hierbij aan blinde en slechtziende bezoekers. Zij gebruiken hulpsoftware, zoals een schermlezer of een brailleregel, om toch de inhoud van de content te kunnen lezen.

Mensen met cognitieve beperkingen, zoals autisme of niet-aangeboren hersenletsel, gebruiken soms ook een schermlezer — bijvoorbeeld wanneer lezen moeite kost, of wanneer luisteren helpt om informatie beter te begrijpen.

Ook bezoekers met traag internet of oude apparaten hebben baat bij alternatieve teksten. Als een afbeelding niet laadt, zien zij de alternatieve tekst en begrijpen ze alsnog wat het doel van de afbeelding is.

Daarnaast dragen goede alternatieve teksten bij aan de zoekmachineoptimalisatie van je website. Zoekmachines zoals Google en DuckDuckGo kunnen afbeeldingen (nog) niet 'zien', maar alternatieve teksten wel lezen. Door relevante beschrijvingen toe te voegen, help je zoekmachines de informatie op je pagina beter te interpreteren.

Toegankelijkheidsrichtlijnen

Om websites bruikbaar te maken voor mensen met een beperking, gebruiken we de WCAG-richtlijnen. WCAG staat voor Web Content Accessibility Guidelines. Dit is een set van succescriteria waaraan je kunt toetsen of je website voldoet aan de minimale toegankelijkheidseisen. De WCAG heeft 2 succescriteria die specifiek te maken hebben met afbeeldingen.

1.1.1 Niet-tekstuele content

Succescriterium 1.1.1 is het allereerste succescriterium in de WCAG. Het legt uit dat 'niet-tekstuele content' een gelijkwaardig tekstalternatief moet hebben.

Niet-tekstuele content is een heel brede categorie. Denk aan foto's, grafieken, en infographics. Video en audio zijn ook niet-tekstuele content. Deze richtlijnen richten zich alleen op afbeeldingen.

1.4.5 Afbeeldingen van tekst

Succescriterium 1.45 gaat over afbeeldingen van tekst. Dit zijn afbeeldingen waar tekst in staat. Als je tekst in een afbeelding wilt gebruiken, moet je ook met een aantal dingen rekening houden.

Soorten afbeeldingen

Je weet nu dat je aan afbeeldingen een alternatieve tekst mee kunt geven. Maar wat moet er dan in een alternatieve tekst staan? En is een alternatieve tekst wel áltijd nodig? Dat hangt af van welke functie de afbeelding heeft. Per afbeeldingssoort vind je hier richtlijnen.

Bronnen en meer informatie

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.