• Door naar de hoofd inhoud
  • Spring naar de voettekst
  • Naar navigatie
CARDAN Technobility
  • Hoe wij helpen
    • Onderzoeken
    • Consultancy
    • Trainingen
    • Ervaringsplein
    • Lezingen
  • Digitale toegankelijkheid
    • Voor overheden
    • Voor bedrijven
    • Over de WCAG
    • Waarmerk drempelvrij.nl
  • Over ons
    • Werken bij
    • Vacatures
    • Over Technobility
    • Onze mensen
  • Actueel
  • Zoeken
  • Contact

Home » Actueel » Content-checklist

Content-checklist: is jouw content digitaal toegankelijk?

Marijn Brilman Onderzoeker
22 november 2022 9 minuten lezen

De content is de inhoud van een website en kan veel verschillende vormen hebben. In dit artikel bestaat de content voornamelijk uit tekst, maar onder content vallen bijvoorbeeld ook video’s, animaties, podcasts, infographics en meer. Je wilt natuurlijk zo veel mogelijk mensen bereiken met jouw content en daarom is het belangrijk dat de content toegankelijk is. Met deze content-checklist kun je jouw content checken!

Content versus techniek

Bij een website kunnen we een onderscheid maken tussen de content en de techniek. Het technische gedeelte van de website wordt vaak gemaakt door een webdeveloper, denk hierbij bijvoorbeeld aan de bediening van de website. De techniek kan ook hetzelfde zijn voor meerdere websites. De content van de website wordt vaak geplaatst door webredacteuren en kan dus uit allerlei vormen bestaan, zoals tekst, afbeeldingen en audio of video.

Een toegankelijkheidsonderzoek wordt gedaan aan de hand van de Web Content Accessibility Guidelines (WCAG). Er kan ook een deelonderzoek worden gedaan naar de content of naar de techniek van de website. Er wordt dan naar een deel van de WCAG-succescriteria gekeken, dat van toepassing is op de content of op de techniek. Dit kan bijvoorbeeld handig zijn als meerdere websites dezelfde techniek hebben, maar andere content.

Content-checklist

Met deze content-checklist kun je zelf nagaan of jouw content toegankelijk is. In een WCAG-onderzoek wordt er naar nog meer punten gekeken dan hier vermeld staan, maar met deze content-checklist ben je al een eind op weg naar toegankelijke content! Onder de checklist wordt meer informatie gegeven over de checkpoints.

Afbeeldingen

Video en Audio

Opmaak van tekst

Contrast en kleur

Beschrijf het onderwerp of doel

Formulieren

PDF

Toelichting bij de content-checklist

Afbeeldingen

In de content-checklist staan verschillende soorten afbeeldingen benoemd:

Informatief
Als een afbeelding informatie overbrengt, is er een tekstalternatief nodig. Hulpsoftware kan dan voorlezen wat er op de afbeelding staat aan mensen die niet (goed) kunnen zien. Denk bijvoorbeeld aan een logo, het tekstalternatief moet kunnen voorlezen welk logo het is.
Interactief
Sommige afbeeldingen zijn interactief, ze werken als knop of link. Er is dan een tekstalternatief nodig zodat hulpsoftware kan voorlezen wat de link of knop doet. Denk bijvoorbeeld aan iconen voor social media die werken als link. Het tekstalternatief moet dan aangeven waar de link naar toe gaat.
Complex
Complexe afbeeldingen zijn bijvoorbeeld infographics of grafieken en diagrammen. Er is dan een kort tekstalternatief nodig, dit is de titel van de afbeelding. Er is ook een lang tekstalternatief nodig dat dezelfde informatie overbrengt als de complexe afbeelding. Dit kan een uitgeschreven tekst zijn of bij een grafiek bijvoorbeeld een tabel. Vanuit het korte tekstalternatief kan er dan naar het lange tekstalternatief worden verwezen.
Afbeeldingen van tekst
Gebruik geen afbeeldingen van tekst waar mogelijk. Plaats bijvoorbeeld geen afbeelding met ingescande tekst, maar maak hier “echte” tekst van. Iemand kan dan een eigen stylesheet gebruiken om de tekst beter leesbaar te maken, bijvoorbeeld in een ander lettertype. Er zijn uitzonderingen, bij een logo mag tekst bijvoorbeeld wel in de afbeelding staan.
Decoratief
Decoratieve afbeeldingen moeten genegeerd kunnen worden door hulpsoftware. Een afbeelding is decoratief als deze geen informatie overbrengt, maar puur ter decoratie is. In dit artikel staat bovenaan een afbeelding die er alleen staat omdat dit er leuk uit ziet (vind ik). Hulpsoftware hoeft niet voor te kunnen lezen dat deze afbeelding er staat. Dit kan door de afbeelding een leeg alt-attribuut te geven of door deze bijvoorbeeld met CSS als achtergrondafbeelding te plaatsen.
Iconen van LinkedIn, Instagram en Facebook
Socialmedia-iconen die werken als link hebben een alternatieve tekst nodig

