Succescriterium 1.1.1 Niet-tekstuele content

Alle niet-tekstuele content heeft een tekstalternatief dat een gelijkwaardig doel dient.

Niet-tekstuele content

• Afbeelding via img
• SVG
• Afbeelding via CSS pseudo class
• Emoji en emoticons
• Icon fonts
• Andere karakters, gebruikt voor hun uitzicht, niet hun betekenis

Waar?

• Op websites en in webtoepassingen
• In mobiele applicaties
• In e-mails, nieuwsbrieven, handtekening ...
• Op sociale media

Tekstalternatief

De niet-tekstuele content is:

• Informatief: voeg alternatief toe voor de visuele boodschap
• Decoratief: verberg voor hulptechnologie

Informatief

Er gaat informatie verloren als het wegvalt (omdat je het niet kunt zien of omdat het niet verschijnt).

Decoratief

• Niet essentieel om inhoud te begrijpen
• Herhaalt informatie die al in tekst beschikbaar is
• Om de interface visueel aantrekkelijk te maken

Img-element

Afbeeldingen die je invoegt met img,
hebben altijd een alt-attribuut nodig.

• Informatief: alt="Tekstalternatief"
• Decoratief: alt=""

Rol van ontwikkelaars

• Leg aan redacteurs uit wanneer tekstalternatief nodig is en wat het moet bevatten
• Verplicht niet om tekstalternatief in te vullen
• Voorzie aankruisvak om afbeelding als decoratief te markeren
• Als er geen tekstalternatief is, altijd lege alt
• Redacteur heeft geen controle over cards en gegenereerde pagina's als zoekresultaten, evenementen, nieuwsoverzicht enz.

Informeer redacteurs

• Veel afbeeldingen zijn decoratief
• Alt-tekst is niet de plaats voor copyright informatie
• Vermijd afbeeldingen van tekst, zoals een screenshot van de tabel met openingsuren

SVG

Voorbeeld

Informatief

Of:

Decoratief

• Geen title-element
• Geen role-attribuut en geen aria-label

Afbeelding via CSS

• Decoratief: geen actie nodig
• Informatief: aria-label of verborgen tekst

Voorbeeld

Link bevat enkel icoon en geen tekst:

<a class="facebook" href="https://facebook.com/anysurfer"></a>
a.facebook:after { 
    content:url('icon_facebook.png'); 
}

Met aria-label

<a class="facebook" aria-label="Facebook" href="https://facebook.com/anysurfer"></a>
a.facebook:after { 
    content:url('icon_facebook.png'); 
}

Met verborgen tekst

<a class="facebook" href="https://facebook.com/anysurfer">
  <span class="visuallyhidden">Facebook</span>
</a>

a.facebook:after { 
    content:url('icon_facebook.png'); 
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Aandachtspunt

Aria-label werkt enkel op component die rol heeft

Doe niet:

<a href="https://facebook.com/anysurfer">
 <i class="facebook" aria-label="Facebook"></i>
</a>

Aandachtspunt

Aria-label overschrijft de inhoud van een element.

Doe niet:

2

Beter

2 Berichten

Tekstuele karakters

• Niet gebruikt voor hun betekenis
• Maar omwille van hun uitzicht

Decoratief

• Verberg met aria-hidden="true"
• Als er geen container is: voeg span toe

Voorbeeld

Programma NCDT 2025 →

Emoji

09.00 – 09.30 ☕️ Inloop met koffie

Waarom?

• Het pijltje en het ☕️ karakter zijn decoratief
• Screenreader zegt: "pijl naar rechts" en "warme drank"
• Met aria-hidden onderdruk je dat.

Informatief

• Overschrijven met aria-label
• Of verbergen en alternatief toevoegen

Overschrijven

Voorbeeld: maalteken of X bedoeld als kruisje om te sluiten

×

Voorbeeld: datumkiezer

 <

Juni

 >

Verbergen en vervangen

Voorbeeld:

Gaan we met de 🚆 of met het ✈?

Verberg de emoji en voeg een tekstalternatief toe:

Gaan we met de 
   🚆
   trein 
of met het 
   ✈
   vliegtuig?

Of:

Gaan we met de 
    🚆 
of met het 
    ✈?

Waarom?

Zo heb je controle over de uitspraak

Voorbeeld: 🙀

Screenreader zegt

• JAWS: vermoeid kattengezicht
• NVDA: vermoeide kat
• VoiceOver: kattengezicht dat schreeuwt van angst

Icon fonts

• Via :before of :after ingevoegd karakter
• Wordt voorgelezen maar moet verborgen worden
• Daarom moet je het invoegen via een aparte span

Doe niet

Zoeken

.icon:before {
	font-family: 'icomoon'; 
	content: attr(data-icon);
}

Maar wel:

 
Zoeken

.icon:before {
	font-family: 'icomoon'; 
	content: attr(data-icon);
}

Informatief

• Verwijder het karakter
• Voeg een alternatief toe

Voorbeeld

Aandachtspunten

AI tekstalternatieven

• Erg uitgebreid
• Nutteloze details
• Vatten de essentie niet

Herhaal de rol niet

Doe niet:

Screenreader leest: Zoekknop knop

Maar wel:

Doe niet

Hou het kort

Doe niet:

Begin met de essentie:

Anderzijds: wees volledig

• Afbeelding met logo's van 3 sponsors
• Tekstalternatief is niet "onze sponsors"
• Maar wel "sponsors: bedrijf a, bedrijf b, bedrijf c"

Consistente identificatie

Doe niet:

Geef functie aan

Niet:

Maar wel:

In dezelfde taal

Niet:

Maar: