Dit is hoe jouw content digitaal toegankelijk wordt voor iedereen

Introductie Oké, welkom allemaal. Er zitten inmiddels meer dan veertig mensen in het webinar, dus we gaan gewoon lekker beginnen. Buiten gaan de alarmen af, een mooie reminder dat wij hier ook gaan starten. Welkom bij dit webinar over digitaal toegankelijke content: een gratis uurtje waarin ik jullie meeneem in de wereld van digitale toegankelijkheid, met een focus op het maken van toegankelijke content. Blijf vooral tot het einde hangen; ik heb wat cadeautjes en weggevers voor jullie. Voor de mensen die digitaal meekijken: ik kan jullie niet zien of horen, dus voor mij is het doodstil. Stel vooral veel vragen; daar hebben we met z'n allen het meeste aan. Vragen kun je in de Q&A zetten in het webinarscherm. Het kan soms even duren voordat ik ze zie, maar ik kom er zeker op terug. Aan het lijstje namen te zien zijn er al best wat bekenden, maar ik stel me toch even voor. Mijn naam is Joris Nijskens. Ik ben learning & development-coördinator bij Cardan en ik houd me bezig met alles wat te maken heeft met kennisoverdracht. In onderzoeken aan websites van onze klanten vinden we regelmatig dingen die beter kunnen. Aan de ene kant los je die op, aan de andere kant wil je voorkomen dat dezelfde fouten terugkomen. Dat is wat wij doen: we komen langs en vertellen met alle liefde over specifieke onderwerpen binnen digitale toegankelijkheid, zodat je het echt borgt in je organisatie. Vandaag vervang ik Tim, onze trainer. Ik neem het over en ga een uurtje met jullie aan de slag. Programma Ik heb een hoop op de planning: Eerst: waaraan moet je voldoen? Dat hou ik kort. Daarna zoom ik in op drie belangrijke onderwerpen binnen content: tekst, afbeeldingen en beeld en geluid (vaak dus video). Daarna kort iets over tools en technieken waarmee je kunt borgen dat je het goed oplevert. Een paar voorbeelden uit de praktijk. We sluiten af met vragen en hoe nu verder. Is digitale toegankelijkheid verplicht? Eerst een vraag aan jullie: is digitale toegankelijkheid verplicht? Het overgrote deel antwoordt "ja", en dat klopt. Het is verplicht voor een groot deel van de organisaties, niet voor iedereen, maar wel voor bijna iedereen. Je krijgt trouwens geen losse PowerPoint, wel een opname en naslagwerk, dus maak je geen zorgen dat je alles in een uur moet onthouden. Het is in elk geval verplicht voor semi-overheden en gefinancierde organisaties. Dat past ook bij het idee dat als de overheid digitaliseert en je dingen online moet regelen, het ook voor iedereen toegankelijk moet zijn. Daarnaast is er de Wet gelijke behandeling op grond van handicap of chronische ziekte, die stevig verankerd is. En sinds dit jaar is de European Accessibility Act ingegaan, waardoor ook private partijen digitaal toegankelijk moeten zijn. Dit is vrij recent, dus daarom blijven we hierover praten: het geldt inmiddels voor bijna iedereen. Waaraan moet je voldoen? Waar moet je dan aan voldoen? In het algemeen hebben we het over de WCAG (2.1/2.2) op niveau A en AA. Die rust op vier principes: Waarneembaar Bedienbaar Begrijpelijk Robuust Daaronder vallen dertien richtlijnen en weer daaronder de succescriteria. Die succescriteria zijn het belangrijkst: daarin staat letterlijk wat je moet doen om te voldoen. Vandaag ga ik niet de hele lijst succescriteria door; dat is niet het meest enerverende. We pakken het op onderwerp en werkwijze aan, zodat je het meteen kunt toepassen. Tekst: structuur en koppen We beginnen met tekst en eerst met structuur. We geven vaak best goed structuur aan tekst, maar vaak doen we dat visueel. En niet iedereen kan even goed zien. Ook blinde en slechtziende mensen gebruiken koppen om overzicht te krijgen van een pagina. Daarom is het belangrijk dat je niet alleen visueel iets als kop laat lijken, maar dat je in je systeem ook echt kopstijlen gebruikt (H-tags). Een kop moet bovendien iets zeggen over de content die erop volgt, zoals in een krant, waar de kop de inhoud van het artikel samenvat. Duidelijke, beschrijvende koppen lezen prettiger en maken scannen makkelijker. Kopniveaus en hiërarchie Daarnaast draait het om kopniveaus en hiërarchie. Je mag niveaus overslaan, liever niet; het belangrijkste is dat de hiërarchie klopt en blijft bestaan. Op het web hebben we zes kopniveaus (H1 t/m H6). Gebruik bij voorkeur één H1 per pagina, als overkoepelende titel. Meerdere H1's voelt alsof je halverwege de krant ineens nog een voorpagina tegenkomt, dat is verwarrend. Hoger-laagverhoudingen werken als een geneste lijst: twee H2's staan onder dezelfde H1 en zeggen niets over elkaar, maar de H1 zegt wel iets over die H2's. Veelvoorkomende fout bij koppen De fout die ik het vaakst zie: koppen zijn niet als kop opgemaakt. Ze zijn vet of cursief, zien er visueel prima uit, maar in de code ontbreekt de H-tag. Voor iedereen die geen visuele informatie kan gebruiken, zijn het dan geen koppen en verdwijnt de structuur. Je leest dan feitelijk een webpagina zonder koppen en moet je door een grote lap tekst heen om te vinden wat je nodig hebt. Kort gezegd: Gebruik beschrijvende koppen Vermijd vragende koppen waar mogelijk Sla niveaus liever niet over als je structuur aangeeft Zorg dat het ook echt H-tags zijn (en geen strong of em voor styling) Opsommingen en lijsten Dan de opsommingen. Lijsten zijn ideaal voor snel overzicht en gegroepeerde informatie. Wat nog vaak misgaat: losse alinea's met enters ertussen, zodat het lijkt op een lijst. Voor een screenreader wordt dat één lange paragraaf en hoor je niet dat het een lijst is, hoeveel items er zijn of waar het eindigt. Dat is onoverzichtelijk en cognitief zwaarder. Maak daarom echte lijsten aan in je CMS, met bullets (ongeordend) of cijfers (geordend), afhankelijk van wat logisch is. Dan wordt in de code vastgelegd dat het om een lijst met een bepaald aantal items gaat; dat scheelt enorm voor begrip en voor wie hulpmiddelen gebruikt. Praktisch In de meeste CMS'en heb je in de werkbalk de knoppen voor lijstopmaak (bolletjes of cijfers). Selecteer je regels en zet het om naar een lijst. Heb je die optie niet, check dan bij je collega's of beheerders hoe je echte lijsten invoert. Denk er ook aan dat veel problemen te voorkomen zijn door je CMS goed in te richten: maak ongewenste dingen onmogelijk, dwing kopstijlen af in plaats van losse bold/size-styling, en laat de visuele verschillen tussen H2 en H3 overeenkomen met de hiërarchie, zodat mensen niet geneigd zijn een H3 te gebruiken omdat die mooier lijkt. Daarmee borg je dat het minder fout kan gaan, zelfs als iemand nog niet diep is ingewerkt. Lijsten maken het ook visueel duidelijker dat er een gegroepeerd stukje informatie komt. Je ziet aan de opmaak dat het een lijst is, en in de achtergrond staat het semantisch goed. Dat helpt iedereen, van snelle scanners tot mensen met hulpmiddelen, om in te schatten hoeveel er komt en of ze willen doorlezen. Tabellen Dan de vraag: mag je ook een tabel gebruiken? Ja, zeker. Sterker nog, als de informatie die je wilt overbrengen complex of omvangrijk is, kan een tabel juist helpen. Denk aan een extreem lange lijst in een pdf met onderdelen van een apparaat, opgesplitst per onderdeelgroep. In zo'n geval kan een tabel veel overzichtelijker zijn en meer informatie compact tonen. Tabellen zijn bovendien uitstekend digitaal toegankelijk op te maken, mits je ze correct structureert. Belangrijk is wel dat je CMS hier ondersteuning voor biedt. Als je geen tabeloptie hebt, wordt het al snel ingewikkeld. Plaats een tabel in elk geval niet als afbeelding of screenshot; daarmee verlies je de structuur. Tabelkoppen In een toegankelijke tabel markeer je de koppen als tabelkoppen (table headers). In HTML zijn dat -cellen; de gewone datacellen zijn . Als je met een schermlezer door een tabel navigeert, worden de relevante koppen tegelijk met de celinhoud voorgelezen. Je hoort dan bijvoorbeeld eerst de kolom- of rijkop (zoals "Jaar 2021"), gevolgd door de waarde in de cel. Markeer daarom consequent welke cellen koppen zijn en welke niet. Gebruik een tabel wanneer die echt meerwaarde heeft. Bij een kort lijstje kan een gewone opsomming prima volstaan, maar bij meerdere dimensies of lange reeksen is een tabel vaak duidelijker en toegankelijker. Samengevat: ja, een tabel mag zeker, mits je hem semantisch correct opmaakt en de keuze voor een tabel inhoudelijk logisch is. Afbeeldingen en visuele content Vanuit tabellen gaan we door naar afbeeldingen en visuele content. Vuistregel Gebruik afbeeldingen als ondersteuning van de tekst, niet als vervanging. Tekst is meestal het meest toegankelijk; als je de boodschap in tekst helder opschrijft, lever je al snel een gelijkwaardige ervaring voor mensen die niet kunnen horen en mensen die niet kunnen zien (met behulp van hulpmiddelen). Zorg dus dat belangrijke informatie niet alleen in een afbeelding of visual staat, maar ook in tekst aanwezig is. Contrast en leesbaarheid Let daarnaast op contrast en leesbaarheid bij tekst in afbeeldingen. Dit onderwerp gaat dieper dan we nu behandelen, maar de kern is: als er tekst in een afbeelding staat, moet die tekst goed te lezen zijn. Denk aan voldoende contrast en vermijd dat essentiële copy alleen in een grafisch element leeft zonder tekstalternatief. Kleurgebruik Een ander voorbeeld: kaarten of grafieken met kleurcoderingen. Voor mensen met kleurenblindheid, ik noem mezelf als voorbeeld met rood-groen kleurenblindheid, kunnen bepaalde combinaties onbruikbaar zijn. In zo'n situatie helpt het om naast het visuele beeld een korte tekstuele toelichting te geven met wat de bedoeling is, of een klein lijstje met de betekenis van de kleuren en de belangrijkste conclusies. Het verschil kan dan letterlijk zijn tussen "niet bruikbaar" en "prima ervaring". Beeld en geluid Dan kort over beeld en geluid. De stelregel is simpel: zie je wat je hoort, en hoor je wat je ziet. Ondertiteling Elke video heeft ondertiteling nodig voor doven en slechthorenden. Dat betekent dat alle gesproken tekst en belangrijke geluiden in de ondertitels terugkomen. Of je die ondertitels inbrandt in de video of als los bestand aanbiedt, maakt niet uit, zolang ze maar aanwezig en goed leesbaar zijn. Audiodescriptie en transcript Voor mensen die niet kunnen zien is het belangrijk dat je hoort wat je ziet: bied dus een transcript en idealiter audiodescriptie of een voice-over die de visuele informatie benoemt. Nog beter is het om dit direct in het script en de voice-over mee te nemen, zodat je één video hebt die voor iedereen werkt en je geen losse audiodescriptie hoeft aan te bieden. Kwaliteit van ondertiteling Automatisch gegenereerde ondertiteling is een goed startpunt, maar die moet je altijd nalopen en corrigeren. Ga er niet vanuit dat "automatisch" ook "goed" is. Zorg voor foutloze zinnen, leestekens en een logische timing. Voeg als extra service een uitgeschreven tekst toe bij video's: prettig voor wie niet wil of kan kijken, en handig om snel de inhoud te scannen. Borgen vanaf het begin Vanaf het allereerste videomoment, bij de eerste meeting, hoort digitale toegankelijkheid besproken te worden. Leg het vast in het script, hou tempo en timing toegankelijk (rustig praten, ruimte voor ondertiteling) en spreek expliciet uit wat visueel gebeurt. Zo borg je dat de uiteindelijke productie voor iedereen bruikbaar is. Tools en borging Tot slot nog kort over tools en borging. Er bestaan diverse tooling en audits om digitale toegankelijkheid te toetsen, variërend van contentchecks tot volledige toegankelijkheidsrapportages. Rollen binnen organisaties Binnen organisaties zie je vaak een verdeling: Contentteams verzorgen techniek rondom het plaatsen van content (tekst, afbeeldingen, video) Developers beheren CMS, formulieren en code Designers letten op zaken als kleurgebruik en vormgeving Inkoop en regie zorgt voor heldere afspraken en randvoorwaarden Door die verantwoordelijkheden goed te beleggen en je CMS slim in te richten, bijvoorbeeld door kopstijlen af te dwingen, lijstopties beschikbaar te maken en semantische elementen te stimuleren, voorkom je veel fouten nog vóór publicatie. Praktisch detail Praktisch detail voor downloads en media: vermeld bestandsgrootte en -formaat. Als je iemand een video van meerdere gigabytes laat downloaden op mobiel, dan is het fijn dat vooraf te weten. Ook het formaat (bijvoorbeeld MP4, PDF of DOCX) helpt gebruikers inschatten of het bestand afspeelbaar is op hun apparaat. Samenvatting Daarmee ronden we dit deel af. We hebben gekeken naar: Het waarom van digitale toegankelijkheid De WCAG-principes op hoofdlijnen Praktische tekststructuur (koppen en lijsten) Wanneer een tabel juist wel helpt Hoe je afbeeldingen ondersteunend inzet Wat je voor beeld en geluid moet regelen (ondertiteling, transcript en audiodescriptie) Hoe je dat in de praktijk borgt met CMS, rollen en tools