Kennisvideo's over digitaal toegankelijke content

• Download in MP3 formaat

• Download in MP4 HD formaat MP4 HD | 452.5 MB

[Muziek]

In deze video gaan we het hebben over contentstructuur
en toegankelijke links.
Een website of app moet op meerdere manieren
navigeerbaar en waarneembaar zijn.

Als je bijvoorbeeld een schermlezer gebruikt,
moet de software de juiste kopstructuur of opsomming bullets
goed kunnen herkennen.
Ik leg je uit wat jij als content manager of communicatieadviseur
kan doen om koppen in je tekst, lijsten
en links toegankelijk te maken.

Allereerst die contentstructuur echt essentieel voor de navigatie.
Zorg voor een logische lees-
en navigatievolgorde in je website, in de tekst.

Hoe doe je dat nou?
Dat doe je door de juiste headings te gebruiken.

H1, H2, H3 en dus niet je eigen opmaak.
Als je je eigen opmaak gebruikt,
bijvoorbeeld doordat je een kop gewoon vet maakt
of een grote lettertype gebruikt,
dan wordt het door de schermlezer niet herkend als een kop.

Daarmee kan je dus eigenlijk niet van kop naar kop
navigeren door die tekst.
Vandaar dat je echt in je CMS goed moet kijken
hoe je de H1, H2 toepast.

Als je dat niet weet, overleg dat even met je websitebouwer.
Dan markeer je, dan kun je de koppen
op de goede manier markeren.

De titels van paragrafen, van tekst op je pagina.
En dan wordt het goed leesbaar.

Zorg ook dat al die koppen duidelijk en beschrijvend zijn.
Dus geen 'meer informatie',
maar 'meer informatie over het aanvragen van..'
dat het echt duidelijk is waarover gaat de tekst
die onder die kop staat.

Zodat de mensen die het laten voorlezen die tekst
meteen kunnen weten oké hier is het punt,
daar wil ik even verder lezen.
Hier zie je een voorbeeld van een juiste kopstructuur.

Dus eigenlijk, je ziet het,
die bovenste is richtlijnen voor toegankelijkheid.
Dit is even een screenshot van de pagina met
de Nederlandse vertaling van de WCAG-richtlijnen.

En daaronder staat dan de W3C aanbeveling.
Dus dat zijn eigenlijk twee headings.

De eerste is de H1 en de tweede is de H2.
En dat kun je ook zien gewoon in de HTML,
als je dat echt even zeker wil weten.

Dus je kunt altijd voor elke website pagina,
kun je altijd kijken wat er in de HTML staat.
Dat doe je door gewoon even met je rechter muisknop
te klikken op 'pagina bron weergeven'.

Of door met je toetsenbord naar Control + U te gaan.
En dan zie je die HTML.

Je ziet dat het hier op de goede manier staat.
Als dat nou wordt omgekeerd, omdat de content,
degenen die dat gepubliceerd eigenlijk mooier vond,
die H1 kop als tweede te gebruiken,
dan kan dat visueel er wel zo uit zien.

Maar de schermlezer gaat altijd van H1 naar H2 voorlezen.
Als je het gaat omkeren, dan kan dat op de website pagina eruit zien.

Ja, prima. Maar bij het voorlezen gaat het dan helemaal mis
en lopen de dingen door elkaar.

Dus houd dat altijd aan.
En als je dingen anders wil hebben, overleg dat dan met je websitebouwer,
zodat het design kan worden aangepast.

Meer tips voor structuur.
Gebruik ook voor het maken van lijsten
echt die opmaakfunctie die in je CMS zit.

Dus niet zelf met sterretjes of nummers
of streepjes een lijst gaan maken.
Maar gebruik echt die functie van de bullets die in je CMS zit,
zodat ook echt het zogenaamde list-element in de HTML wordt toegevoegd.

En dat zorgt er gewoon voor dat de schermlezer het herkent
als een lijst en ook zo gaat voorlezen.
Ook tabellen kun je gewoon gebruiken.

