WCAG 1.1.1: Niet-tekstuele inhoud

Wat Deze Regel Betekent

WCAG Succescriterium 1.1.1 Niet-tekstuele content is een niveau A-vereiste onder het principe Waarneembaar. Het stelt dat alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, een tekstalternatief moet hebben dat hetzelfde doel dient. “Niet-tekstuele content” wordt ruim gedefinieerd: het omvat rasterafbeeldingen (JPEG, PNG, GIF, WebP), vectorafbeeldingen (SVG), op afbeeldingen gebaseerde knoppen en formulierinvoer, afbeeldingskaarten, canvas-elementen, audioclips, video, animaties, CAPTCHA’s en decoratieve versieringen.

Een tekstalternatief kan verschillende vormen aannemen, afhankelijk van het type element: een alt-attribuut op een <img>-element, een aria-label of aria-labelledby op een SVG of een element met een rol, een title-element binnen een <object>, of een <figcaption> gekoppeld aan een figure. De belangrijkste eis is dat de alternatieve tekst dezelfde informatie of functie communiceert als de visuele content zelf — het is niet simpelweg een bestandsnaam of een generieke placeholder.

Het criterium definieert verschillende specifieke gevallen die bepalen hoe een adequaat tekstalternatief eruitziet:

• Besturingselementen en invoer: Als de niet-tekstuele content een besturingselement is of gebruikersinvoer accepteert (zoals een afbeeldingsknop of een afbeelding die als link wordt gebruikt), moet het tekstalternatief het doel of de functie beschrijven, niet alleen het uiterlijk.
• Tijdgebaseerde media: Alleen-audio- of alleen-video-content die als zelfstandige presentatie wordt gebruikt, vereist minimaal een beschrijvend label dat het identificeert; volledige transcripties en ondertiteling worden behandeld in latere criteria (1.2.x).
• Toetsen en zintuiglijke ervaringen: Als de content een toets of oefening is die niet in tekst kan worden gepresenteerd zonder het doel te ondermijnen (zoals een visuele puzzel), hoeft het tekstalternatief alleen de niet-tekstuele content te identificeren en te beschrijven.
• CAPTCHA’s: Tekstalternatieven moeten het doel van de CAPTCHA beschrijven, en er moet een alternatieve vorm van CAPTCHA worden aangeboden die een andere zintuiglijke modaliteit gebruikt.
• Decoratie, opmaak en onzichtbare content: Als een afbeelding puur decoratief is, wordt gebruikt voor witruimte, of niet aan gebruikers wordt gepresenteerd, moet deze zo worden geïmplementeerd dat hij kan worden genegeerd door ondersteunende technologie — doorgaans via een leeg alt=""-attribuut of role="presentation".

Een pass wordt behaald wanneer elk betekenisvol niet-tekstueel element óf een programmatisch tekstalternatief blootlegt dat zijn doel gelijkwaardig overbrengt, óf expliciet als decoratief is gemarkeerd zodat ondersteunende technologieën het kunnen overslaan. Een fail treedt op wanneer een afbeelding helemaal geen alt-attribuut heeft, wanneer de alt-waarde de bestandsnaam is (bijv. alt="img_header_logo_v2.png"), wanneer een SVG die als betekenisvolle content wordt gebruikt geen <title>-element en geen toegankelijk label heeft, of wanneer een decoratieve afbeelding ten onrechte beschrijvende alt-tekst heeft die ruis toevoegt voor schermlezers.

Waarom Het Belangrijk Is

Volgens de Wereldgezondheidsorganisatie hebben wereldwijd ongeveer 2,2 miljard mensen een vorm van visuele beperking of blindheid. Schermlezergebruikers — die vertrouwen op gesynthetiseerde spraak of brailleleesregels om digitale content te consumeren — zijn volledig afhankelijk van tekstalternatieven om afbeeldingen, pictogrammen, grafieken en grafische besturingselementen te begrijpen. Zonder accurate alt-tekst wordt een productpagina op een e-commercesite gereduceerd tot een lijst met prijzen zonder visuele context; de met logo’s gevulde navigatie van een bank wordt een rij niet-gelabelde knoppen; een symptoomcheckerdiagram van een ziekenhuis is onzichtbaar voor de gebruiker die zelf een eerste inschatting probeert te maken.

