Succescriterium 1.1.1 Niet-tekstuele content
Niveau A
Lees de officiële tekst van succescriterium 1.1.1 Niet-tekstuele content
Het voorblad
Het voorblad levert bij vrijwel elk document dezelfde drie problemen op.
De titel is een H1 geworden. In Word is de stijl Titel gebruikt, en die exporteert als H1. Maar H1 is voor hoofdstuktitels. Dubbelklik op de tag en verander H1 in P.
Er staat een lege P-tag. Die ontstaat door een enter in Word. Los dit in twee stappen op, en niet in één:
- Klik met de rechtermuisknop op de inhoud eronder en kies “Code wijzigen in artefact”. Daarmee is het voor voorleessoftware onzichtbaar.
- Klik daarna met de rechtermuisknop op de nu lege P-tag en kies “Code verwijderen”.
Verwijder je de P-tag in één keer, dan blijft de onderliggende lege inhoud gewoon bestaan en kan die alsnog worden voorgelezen.
De afbeelding wordt niet als afbeelding herkend. Controleer via Eigenschappen of er een alternatieve tekst staat, en stel daarna het kenmerkobject in. Zie het artikel over het correct opnemen van een afbeelding in een PDF.
Een logo op het voorblad heeft wél een alternatieve tekst nodig. Staat hetzelfde logo in de koptekst, dan is het daar een artefact en hoeft het niets te hebben.
Thema’sDoelgroepenWie het raaktHulpmiddelenAfbeeldingen opnemen
Bij afbeeldingen die uit Word komen, en bij SVG-afbeeldingen in het bijzonder, gaan twee dingen mis. De afbeelding wordt niet als afbeelding herkend, en er is geen begrenzingsvak — in het Engels een bounding box. PAC meldt beide.
Controleer eerst de alternatieve tekst. Klik met de rechtermuisknop op de Figure-tag, kies Eigenschappen, en kijk op het tabblad Code bij “Alternatieve tekst voor afbeeldingen”.
Stel daarna in hetzelfde venster het kenmerkobject in, via Kenmerkobject bewerken:
- Klik op Nieuw item. Er verschijnt een item van het type Woordenboek.
- Selecteer dat item en klik nogmaals op Nieuw item.
- Vul bij Sleutel “Placement” in en bij Waarde “Block”. Let op de hoofdletters; zonder hoofdletter werkt het niet.
- Laat Type waarde op “Naam” staan en klik op OK.
Voeg daarna het begrenzingsvak toe:
- Selecteer Kenmerkobject 1 en klik weer op Nieuw item.
- Vul bij Sleutel “BBox” in, met twee hoofdletters B.
- Kies bij Type waarde de optie “Matrix”. Het waardeveld wordt dan uitgeschakeld.
- Klik op OK en daarna op Sluiten.
Een decoratieve afbeelding krijgt geen alternatieve tekst maar wordt een artefact. Laat het veld dus niet leeg staan terwijl de Figure-tag blijft bestaan — dan meldt voorleessoftware “afbeelding” zonder te zeggen wat erop staat.
Thema’sDoelgroepenWie het raaktHulpmiddelenAlternatieve teksten
Er zijn twee soorten afbeeldingen in een document. Een informatieve afbeelding draagt informatie over en heeft een alternatieve tekst nodig. Een decoratieve afbeelding draagt niets over en hoort er juist géén te hebben, want dan wordt hij overgeslagen.
Zijn de alternatieve teksten in Word ingevuld, dan komen ze mee in de export. Controleer ze toch: bij een PDF die je van iemand anders krijgt ontbreken ze vaak helemaal.
Ga als volgt te werk, per afbeelding:
- Zoek de Figure-tag op in het zijpaneel Toegankelijkheidstags.
- Klik erop met de rechtermuisknop en kies Eigenschappen.
- Kijk op het tabblad Code bij “Alternatieve tekst voor afbeeldingen”.
- Vul aan wat ontbreekt en klik op Sluiten.
Beschrijf wat de afbeelding overbrengt, niet wat erop staat. Bij een grafiek is dat de uitkomst en niet de vorm: “De omzet daalde in 2025 met een vijfde” zegt meer dan “Staafdiagram met vijf staven”.
Thema’sDoelgroepenWie het raaktHulpmiddelenTekstalternatief bij een afbeelding
Afbeeldingen die informatie overdragen noemen we informatieve afbeeldingen. Informatieve afbeeldingen zijn belangrijk voor het begrijpen van een tekst of pagina. Deze afbeeldingen vertellen iets over de inhoud of maken een pagina duidelijker.
Deze afbeeldingen moeten een tekstalternatief hebben dat nauwkeurig beschrijft of uitlegt wat er op de afbeelding te zien is. Beschrijf dit in een korte, duidelijke zin. Vermijd daarmee te algemene termen en probeer specifiek te zijn over wat de afbeelding weergeeft. Deze tekst moet beschrijvend genoeg zijn, zodat het de afbeelding kan vervangen als je die niet kunt zien.
Een tekstalternatief voor een
<img>-element wordt gegeven met hetalt-attribuut.In de code ziet dat er zo uit:
<img src="poes.jpg" alt="Witte poes speelt met een rode bal">Thema’sDoelgroepenAfbeelding als link
In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Deze afbeeldingen moeten een tekstalternatief hebben.
Dit zijn bijvoorbeeld:
- Logo’s die worden gebruikt als link naar een website.
- Social media iconen die worden gebruikt als link naar een kanaal.
- Iconen met een scroll-naar-top functionaliteit.
Voor afbeeldingen die ook als link worden gebruikt, is het belangrijk dat het tekstalternatief het doel van de link beschrijft. Het tekstalternatief is ook direct de linktekst. Zonder tekstalternatief heeft de link geen linktekst.
Zo is “Scroll naar de bovenkant” een beter tekstalternatief dan “Pijl omhoog” als het gaat om een icoon met een scroll-naar-top functionaliteit.
Een tekstalternatief voor een
<img>-element wordt gegeven met hetalt-attribuut.In de code ziet dat er zo uit:
<a href="categorie/spel.html"> <img src="spel.jpg" alt="Ga naar de categorie spelletjes"> </a>Thema’sDoelgroepenComplexe afbeeldingen
Complexe afbeeldingen, zoals infographics, grafieken of diagrammen voegen veel informatie toe aan een tekst of pagina. Ze vertellen iets over de inhoud of maken een pagina duidelijker.
Deze afbeeldingen moeten een tekstalternatief hebben. Omdat er vaak erg veel informatie op de afbeelding staat, is het moeilijk om alles beknopt te beschrijven in een kort tekstalternatief. In dat geval is het nuttig om daarnaast ook een meer uitgebreide beschrijving te geven in de omringende tekst. Een handige manier om de visuele informatie ook in tekst aan te bieden, is bijvoorbeeld door de informatie helemaal uit te schrijven. Als het gaat om een diagram of grafiek, gebruik dan bijvoorbeeld een datatabel.
In de code ziet dat er zo uit:
<img src="grafiek.jpg" alt="Verkoopcijfers zijn in 2021 met 18% gestegen"> <div> <p>De groei van maandelijkse verkopen in 2021 tegen 2020 verliep als volgt:</p> <ul> <li>Januari: +22%</li> <li>...Je kunt ook een link bij de afbeelding plaatsen die verwijst naar een andere pagina met een uitgebreide beschrijving van de informatie op de afbeelding. Zet deze link direct voor of direct na de afbeelding.
Thema’sDoelgroepenDecoratieve afbeeldingen
Afbeeldingen die puur decoratief zijn voegen geen informatie toe. Ze maken een pagina aantrekkelijker, maar zijn niet echt nodig om een tekst of pagina te begrijpen. Mensen die gebruik maken van schermlezers, hebben eigenlijk niets aan deze plaatjes. Zorg daarom dat decoratieve afbeeldingen worden verborgen voor schermlezers.
Decoratieve afbeeldingen kunnen het best met CSS worden geplaatst.
In de code ziet dat er zo uit:
<div class="line"></div>.line { background-image: url("horizontale-lijn.jpg"); }Als het niet mogelijk is om een decoratieve afbeelding met CSS te plaatsen, dan moet het
alt-attribuut in het<img>-element worden leeg gelaten. Hetalt-attribuut moet wel aanwezig zijn maar het heeft dan geen tekst.In de code ziet dat er zo uit:
<img src="horizontale-lijn.jpg" alt="">Thema’sDoelgroepen