Maar een tabel moet je echt alleen gebruiken als het om een tabel gaat.
Dus met bepaalde data die geordend moet worden,
dat kan ook tekstuele data zijn.

Bijvoorbeeld openingstijden,
maar je moet het niet gaan gebruiken om een tekst op te maken.
Dus omdat je een woordje zo rechts mogelijk wil uitlijnen op je pagina,
en dat je dan eigenlijk een hele lege tabel onzichtbaar gaat gebruiken
wanneer dan in die ene stijl een woordje staat.

Dat is niet duidelijk, want de schermlezer herkent het als een tabel
en dat wordt heel verwarrend bij het voorlezen.
Ook is het heel belangrijk om gewoon
een consistente opmaak sowieso te gebruiken.

Steeds dezelfde stijl, lettertypes, lettergroottes en kleuren.
En dat geeft ook voor iedereen een prettig beeld
en rustig gebruik van de website.

Nou, dan hyperlink, ook heel belangrijk,
bij echt het structureren van je website.
En natuurlijk zien we nog heel vaak de zogenaamde 'klik hier'-links.

Helaas, je ziet hier een verzameling van 'klik hier'.
En dat lijkt misschien een heel aantrekkelijke manier
om mensen te laten klikken.

Maar eigenlijk, je maakt helemaal niet duidelijk waarheen je gaat.
Ja, hyperlinks maken het internet en zorgen dat je van de ene pagina
naar de andere kan gaan.

Van de ene website naar de andere.
Maar met 'klik hier' weet je niet waarheen je gaat.

En dat is juist heel belangrijk.
Dus, zorg ervoor dat ook links duidelijk zijn
voor mensen die met een screen reader werken.

Maar uiteindelijk ook voor iedereen die op jouw website komt,
is het prettig om te weten waarop klik ik nou eigenlijk?
En na welke pagina word ik gebracht?

Specifiek voor mensen die met een screen reader of schermlezer werken,
is het zo dat ze vaak eerst even alle hyperlinks laten voorlezen
om te bepalen, oké, waar wil ik naartoe gaan?
Dus als je dan alleen maar 'klik hier' hoort, dan is het sowieso verwarrend.

Dus maak daarom die links relevant, noemen we dat.
Dus dat betekent, geef een duidelijke en beschrijvende tekst
waar de link je heen brengt.

Bijvoorbeeld, hier gewoon de pagina-titel.
Dus bijvoorbeeld, meer informatie staat op de pagina,
rechten van mensen met een beperking.

Gewoon de hele pagina-titel wordt gegeven.
Nou, dan weet je, oké, ik ga naar die pagina toe.

Of als het om een download gaat,
'Download de rapportage digitale toegankelijkheid 2023'.
Je weet meteen wat je gaat downloaden.

Of als het gaat om een mailadres,
maak dat mailadres ook gewoon klikbaar.
En je ziet ook wat het mailadres precies is.

Dus het is op twee manieren voorleesbaar
en ook meteen een goede link.
Dus hier zie je eigenlijk even de samenvatting.

Niet goed toegankelijk,
gewoon zo'n knop waarin alleen maar een 'Vraag aan' staat.
Zet dan liever 'Vraag een offerte aan'.

Of, ja, ik heb een vraag geef aan,
ik heb een probleem waarmee je het probleem hebt.
En dan heb je meteen eigenlijk die vraag waarover het gaat.

Een pagina-titel van gemaakt of een link-titel van gemaakt.
En dat maakt het een stuk duidelijker.

Wat kun je nou gebruiken als tool om te kijken
of het goed gaat met de structuur op je website?
Nou, dat is de Headings-map.

Die kun je ook als extensie gewoon in je browser toevoegen.
En dan kun je die openen dan kun je een keer zien van heb ik de Headings,
dus de verschillende kopjes op mijn website,
in een goede volgorde gezet.

En dat is natuurlijk heel handig voor een snelle check.
Wil je meer weten over alt-teksten,
audiodescriptie of voldoende kleurcontrast?

Bekijk dan onze andere video's.

[Muziek]

• Download in MP3 formaat