Neem een concreet scenario: een gebruiker die blind is bezoekt een Turkse e-commerceplatform om een jas te kopen. De productcarrousel bevat zes afbeeldingen die verschillende hoeken en kleurvarianten van de jas tonen. Als geen van die afbeeldingen betekenisvolle alt-tekst heeft, kondigt de schermlezer van de gebruiker alleen “afbeelding, afbeelding, afbeelding” aan — zes keer. De gebruiker kan niet bepalen welke variant marineblauw is en welke zwart, kan niet begrijpen welke afbeelding de achterzak toont, en kan de aankoop volledig afbreken. Een ziende collega met dezelfde productlink rondt de aankoop in minder dan twee minuten af. Deze kloof is zowel een toegankelijkheidsfout als een zakelijk verlies.

Naast blindheid komt dit criterium ook ten goede aan gebruikers met cognitieve beperkingen die tekst-naar-spraak-hulpmiddelen gebruiken ter ondersteuning van het lezen, gebruikers met motorische beperkingen die met toetsenbord en stem navigeren en duidelijke labels nodig hebben op interactieve besturingselementen, en gebruikers met een lage bandbreedte voor wie afbeeldingen mogelijk niet laden — in die gevallen fungeert de alt-tekst als functionele fallback. Daarnaast verbetert goed geschreven alt-tekst de indexering door zoekmachines, omdat crawlers alt-attributen van afbeeldingen behandelen als relevante tekstuele signalen, wat direct bijdraagt aan SEO-resultaten.

Gerelateerde Axe-core Regels

De axe-core toegankelijkheidsengine handhaaft WCAG 1.1.1 via zeven afzonderlijke geautomatiseerde regels. Begrijpen wat elke regel controleert — en waar de grenzen liggen — is essentieel voor een volledige teststrategie.

• image-alt: Controleert dat elk <img>-element een alt-attribuut heeft (dat leeg mag zijn voor decoratieve afbeeldingen) of een toegankelijke naam via aria-label, aria-labelledby of title. De regel markeert afbeeldingen die helemaal geen alt-attribuut hebben, omdat de browser dan het bestandspad als toegankelijke naam blootlegt.
• input-image-alt: Controleert dat <input type="image">-elementen een niet-leeg alt-attribuut hebben. Afbeeldingsinvoer fungeert als verzendknoppen en moet hun functie overbrengen, niet alleen hun visuele uiterlijk. Een ontbrekende of lege alt op een afbeeldingsinvoer maakt de knop in de praktijk onbruikbaar met een schermlezer.
• area-alt: Controleert dat elk <area>-element binnen een afbeeldingskaart een niet-leeg tekstalternatief heeft via alt, aria-label of aria-labelledby. Afbeeldingskaarten zijn een verouderd patroon dat nog steeds wordt gebruikt in sommige bedrijfsapplicaties en portalen van de publieke sector, en elke hotspot moet afzonderlijk zijn linkbestemming of functie beschrijven.
• object-alt: Controleert dat <object>-elementen een toegankelijke naam hebben. Het <object>-element werd historisch gebruikt om Flash-content, pdf’s of andere media in te sluiten; zonder label hebben schermlezers geen manier om de ingesloten content te identificeren.
• svg-img-alt: Controleert dat inline <svg>-elementen met role="img" een toegankelijke naam hebben, doorgaans geleverd door een onderliggend <title>-element (met een overeenkomende aria-labelledby) of een aria-label-attribuut op de SVG-root. Moderne UI’s gebruiken SVG uitgebreid voor pictogrammen en illustraties; deze regel detecteert niet-gelabelde SVG’s die betekenis dragen.
• role-img-alt: Controleert dat elk element met role="img" — wat kan worden toegepast op niet-SVG-elementen zoals <div> of <span> die als afbeeldingscontainers worden gebruikt — een toegankelijke naam heeft. Dit patroon is gebruikelijk in aangepaste pictogramsystemen en implementaties met CSS-achtergrondafbeeldingen waarbij geen native afbeeldingselement wordt gebruikt.
• image-redundant-alt: Markeert situaties waarin de alt-tekst van een afbeelding de aangrenzende zichtbare tekst dupliceert, meestal wanneer een afbeelding binnen een link voorkomt naast een tekstlabel. Hoewel dit geen harde fout is, zorgt redundante alt-tekst ervoor dat schermlezers dezelfde informatie twee keer aankondigen, wat de luisterervaring verslechtert. Voor deze regel is menselijk oordeel nodig om correct op te lossen, omdat alleen een persoon kan bepalen of de duplicatie echt redundant is of bewust aanvullend.

Het is belangrijk op te merken dat geautomatiseerde tools, waaronder axe-core, de kwaliteit van alt-tekst niet kunnen beoordelen — alleen de aanwezigheid en basisstructuur. Een regel kan slagen voor een afbeelding met alt="photo" of alt="decorative border", ook al is geen van beide betekenisvol. Handmatige beoordeling is daarom altijd nodig naast geautomatiseerde scans om te bevestigen dat alt-tekst de content en het doel van elke afbeelding nauwkeurig beschrijft.

Hoe te Testen

1. Geautomatiseerde scan met axe DevTools of Lighthouse: Installeer de axe DevTools browserextensie (beschikbaar voor Chrome en Firefox). Open de te testen pagina, activeer de extensie en voer een volledige pagina-analyse uit. Filter de resultaten op de hierboven vermelde regel-ID’s: image-alt, input-image-alt, area-alt, object-alt, svg-img-alt, role-img-alt en image-redundant-alt. Voor elk gemarkeerd element markeert de tool de betreffende node in de DOM en legt de overtreding uit. Lighthouse (ingebouwd in Chrome DevTools onder de Accessibility-audit) toont ook image-alt-overtredingen met details op elementniveau. Leg alle overtredingen vast met hun elementselectoren en omliggende context voor overdracht aan ontwikkelaars.
2. Handmatige DOM-inspectie: Open het tabblad Elements in de browser DevTools en zoek naar alle <img>-, <input type="image">-, <area>-, <object>- en <svg>-tags. Controleer voor elk element of er een passend alt-attribuut of ARIA-label aanwezig is en of de waarde betekenisvol is in de context. Let in het bijzonder op afbeeldingen die dynamisch worden geladen via JavaScript-frameworks zoals React of Vue, die mogelijk niet in een statische HTML-snapshot verschijnen.
3. Schermlezertest met NVDA en Firefox: Start NVDA (gratis, Windows) en open de pagina in Firefox. Navigeer met de toets G om tussen afbeeldingen te springen. NVDA kondigt de toegankelijke naam van elke afbeelding aan; luister naar aankondigingen van bestandspaden, “image” of lege aankondigingen — die allemaal op een fout wijzen. Gebruik voor afbeeldingsknoppen en links de Tab-toets om elk besturingselement te bereiken en controleer of het uitgesproken label de actie weergeeft die het besturingselement uitvoert.
4. Schermlezertest met VoiceOver en Safari (macOS/iOS): Schakel VoiceOver in (Command+F5 op macOS). Gebruik VO+Right Arrow om element voor element door de content te gaan, of open de Item Chooser (VO+U) en selecteer Images in de rotor om in één keer een lijst van alle afbeeldingen en hun labels te zien. Veeg op iOS naar rechts over de pagina en luister hoe elke afbeelding wordt aangekondigd.
5. Schermlezertest met JAWS en Chrome: Druk in JAWS op G om per afbeelding te navigeren. Elke afbeelding moet een duidelijke, betekenisvolle beschrijving opleveren. Gebruik de JAWS virtual viewer (Insert+F1) om de berekende toegankelijke naam en rol voor elk element in kwestie te bekijken.
6. Behandeling van decoratieve afbeeldingen verifiëren: Controleer voor afbeeldingen waarvan u denkt dat ze decoratief zijn of ze alt="" hebben en geen title-attribuut of ARIA-label dat ze opnieuw zou blootleggen. Navigeer met een schermlezer naar die elementen en bevestig dat ze volledig worden overgeslagen in de leesvolgorde.