Video en audio

Video’s vallen ook onder content. Video’s moeten goede ondertiteling hebben voor mensen die het geluid in de video niet (goed) kunnen horen, zo krijgen zij toch de informatie uit de video mee. De ondertiteling moet in dezelfde taal zijn als de taal die wordt gesproken in de video. Lees meer over ondertiteling.
Er is ook audiodescriptie nodig. Dit is een voice-over die vertelt wat er in beeld te zien is als dit niet al duidelijk wordt uit het geluid van de video. Dit is bedoeld voor mensen die niet kunnen zien wat er in de video gebeurt, bijvoorbeeld als er teksten in beeld komen. Lees hier meer over audiodescriptie.

Als er een audiobestand op de website staat, moet er een alternatief zijn voor mensen die dit niet kunnen horen. Dit kan door een transcript aan te bieden. Dit is een uitgeschreven tekst van wat er te horen is. Dit kan bijvoorbeeld bij een podcast. De uitgeschreven tekst is dan een soort script waarin staat wie wat zegt in de podcast.

Opmaak van tekst

Koppen

Als je tekst plaatst, moet je zorgen dat dit op de goede manier is opgemaakt. Hulpsoftware kan dan de structuur en de relaties van de pagina bepalen. Een koptekst zegt iets over de tekst eronder. Als dit als koptekst is opgemaakt, kan hulpsoftware voorlezen dat dit een kop is. Er kan dan ook een overzicht van koppen op de pagina worden gegeven. De tekst “Koppen” hierboven is bijvoorbeeld opgemaakt met een h4-element in de HTML-code (dit is een koptekst van het niveau 4). Let er ook op dat de juiste niveaus koppen worden gebruikt en dat er altijd content onder een kop staat.

Strong en em

Wat regelmatig fout gaat is het gebruik van strong- en em-elementen. Deze elementen zijn bedoeld om nadruk te geven aan een stuk tekst. De tekst kan dan ook met nadruk worden voorgelezen door hulpsoftware. Deze elementen zijn echter niet bedoeld om test te stylen, dit kan gedaan worden met CSS.

Lijsten

Als je een lijst gebruikt, maak dit dan op als lijst. Hulpsoftware kan dan:

  • bepalen dat dit een lijst is
  • voorlezen hoeveel items de lijst heeft
  • voorlezen bij welk item van de lijst iemand is

Tabellen

Ook tabellen moeten goed worden opgemaakt als tabellen. Dit kan met het table-element. Het is belangrijk om aan te geven wat de tabelkoppen zijn, zowel in de kolommen als in de rijen. Dit kan met th-elementen. Dit is van belang omdat software de relaties dan kan bepalen. Als iemand met hulpsoftware in een tabelcel staat, kunnen de bijbehorende tabelkoppen meteen worden voorgelezen.

Een voorbeeld van een (hele kleine) tabel met daarin tabelkoppen
ContentTechniek
Aantal onderzochte succescriteria van WCAG 2.13043
Een voorbeeld van een (hele kleine) tabel met daarin tabelkoppen

Andere taal

And now for something completely different. Sometimes text can be in a different language. When this is the case, you have to set a change of language in the HTML code. Screenreaders can read the text in the right language if you do this. Otherwise it will not be understandable.

Contrast en kleur

Tekst moet voldoende contrast hebben. Als het contrast te laag is, kunnen sommige mensen moeite hebben om de tekst te lezen. Ook niet-tekstuele elementen moeten voldoende contrast hebben. Denk bijvoorbeeld aan informatieve iconen. Dit geldt bijvoorbeeld ook voor lijnen in grafieken. Lees hier meer over goed kleurcontrast.

Zorg er ook voor dat informatie niet alleen van kleur afhankelijk is, bijvoorbeeld in een grafiek. Gebruik naast kleur ook verschillende vormen of tekst. Mensen die kleurenblind zijn krijgen de informatie anders niet mee.