• Download in MP4 HD formaat MP4 HD | 539 MB

[Muziek]

In deze video gaan we het hebben over
kleurgebruik en kleurcontrast.

Jaarlijks wordt er onderzoek gedaan naar
digitale toegankelijkheid van websites wereldwijd.
En kleurcontrast blijkt altijd een probleem.

Ook in 2024 was het kleurcontrast van zo'n 80%
van de homepages onvoldoende.

Correct kleurgebruik is niet alleen belangrijk voor
mensen met een visuele beperking,
maar het bevordert ook heldere communicatie.

Laten we eerst eens kijken naar kleurgebruik.

Je ziet hier een staafdiagram,
over een aantal verschillende jaren wordt weergegeven,
wat de status is van verschillende aantallen websites en apps.

En je ziet ook natuurlijk dat de kleur rood wordt gebruikt,
de kleur oranje.

Maar gelukkig wordt er ook een patroon gebruikt in die staafdiagram,
zodat het onderscheid heel duidelijk is.

Als je alleen die kleuren zou gebruiken,
die liggen gewoon heel dicht bij elkaar.

En in een donkere ruimte of juist in fel zonlicht,
geeft dat een probleem.

En ook voor mensen met bijvoorbeeld kleurblindheid,
8% van de Nederlandse mannen is kleurenblind. Is dat lastig.

Dus samengevat, let op je kleurgebruik hoe je communiceert met kleur.

Gebruik niet uitsluitend kleur om
verschillende onderdelen van elkaar te onderscheiden.
Gebruik ook een tekst, vorm of patronen
om het onderscheid goed duidelijk te maken.

Nou, het volgende onderdeel gaan we te hebben over kleurcontrast.

Kleurcontrast is meetbaar.
Eigenlijk is het daarom best wel bijzonder dat het nog zo vaak fout gaat,
want het is gewoon een heel meetbaar iets.

Het gaat over de verhouding van de voorgrondkleur
en de achtergrondkleur.
En meestal hebben we het dan over tekst.

De kleur van de tekst ten opzichte van de achtergrond van de pagina.
En dat zijn vaak letters,
maar het kan ook gaan over letters in een afbeelding.

Of natuurlijk randen van een kader, van knoppen.
Dat komt ook voor.

Nou, we gaan dit bekijken nu even aan de hand van een tool,
de color contrast analyzer.

Waarom is het advies om dat geregeld eigenlijk te doen?

Om zelf eigenlijk steeds meer gevoel te krijgen
bij wat een goed kleurcontrast is.

Als je die tool opent, in dit geval deze tool,
dan kun je met dat pipetje wat in de tool staat eigenlijk
gewoon een kleur pakken van de pagina.

Dus je gaat eigenlijk met een indicator naar
de achtergrondkleur die je hier ziet.

Dus je pakt hier die kleur roze,
dat donkere roze.

En vervolgens zit die in de tool en kun je dus meten
hoe het wit contrasteert ten opzichte van dat roze.
En in dit geval is dat geslaagd.

En je zal ook zien, hij geeft het ook aan,
dus voor een grotere tekst zal de contrast ratio sneller
goed zijn dan bij een kleinere tekst.

En dat komt omdat een kleinere tekst
ook letterlijk minder pixels heeft.

Dus het onderscheid is gewoon minder goed te maken.

Behalve een goed contrast verzorgen,
moet je ook zorgen dat je
de organisatie eigenlijk even adviseert.

Want een heleboel mensen denken namelijk dat als ze
de huisstijlkleuren gebruiken,
dat het dan in orde is
dat ze dan oké zijn qua kleur gebruik.

Terwijl je kunt je goed voorstellen dat sommige kleuren
ook uit je eigen huisstijl gewoon helemaal niet goed
contrasteren met elkaar.

Dus je ziet hier een voorbeeld van hoe de gemeente Amsterdam
dat adviseert in de huisstijlwijzer.
Hier zie je een stukje van een paar
van de huisstijlkleuren van deze gemeente.

En ze geven ook aan welke kleuren
je met elkaar kan gebruiken.