Hoe te Herstellen

Informatieve afbeelding zonder alt — Onjuist

<!-- Image conveys product information but has no alt attribute -->
<img src='jacket-navy-front.jpg'>

Informatieve afbeelding zonder alt — Juist

<!-- alt text describes the visual content and its purpose in context -->
<img src='jacket-navy-front.jpg' alt='Navy blue wool jacket, front view, with double-breasted buttons'>

Decoratieve afbeelding onjuist gelabeld — Onjuist

<!-- Decorative divider image exposes a descriptive alt that adds noise -->
<img src='divider-ornament.png' alt='Decorative ornamental divider with scrollwork pattern'>

Decoratieve afbeelding correct verborgen voor ondersteunende technologie — Juist

<!-- Empty alt tells screen readers to skip this image entirely -->
<img src='divider-ornament.png' alt=''>

SVG-pictogram zonder toegankelijke naam — Onjuist

<!-- SVG used as a meaningful icon has role="img" but no label -->
<svg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

SVG-pictogram met toegankelijke naam — Juist

<!-- title element provides the accessible name; aria-labelledby associates it -->
<svg role='img' aria-labelledby='icon-account-title' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <title id='icon-account-title'>My Account</title>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Afbeeldingsinvoerknop zonder alt — Onjuist

<!-- Image submit button has no alt; screen reader announces only "image" -->
<input type='image' src='btn-search.png'>

Afbeeldingsinvoerknop met beschrijvende alt — Juist

<!-- alt describes the button's function, not its appearance -->
<input type='image' src='btn-search.png' alt='Search'>

Veelvoorkomende Fouten

• De bestandsnaam als alt-tekst gebruiken: Het schrijven van alt="hero_banner_v3_final.jpg" stelt het bestandspad bloot aan schermlezers zonder betekenisvolle content. Schrijf altijd alt-tekst die beschrijft wat de afbeelding toont of welk doel deze dient.
• Alt-tekst instellen op “image” of “photo”: Generieke waarden zoals alt="image" of alt="photo" slagen voor geautomatiseerde controles omdat ze niet leeg zijn, maar ze dragen geen informatie over. Schermlezers kondigen de rol van het element al aan als “image”, dus het herhalen van dat woord verspilt de tijd van de gebruiker.
• Alt vergeten bij dynamisch ingevoegde afbeeldingen: Afbeeldingen die in de DOM worden ingevoegd via JavaScript (bijv. een productcarrousel gebouwd met React) kunnen in de initiële HTML alt-attributen missen. Zorg ervoor dat de JavaScript-component het alt-attribuut rendert op hetzelfde moment dat hij het src rendert.
• role="presentation" toepassen op betekenisvolle afbeeldingen: Het gebruik van role="presentation" of role="none" op afbeeldingen die content bevatten, verwijdert ze volledig uit de toegankelijkheidsboom. Dit is alleen geschikt voor puur decoratieve afbeeldingen; het gebruik ervan op informatieve afbeeldingen veroorzaakt volledig contentverlies voor schermlezergebruikers.
• Het alt-attribuut volledig weglaten bij CSS-achtergrondafbeeldingen met role="img": Wanneer een <div> wordt gestyled met een achtergrondafbeelding en role="img" krijgt, vergeten ontwikkelaars soms een aria-label toe te voegen. Zonder label staat het element in de toegankelijkheidsboom als een afbeelding zonder naam — net zo problematisch als een ontbrekende alt.
• Alt-tekst schrijven die het uiterlijk beschrijft in plaats van de betekenis: Voor een grafiek beschrijft alt="A blue bar chart" de visuele stijl maar niet de data. De alt-tekst moet de belangrijkste conclusie overbrengen, zoals alt="Bar chart showing Q3 revenue grew 18% year-over-year".
• Dubbele alt-tekst voor meerdere afbeeldingen in een set: Wanneer een productoverzicht zes miniatuurafbeeldingen van hetzelfde item toont, en alle dezelfde alt-tekst krijgen (bijv. alt="Running shoe"), wordt er geen onderscheid gemaakt tussen de afbeeldingen. Elke afbeelding in een set moet zijn unieke content of hoek beschrijven.
• Ontbrekende alt op <area>-elementen in afbeeldingskaarten: Ontwikkelaars die afbeeldingskaarten gebruiken, voegen vaak alt-tekst toe aan de bovenliggende <img>, maar vergeten dat elke <area>-hotspot ook een eigen alt-attribuut nodig heeft dat die specifieke linkbestemming beschrijft.
• Tooltiptekst gebruiken als vervanging voor alt-tekst: Het title-attribuut produceert een visuele tooltip en wordt door sommige schermlezers voorgelezen, maar de browserondersteuning is inconsistent en het wordt niet in alle toegankelijkheidscontexten blootgelegd. Het moet een aanvulling zijn op, niet een vervanging van, een correct alt-attribuut.
• Verzuimen SVG-pictogrammen te testen die via spritesheets of <use>-elementen worden geleverd: SVG-sprites waarnaar wordt verwezen via <use href="#icon-id"> stellen hun interne <title> mogelijk niet bloot aan alle schermlezers vanwege shadow DOM-grenzen. Test sprite-gebaseerde pictogrammen altijd met echte schermlezers en vul ze indien nodig aan met aria-label op het buitenste <svg>-element.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidentiële Circulaire 2025/10, gepubliceerd in het Staatsblad nr. 32933 op 21 juni 2025, stelt verplichte digitale toegankelijkheidsvereisten vast voor een brede reeks publieke en private entiteiten die in Turkije actief zijn. De circulaire verwijst naar WCAG 2.2 als technische standaard, waardoor alle niveau A-succescriteria — waaronder WCAG 1.1.1 Niet-tekstuele content — juridisch afdwingbare verplichtingen worden in plaats van best-practice-aanbevelingen.

