Accessibility 101 - Afbeeldingen

Afbeeldingen en plaatjes. Het web kan niet zonder. Zeker als het productfoto's, foto's van echte mensen (geen stockfoto's!) en afbeeldingen ter illustratie van je verhaal betreft. Hoe werkt het toegankelijk maken van plaatjes precies?

Foto's en afbeeldingen worden door bezoekers belangrijk gevonden. Studies laten zien dat decoratieve plaatjes worden overgeslagen.

Hoe kun je nu afbeeldingen, foto's en plaatjes toegankelijk maken?

Correcte HTML

Als je een foto of andere afbeelding wilt gebruiken, gebruik je het <img>-element om de foto in je webpagina te zetten. Let daarbij wel op de volgende zaken:

• het alt-attribuut is altijd aanwezig (verder op deze pagina meer over alt-tekst)
• geef altijd de hoogte en breedte van de afbeelding op.
• heeft de afbeelding een onderschrift nodig? Stop het <img>-element in een <figure>-element en gebruik het <figcaption>-element.

Alt-tekst, het is een kunst op zich

We zagen net dat het alt-attribuut altijd aanwezig moet zijn. Dit om afbeeldingen toegankelijk te maken voor mensen die hulptechnologie gebruiken. Hoewel het attribuut altijd aanwezig moet zijn, hoeft het niet altijd ingevuld te worden.

Wanneer wel en wanneer geen alt-tekst?

Als een afbeelding decoratief is, hoeft het alt-attribuut niet ingevuld te worden. Is een plaatje niet decoratie - met andere woorden, het is belangrijk voor de test - dan moet het alt-attribuut wel ingevuld worden.

Maar wanneer is iets decoratief? Als de afbeelding weggelaten kan worden en dat geen verdere gevolgen heeft voor de inhoud van de pagina.

Wat is een goede alt-tekst?

Een goede alt-tekst beschrijft altijd wat er op de foto te zien. Een alt-tekst van "koningin Mathilde" bij een foto van koningin Mathilde is niet voldoende. Wat is de uitdrukking van haar gezicht? Wat is de kleur van haar kleren? Beschrijf wat je ziet.

Responsive images: plaatjes in de juiste verhouding op elk scherm

Websites kunnen tegenwoordig op diverse apparaten en schermgroottes weergegeven worden. Het is dus wel handig als websites zich kunnen aanpassen aan de schermgrootte. Dat kan met responsive design en wordt geregeld met CSS. Maar ook afbeeldingen kunnen responsive gemaakt worden, zodat die zich ook aanpassen aan de grootte van het scherm. Ook dit gebeurt met CSS.