Je ziet ook de kleuren rood, geel en oranje hier.

En je kunt je zo even voorstellen dat bijvoorbeeld
geel en oranje helemaal niet goed met elkaar zal contrasteren.

Dus dat is ook niet het advies.

Ze geven ook duidelijk aan gebruik dan zwart als letter
bij de achtergrond geel of als achtergrond oranje.

Dus dat zijn dingen waarmee je de organisatie helpt
en waarbij je ook zorgt dat het steeds vaker goed gaat
met het kleurcontrast op je website.

Dan letters op foto's.
Dat is natuurlijk ook iets wat heel vaak gebeurt.

Je hebt een mooie achtergrond foto.
En er is een tekst die er overheen gaat,
bijvoorbeeld een titel van een artikel.

Maar doe dat dan op een bepaalde manier.
Dus er zijn hier even drie manieren die worden geschetst.
De bovenste gewoon de letters erop geplakt.
De tweede is zijn letters met een schaduw.
En de derde is de letter, dus die tekst kleurcontrast,
in een kader geplaatst.

Nou, voorkom nou eigenlijk dat je die achtergrond,
die letter rechtstreeks op die achtergrond staat.

Want die achtergrond, ja, voor een deel contrasteert
het misschien wel en voor een deel niet.

Want ja, zo'n foto heeft verschillende stukken kleur,
zal ik maar zeggen.

Dus plaats die tekst bij voorkeur in een kader
of geef hem een goede schaduw zodat die voldoende
contrast heeft van zichzelf.

Een andere tip, eigenlijk even nog los van kleurcontrast,
is natuurlijk dat als je tekst gaat gebruiken in een foto,
zorg dan ook dat je die tekst in de alt-tekst vermeldt.

Want deze tekst, in dit geval de tekst kleurcontrast,
wordt natuurlijk niet voorgelezen door een schermlezer
als hij in een afbeelding staat.

Oké, wil je meer weten over hoe je om moet gaan met alt-teksten
of kantoorbestanden op je website?
Of over hoe je digitale toegankelijkheid organiseert?

Bekijk dan ook onze andere video's.

[Muziek]

• Download in MP3 formaat

• Download in MP4 HD formaat MP4 HD | 374.7 MB

[Muziek]

In deze video ga ik het hebben over kantoorbestanden op je site.
Het heeft de voorkeur om content te publiceren in HTML.

Daarmee wordt het beter vindbaar en gemakkelijker om toegankelijk te maken.
Maar soms ontkom je er niet aan om toch een kantoorbestand
zoals een Word- of pdf-document online te publiceren.

Hoe doe je dat nou op een toegankelijke manier?
Laten we eerst eens kijken over wat voor bestanden we het hebben.

Behalve Word en pdf gaat het ook over documenten
in het open document format
en over allerlei andere bestanden van Microsoft Office,
bijvoorbeeld PowerPoint of Excel.

Voordat je zo'n kantoorbestand publiceert op je site,
stel jezelf of beter gezegd, stel de organisatie de vraag,
Is het echt nodig om het in deze vorm te publiceren?

Misschien zijn er andere manieren.
Zoals gezegd bijvoorbeeld in HTML
of als filmpje of misschien gewoon wel niet.

Als dat toch niet anders kan,
zorg er dan voor dat je het direct toegankelijk krijgt aangeleverd.

Dat betekent iedereen zich goed bewust moet zijn van de afspraken
die er zijn over digitale toegankelijkheid,
afspraken met de bureaus die aanleveren,
maar ook binnen de organisatie dat er gewoon goed wordt ingekocht.

Daarnaast is het heel belangrijk om te werken met sjablonen
en dan natuurlijk toegankelijke sjablonen.
Als er binnen de organisatie al met sjablonen wordt gewerkt,
ga dan na of die inderdaad voldoen.

Als er nog niet met sjablonen wordt gewerkt,
dan is dit misschien een goed moment om dat te gaan introduceren.
Andere manieren om rekening te houden
of eigenlijk te werken met een manier van publiceren
die helpt om digitaal toegankelijk te worden zijn eigenlijk
richtlijnen voor urgente documenten.