De betrokken entiteiten omvatten: alle overheidsinstellingen en -organen, banken en financiële instellingen, ziekenhuizen en zorgaanbieders, telecombedrijven met 200,000 of meer abonnees, e-commerceplatforms, reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (MoNE). Voor overheidsinstellingen moet naleving binnen één jaar na de ingangsdatum van de circulaire zijn bereikt. Private sector-entiteiten krijgen een implementatietermijn van twee jaar.

WCAG 1.1.1 is bijzonder relevant in het Turkse digitale landschap omdat veel drukbezochte sectoren die onder de circulaire vallen — waaronder e-commercemarktplaatsen, bankportalen en overheidsdienstplatforms — sterk afhankelijk zijn van afbeeldingen. Productfoto’s op e-commercesites, infographic-gebaseerde openbare aankondigingen op overheidsportalen, grafiekrijke financiële dashboards in bankapplicaties en formuliergebaseerde interfaces in patiëntportalen van ziekenhuizen vallen allemaal duidelijk binnen de reikwijdte van dit criterium.

Niet-naleving van niveau A-vereisten onder de circulaire stelt betrokken entiteiten bloot aan toezicht door toezichthouders en mogelijke sancties. Omdat WCAG 1.1.1 een van de meest frequent geschonden en het gemakkelijkst te testen criteria is — detecteerbaar via zowel geautomatiseerde tooling als eenvoudige schermlezerrondgangen — zal het waarschijnlijk prominent aanwezig zijn in nalevingsaudits. Organisaties die onder de circulaire vallen, moeten het oplossen van alle image-alt-overtredingen behandelen als een onmiddellijke actie met hoge prioriteit, niet als een uitgestelde verbetering. Het inzetten van een toegankelijkheidsoverlay-SDK zoals Accsible kan helpen bij het signaleren en gedeeltelijk herstellen van ontbrekende tekstalternatieven in realtime, maar volledige herstel op broncodeniveau blijft het meest robuuste en duurzame pad naar naleving.