Beschrijf het onderwerp of doel

De paginatitel geeft aan waar de pagina over gaat. De titel moet ook het verschil tussen pagina’s aangeven. Als je meerdere tabbladen open hebt staan, kun je snel zien naar welke pagina je wilt gaan door de paginatitel. Hulpsoftware leest ook als eerste de titel van een pagina voor.

Als je een link plaatst, maak dan duidelijk waar deze link naar toe gaat. Een link als “Lees meer” is niet duidelijk als dit wordt voorgelezen door hulpsoftware. Zorg er daarom voor dat er visueel (of verborgen in de code) meer informatie wordt gegeven over waar de link naar toe gaat. Lees meer over “lees meer” links.

Koppen moeten beschrijven waar de content eronder over gaat en ook bij knoppen moet het duidelijk zijn wat ze doen.

Formulieren

Heb je wel eens eens geprobeerd een formulier te versturen en dit niet lukte? Soms blijf je het formulier zien, maar heb je geen idee wat je fout hebt gedaan. Dit is natuurlijk erg onhandig. Zorg daarom dat er foutmeldingen zijn die beschrijven wat er fout is gegaan en waar.

Nog beter is het om fouten te voorkomen. Dit kan door bij elk veld aan te geven wat er ingevuld moet worden met een zichtbaar label buiten het veld. En als bijvoorbeeld een datum op een bepaalde manier ingevuld moet worden (bijvoorbeeld dd-mm-jjjj), geef dit dan ook van tevoren aan.

Screenshot van formulierveld voor een voornaam
Een zichtbaar label boven het invoerveld

Lees hier 8 tips voor toegankelijke formulieren.

PDF

Ook PDF-documenten vallen onder de content van een website en hiervoor gelden een aantal dezelfde WCAG-succescriteria als voor HTML-pagina’s. Er moet dus op dezelfde soort zaken gelet worden, al is de toepassing soms anders. In PDF-documenten kunnen tags gebruikt worden om de structuur aan te geven. Er zijn bijvoorbeeld tags voor koppen en lijsten en dergelijke. Dit is te vergelijken met HTML-elementen voor koppen en lijsten op een HTML-pagina. Hulpsoftware kan door de tags bijvoorbeeld voorlezen wat een koptekst is.

In PDF-documenten moeten afbeeldingen ook alternatieve teksten krijgen. Als een afbeelding decoratief is, kan het in een PDF opgemaakt worden als artefact. Dit wil zeggen dat hulpsoftware de afbeelding kan negeren. Let verder ook in een PDF op contrast en kleurgebruik.

Lees hier meer over het toegankelijk maken van PDF.

Content met je content!

Met deze content-checklist kun je aan de slag, zodat jij en de bezoekers van je website helemaal content zijn met de content! Wil je meer weten over toegankelijke content?

Neem contact met ons op!
  • Volg Marijn Brilman op LinkedIn
Marijn Brilman

Sinds een paar jaar doe ik toegankelijkheidsonderzoeken en check hierbij of iedereen de informatie kan waarnemen, bedienen en begrijpen. Ik ben blij dat er in de afgelopen jaren steeds meer aandacht is gekomen voor digitale toegankelijkheid, want iedereen wil en moet toegang hebben tot informatie!

Website call-to-actions

Ontvang gratis tips en updates

Benieuwd hoe jij jouw digitale communicatie toegankelijk en inclusief maakt? Meld je aan voor onze nieuwsbrief en ontvang de ultieme WCAG checklist!

Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Over Cardan

Specialist in digitale toegankelijkheid.

Footer

Diensten

  • Onderzoeken
  • Consultancy
  • Trainingen

Cardan Technobility

  • Over ons
  • Onze mensen
  • Overzicht waarmerkdragers
  • Digitale toegankelijkheid
  • WCAG
  • WCAG 2.1
  • WCAG 2.2

Adres

Talent Square 13
5038 LX Tilburg
[email protected]

Certificeringen

Waarmerk Drempelvrij - 2 sterrenDDAI geaccrediteerd NCI - ISO 9001 gecertificeerd

© 2023 · Cardan Technobility

  • Algemene voorwaarden
  • Colofon
  • Disclaimer
  • Privacy
  • Toegankelijkheid
  • Beveiligingsverklaring
  • Sitemap
  • Cardan Technobility op LinkedIn
  • Cardan Technobility op Instagram
  • Cardan Technobility op Facebook