Daarnaast is het ook heel goed om dus te kijken
naar toegankelijke alternatieven.
Met die richtlijnen bedoelen we, het kan altijd gebeuren,
dat een document inderdaad is aangeleverd,
ingekocht en toch niet voldoet.

Maak daarom met de hele organisatie de afspraak dat als dat gebeurt,
dat er altijd binnen een redelijke termijn,
bijvoorbeeld twee dagen, een toegankelijk alternatief beschikbaar is,
of een toegankelijke versie moet ik zeggen.

Dus dat betekent dat je het duidelijk aangeeft op de website,
duidelijk aangeeft in je toegankelijkheidsverklaring,
zodat gebruikers ook weten waar ze aan toe zijn.

Daarnaast kan je werken met het toegankelijk alternatief,
dus bijvoorbeeld naast de ontoegankelijke pdf die je hebt
of de pdf die op delen ontoegankelijk is,
of publiceer je ook een toegankelijk alternatief in bijvoorbeeld HTML.
Dat ziet er natuurlijk anders uit.

Dus daar zijn wel afspraken over binnen de WCAG,
die vind je ook terug op digitoegankelijk.nl.
En het betekent ook dat je twee versies moet onderhouden.

Maar goed, soms kan dat toch een goede oplossing zijn
waarmee je een heleboel mensen helpt.
Het meest voorkomende kantoorbestand dat je eigenlijk tegenkomt
op overheidswebsites is natuurlijk pdf.

En de meeste of heel veel van die pdf's zijn
oorspronkelijk gemaakt in Word.
Daarom is er een belangrijke tip eigenlijk over het werken met Word
en dat is maak gebruik van de toegankelijkheidschecker.

Die vind je eigenlijk op dezelfde plek
als waar je de spellingcontrole vindt.
Ook zo iets, zo'n tool die je zou moeten willen gebruiken.

En als je die toegankelijkheidschecker gebruikt,
dan wijst die je eigenlijk vanzelf op de structuur van je document,
op afbeeldingen of er wel of niet een alt-tekst bij zit,
op kleurcontrast of je het goed hebt gedaan,
op de links of die inderdaad goed
en beschrijvend zijn en op je taalinstelling.

Eigenlijk allerlei dingen die natuurlijk ook voor al je andere
webcontent van belang is.

En waarover het we ook hebben in onze andere video's.
Daarnaast is wel ook heel belangrijk dat bij structuur
dat je ook goed kijkt als het om een scan gaat.

Want bij een scan zijn vaak heel veel dingen weggevallen.
Dus bijvoorbeeld de hyperlinks werken niet meer of een koptitel is...
eigenlijk de goede heading is weggevallen.
Dus dat zijn dingen die je alsnog goed moet checken.

Maar als je werkt met die toegankelijkheidschecker,
dan word je daar ook op gewezen. En een ander bijkomend voordeel is
natuurlijk ook dat omdat iedereen binnen de organisatie dat gaat gebruiken,
het ook steeds gewoner wordt om het daarover eigenlijk te hebben
met elkaar en om er naar te vragen.

Goed. Als dan die pdf gepubliceerd moet gaan worden,
dan ga je natuurlijk nog even een laatste keer goed checken.

En dat kun je doen met de PAC, de Pdf Accessibility Checker.
Dat is een heel gebruiksvriendelijke tool.

Je ziet hier eigenlijk even twee screenshots
van hoe je het document in kan laden.
Of kan uploaden eigenlijk in de tool.

En ook links zie je een screenshot van een functie
of eigenlijk een weergave die je kan gebruiken in deze tool.
En ze hebben visuele weergaven zoals je het ook
met een schermlezer ervaart.

En het handige is voor jou als checker zie je daarmee in één keer
waar de fouten zitten en waar je nog dingen kan verbeteren.
Nou, wat moet je nog verder weten om te voldoen aan de wet
of hoe je digitale toegankelijkheid organiseert?

Bekijk onze andere video's om daar meer over te leren.

[Muziek]