Redacteur

Als redacteur ben je verantwoordelijk voor de toegankelijkheid van de content. Je moet weten hoe mensen met functiebeperkingen websites gebruiken en welke toegankelijkheidsproblemen ze ervaren. 

Afbeeldingen

  • 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 het alt-attribuut.

    In de code ziet dat er zo uit:

    				
    					
    				
    			
  • 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 het alt-attribuut.

    In de code ziet dat er zo uit: 

    				
    					
    				
    			
  • 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: 

    				
    					
    				
    			
    				
    					
    				
    			

    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. Het alt-attribuut moet wel aanwezig zijn maar het heeft dan geen tekst.

    In de code ziet dat er zo uit: 

    				
    					
    				
    			
  • 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:

    				
    					
    				
    			

    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.

  • Afbeeldingen waar (voornamelijk) tekst op staat, en waar die tekst bedoeld is om informatie over te dragen, noemen we afbeeldingen van tekst. Voor deze afbeeldingen geldt: Als dezelfde weergave ook met alleen echte tekst kan worden gemaakt, gebruik dan geen afbeelding van tekst maar gebruik echte tekst.

    Afbeeldingen van tekst zijn voor sommige mensen niet handig omdat een schermlezer de tekst niet standaard voorleest. Ook kunnen de stijleigenschappen van tekst in een afbeelding niet worden aangepast naar eigen wensen of behoeften van iemand, zoals het vergroten van de lettergrootte of het veranderen van de kleur.

  • Flitsende of knipperende content kan gemakkelijk de aandacht trekken. Dit kan bijvoorbeeld voorkomen in animaties of mediabestanden. Deze content kan een epileptische aanval veroorzaken bij mensen die daar gevoelig voor zijn.

    Flitsende content mag daarom niet meer dan 3 keer per seconde flitsen, tenzij het flitsende gedeelte maar een klein oppervlak van het scherm inneemt.

Formulieren

  • Zorg voor labels bij invoervelden

    Labels zijn het belangrijkste element voor een toegankelijk formulier. Zorg voor labels bij alle invoervelden of ander formulierelementen zoals selectievakjes, keuzerondjes en keuzelijsten. Een duidelijk label beschrijft precies wat er in het veld ingevuld moet worden, is zichtbaar voor alle bezoekers en staat dichtbij het invoerveld.

    Het label moet in de code worden gekoppeld aan het invoerveld. Zo maak je het invoerveld ook toegankelijk voor bezoekers die gebruik maken van hulptechnologieën. Het label is de naam van het invoerveld. Een label vergroot ook het klikbare gebied waarmee een invoerveld kan worden geselecteerd. Dit is handig voor bijvoorbeeld bezoekers met een motorische beperking.

    Koppel labels in de code aan een invoerveld

    Labels worden geplaatst met het <​label​>-element. Het koppelen van een <​label​>-element aan een formulierelement gebeurt met een for/id-koppeling. Geef hiervoor het <​label​>-element een for-attribuut en het bijbehorende formulierelement een id-attribuut met dezelfde waarde.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Er zijn ook manieren om de labels visueel te verbergen. Vraag je dan wel goed af waarom je dat zou willen doen. Het invoerveld verliest dan het grotere klikbare gebied en het wordt misschien minder duidelijk voor bezoekers. Als het label toch visueel wordt verborgen, zorg er dan er wel voor dat er een label beschikbaar is voor hulptechnologieën. Gebruik hiervoor het attribuut aria-label, aria-labelledby of een title-attribuut. Deze zijn niet zichtbaar.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Let op: Placeholdertekst mag niet als enige manier worden gebruikt om een label toe te voegen aan een invoerveld.

    Groepeer meerdere secties van gerelateerde invoervelden

    Als een formulier meerdere secties van gerelateerde invoervelden heeft dan wordt een <​fieldset​>-element gebruikt om deze te groeperen. Geef het <​fieldset​>-element een label door een <​legend​>-element in het <​fieldset​>-element te plaatsen. Hulptechnologieën gebruiken het <​legend​>-element alsof het een onderdeel is van het label van de elementen in het <​fieldset​>-element.

    Het <​fieldset​>-element is vooral relevant voor het groeperen selectierondjes en keuzevakjes maar kan ook worden gebruikt om andere invoervelden te groeperen.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Zorg voor instructies bij invoervelden

    Instructies geven een extra hint voor de invoer in het invoerveld. De instructies in een formulier moeten aangeven of er verplichte velden zijn en eventueel of er een verplicht invoerformaat is.

    Geef aan dat een invoerveld verplicht is

    Het aangeven van een verplicht invoerveld kan in tekst of bijvoorbeeld met een asteriks (*). Zorg dat deze aanduiding in het <​label​>-element is geplaatst.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Als de instructies niet duidelijk per invoerveld worden benoemd dan hoort voorafgaand aan het eerste invoerveld in tekst worden aangegeven op welke manier de verplichte velden zijn aangeduid.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Markeer verplichte velden ook in de code. Gebruik hiervoor bij voorkeur het aria-required-attribuut.

    				
    					
    				
    			
    Geef het aan als er een verplicht invoerformaat is verplicht is

    Ook bij verplichte invoerformaten, zoals een postcode of een e-mailadres die moet worden ingevuld, moeten blijken uit de instructies wat de eisen zijn aan de invoer. Dit kan direct in het <​label​>-element.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Maar dit kan ook via het attribuut aria-describedby.

    In de code ziet dat er zo uit:

    				
    					
    				
    			
  • Bij formulieren hoort een foutcontrole ingebouwd te zijn. De foutcontrole controleert automatisch of een verplicht onderdeel leeg is gelaten of dat een invoerveld verkeerd is ingevuld. Als er een fout is gevonden, dan moet de foutmelding in tekst worden weergegeven. Deze tekst kan worden aangevuld met andere visuele aanwijzingen, zoals een andere kleur of een icoon.

    Benoem in de tekst van de foutmelding de naam van het veld dat verkeerd is ingevuld en benoem precies wat de fout is. Schrijf dus niet:

    • Dit veld is verplicht.

    Maar schrijf:

    • Het veld ‘Telefoonnummer’ mag niet leeg zijn.

    In de code kan ook worden aangegeven welk veld verkeerd is ingevuld. Gebruik hiervoor het attribuut aria-invalid. Daarnaast hoort de foutmelding in de code aan het bijbehorende invoerveld te worden gekoppeld. Dit voorkomt verwarring bij bezoekers die gebruik maken van hulptechnologieën. Een foutmelding kan op een aantal manieren worden gekoppeld zoals met een aria-describedby-attribuut.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

Media

  • Mensen die doof of slechthorend zijn kunnen niet (of niet goed) luisteren naar geluidsfragmenten. Plaats daarom een transcript bij alle geluidsfragmenten. De mensen die doof of slechthorend zijn kunnen dan het transcript lezen. Ook voor filmpjes en animaties kan een transcript een waardevolle toevoeging zijn.

    Een transcript is een uitgeschreven versie van een gesproken tekst en de belangrijke geluiden in een mediabestand. Het beschrijft wat er te zien en te horen is, wat er gezegd wordt en ook door wie het gezegd wordt. Eventuele interactieve elementen, zoals een knop of link, moeten ook worden opgenomen in een transcript.

    Aan geluidsfragmenten moet altijd een transcript worden toegevoegd. Aan bewegende beelden moet alleen een transcript worden toegevoegd als er geen audiodescriptie aanwezig is. Voor filmpjes geldt dat dit alleen verplicht is als er interactieve elementen in het filmpje aanwezig zijn.

  • Mensen die doof of slechthorend zijn kunnen niet (of niet goed) horen wat er gezegd wordt in een filmpje. Ook belangrijke geluiden kunnen zij niet waarnemen. Voeg daarom ondertitels voor doven en slechthorenden toe aan alle filmpjes.

    Ondertitels zijn een tekstuele versie van de gesproken tekst in een filmpje dat gelijktijdig met het beeld wordt getoond. In ondertitels voor doven en slechthorenden worden alle belangrijke geluiden ook beschreven. 

    Er zijn verschillende manieren om ondertitels toe te voegen: ingebakken in het filmpje (open captions) of toegevoegd als een apart ondertitelbestand bij het filmpje (closed captions)

    Ondertitels toevoegen op de grote videoplatformen:

    Als het filmpje ook interactieve elementen heeft, plaats dan ook een transcript bij het filmpje.

  • Mensen die blind of slechtziend zijn kunnen niet (of niet goed) kijken naar een filmpje. Als niet alle zichtbare informatie ook te horen, voeg dan een audiodescriptie toe.

    Een audiodescriptie is een gesproken tekst, of een voice-over, die de belangrijke zichtbare informatie in een filmpje beschrijft als deze niet uit alleen het geluid te begrijpen is.

    Er zijn verschillende manieren om een audiodescriptie toe te voegen: toegevoegd in het geluid van het filmpje of toegevoegd als alternatief audiospoor.

    Let op: Een extra audiospoor wordt (nog) niet ondersteund op de grote videoplatformen.

    Als het filmpje ook interactieve elementen heeft, plaats dan ook een transcript bij het filmpje.

  • Flitsende of knipperende content kan gemakkelijk de aandacht trekken. Dit kan bijvoorbeeld voorkomen in animaties of mediabestanden. Deze content kan een epileptische aanval veroorzaken bij mensen die daar gevoelig voor zijn.

    Flitsende content mag daarom niet meer dan 3 keer per seconde flitsen, tenzij het flitsende gedeelte maar een klein oppervlak van het scherm inneemt.

Navigatie

  • Webpagina’s moeten een titel hebben die het onderwerp of doel van de pagina beschrijft. Met een goede paginatitel kunnen gebruikers een pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen open staan.

    De paginatitel wordt ook gebruikt door mensen die een schermlezer gebruiken om snel een idee van de inhoud van de pagina te krijgen.

    Een paginatitel voor een webpagina wordt gegeven met het <​​title>-element in het <​​head>-element. In het <​​title>-element moet altijd tekst staan.

    In de code ziet dat er zo uit:

    				
    					
    				
    			
  • Geef elke link een beschrijvende linktekst die het doel van de link uitlegt. Linkteksten zoals ‘lees meer’ of ‘klik hier’ zijn niet duidelijk genoeg. Daarom is het belangrijk om linkteksten te gebruiken die zelf aangeven waar de link naartoe leidt. Zo is gemakkelijk het verschil te zien tussen verschillende links op dezelfde pagina.

    Schermlezers kunnen een overzicht van alle links presenteren. Zo kan snel worden genavigeerd naar de inhoud.

    Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. De linktekst kan in de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Wat ook kan is het verbergen van een deel van de linktekst met CSS:

    				
    					
    				
    			
    				
    					
    				
    			

    Let op: Linkteksten die worden uitgebreid met behulp van CSS of het aria-label-attribuut zijn alleen zichtbaar voor bezoekers die gebruik maken van een schermlezer.

Ontwerp

  • Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

    De richtlijnen vereisen voor deze onderdelen een contrastverhouding van ten minste 3:1 tegen alle aangrenzende kleuren. Het kan dus zijn dat een contrast op meerdere plekken gemeten moet worden.

    Formulierelementen

    Formulierelementen, zoals invoervelden, keuzerondjes en selectievakjes moeten genoeg contrast hebben. Zorg voor een duidelijke rand of een achtergrondkleur met voldoende contrast. Ook de verschillende statussen van deze elementen moeten genoeg contrast hebben. Het moet duidelijk zijn of een keuzerondje of selectievakje is geselecteerd of juist niet.

    Iconen

    Informatieve iconen en iconen die ook worden gebruik als link of knop moeten genoeg contrast hebben.

    Grafieken en diagrammen

    Ook onderdelen in grafieken en diagrammen moeten genoeg contrast hebben. Denk hierbij aan de lijnen in een grafiek en de onderdelen in een diagram.

  • Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

    De contrastverhouding voor tekst moet voldoen aan minimaal:

    • 4,5:1 voor tekst die kleiner is dan 24px of 18,5px vetgedrukt.
    • 3:1 voor tekst die groter is dan 24px of 18,5px vetgedrukt.

    Deze contrasteisen gelden ook voor tekst op afbeeldingen.

    Let op: De contrastverhoudingen worden niet afgerond. Als een contrastverhouding van minimaal 4,5:1 is vereist, dan is 4,49:1 dus nog niet genoeg.

    Er zijn tools die kunnen helpen bij het berekenen van de contrastverhouding. Bijvoorbeeld de contrast checker op de website van WebAIM of de Colour Contrast Analyser (software) van The Paciello Group.

PDF

  • Hyperlinks, ook wel bladwijzers genoemd, maken het eenvoudig om snel naar specifieke onderdelen binnen een PDF te navigeren. Dit is vooral handig in uitgebreide documenten met veel pagina’s, waar het anders lastig kan zijn om relevante informatie terug te vinden. Bladwijzers bieden een gebruiksvriendelijke manier om met één klik naar een bepaald hoofdstuk, subhoofdstuk of bijlage te springen. Hoe ga je te werk om bladwijzers toe te voegen?

    Voorbereiding van het document

    Zorg er eerst voor dat je document goed gestructureerd is voordat je bladwijzers toevoegt. Het is belangrijk dat de PDF voorzien is van toegankelijkheidstags, zodat bijvoorbeeld schermlezers het document kunnen voorlezen en de inhoud gestructureerd is. Tags zoals koppen (h1, h2, h3, enz.) helpen om de hiërarchie van het document duidelijk weer te geven.

    Het bladwijzerspaneel openen

    De meeste PDF-programma’s, zoals Adobe Acrobat, hebben aan de rechterkant van het scherm een bladwijzerspaneel. Door hierop te klikken, kun je dit paneel openen.

    Een bladwijzer toevoegen

    Navigeer naar de pagina of sectie van het document waarvoor je een bladwijzer wilt maken. Selecteer de gewenste tekst met de selectietool. Vervolgens kun je in het bladwijzerspaneel op de knop ‘Bladwijzer toevoegen’ klikken of gebruik maken van de sneltoets Ctrl + B. De nieuwe bladwijzer verschijnt dan in het paneel, met de geselecteerde tekst als naam.

    Bladwijzers een naam geven

    Je kunt de naam van een bladwijzer aanpassen door erop te dubbelklikken in het paneel. Kies een duidelijke en beschrijvende naam die de inhoud goed samenvat. Dit maakt het voor lezers gemakkelijker om de juiste bladwijzer te vinden. Voorbeelden van namen zijn: “Hoofdstuk 1 – Inleiding”, “Inhoudsopgave” of “2.1.1. Onderwerp”.

    Bladwijzers ordenen

    Om de structuur van het document verder te verbeteren, kun je bladwijzers rangschikken op verschillende niveaus. In het bladwijzerspaneel kun je bladwijzers onder elkaar slepen, bijvoorbeeld om subhoofdstukken onder een hoofdstuk te groeperen. Dit maakt het document overzichtelijker en gebruiksvriendelijker, zodat lezers de inhoud sneller kunnen doorgronden.

  • Het aanpassen van de documenttaal in een PDF is een eenvoudig proces. Dit kan gedaan worden via de documenteigenschappen. Volg deze stappen om de documenttaal in te stellen:

    1. Open het document in Adobe Acrobat.
    2. Klik op Bestand > Documenteigenschappen om het documenteigenschappen-paneel te openen.
    3. Selecteer het tabblad ‘Geavanceerd’.
    4. Helemaal onderaan zie je het vakje ‘Taal’ staan. Kies uit het uitklapmenu de juiste taal.
    5. Klik onderaan het documenteigenschappen-paneel op de ‘OK’-knop om de instellingen op te slaan.

Tekst

  • Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

    De contrastverhouding voor tekst moet voldoen aan minimaal:

    • 4,5:1 voor tekst die kleiner is dan 24px of 18,5px vetgedrukt.
    • 3:1 voor tekst die groter is dan 24px of 18,5px vetgedrukt.

    Deze contrasteisen gelden ook voor tekst op afbeeldingen.

    Let op: De contrastverhoudingen worden niet afgerond. Als een contrastverhouding van minimaal 4,5:1 is vereist, dan is 4,49:1 dus nog niet genoeg.

    Er zijn tools die kunnen helpen bij het berekenen van de contrastverhouding. Bijvoorbeeld de contrast checker op de website van WebAIM of de Colour Contrast Analyser (software) van The Paciello Group.

  • Voorleessoftware kan tekst omzetten in spraak. Als de taal niet, of op een verkeerde manier, is aangegeven in de code, dan kan de voorleessoftware de tekst niet duidelijk voorlezen.

    Als een zin of paragraaf in de content in een andere taal dan de standaard taal is geschreven, dan moet dit worden aangegeven in de code. Zo kan software de taal van de webpagina bepalen. Deze verplichting geldt alleen voor zinnen en paragrafen, dus niet voor losse woorden.

    Een taalwissel voor onderdelen van een webpagina wordt ingesteld met het lang-attribuut in het element die een andere taal heeft dan de hoofdtaal van de website. Het lang-attribuut kan worden gebruikt op blok-elementen (<​​div​>, <​​p​>, <​​table​>, enz.) maar ook op inline-elementen (<​​span​>, <​​a​>, <​​strong​>, enz.).

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Elke taal heeft zijn eigen code. Voor Nederlands is dat ‘nl‘ (lang="nl"), voor Engels ‘en‘ (lang="en"), en voor Duits ‘de‘ (lang="de").

    Er geldt een uitzondering voor eigennamen, technische termen, woorden van een onbepaalde taal, en woorden of uitdrukkingen die deel zijn gaan uitmaken van de volkstaal van de omringende tekst.

  • Voorleessoftware kan tekst omzetten in spraak. Als de taal niet, of op een verkeerde manier, is aangegeven in de code, dan kan de voorleessoftware de tekst niet duidelijk voorlezen.

    Stel de standaardtaal van een website in. Dit helpt software om de taal van de content te bepalen.

    De taal van een website wordt ingesteld met het lang-attribuut in het <​​html​>-element.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Elke taal heeft zijn eigen code. Voor Nederlands is dat ‘nl‘ (lang="nl"), voor Engels ‘en‘ (lang="en"), en voor Duits ‘de‘ (lang="de").

  • Koppen moeten het onderwerp of doel van de onderliggende tekst beschrijven. Koppen helpen mensen om snel te begrijpen waar een webpagina of document over gaat. Gebruik daarom verschillende kopniveaus om de content goed te structuren.

    Zorg dat elke kop iets zegt over de tekst die eronder staat, zodat de koppen de onderliggende content goed beschrijven. Dit helpt iedereen om een tekst beter te begrijpen, en alle koppen samen horen een goed beeld te geven van de hele content. Een kop moet dus ook altijd content hebben.

    Mensen die gebruik maken van een schermlezer kunnen een lijst van alle koppen gebruiken om over de webpagina te navigeren.

  • Webpagina’s moeten een titel hebben die het onderwerp of doel van de pagina beschrijft. Met een goede paginatitel kunnen gebruikers een pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen open staan.

    De paginatitel wordt ook gebruikt door mensen die een schermlezer gebruiken om snel een idee van de inhoud van de pagina te krijgen.

    Een paginatitel voor een webpagina wordt gegeven met het <​​title>-element in het <​​head>-element. In het <​​title>-element moet altijd tekst staan.

    In de code ziet dat er zo uit:

    				
    					
    				
    			
  • Tabellen bestaan uit rijen en kolommen. Tabelkoppen zijn vaak te herkennen aan een afwijkende opmaak, zoals een andere achtergrond of vetgedrukte tekst. Individuele cellen worden vaak onderscheiden door een rand of een wisselende rijkleur. Mensen die de tabel kunnen zien, kunnen deze relaties vaak snel herkennen maar dit soort vormgeving moet niet de enige manier zijn waarop de structuur en relaties worden overgebracht.

    De betekenis moet ook in de code worden toegevoegd zodat het ook door software te begrijpen is. Dit is handig voor mensen die gebruik maken van hulptechnologieën. Zorg daarom dat alle tabellen worden opgemaakt met een tabel-element en dat tabelkoppen worden opgemaakt met een tabelkop-element. Hiermee wordt dan vastgelegd welke cellen koppen zijn en in welke cellen gegevens staan en wat de onderlinge relaties tussen de cellen zijn.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Geef de tabel ook een korte beschrijving. Deze beschrijving wordt in de code vastgelegd met een <​caption​>-element. Een goede beschrijving helpt bezoekers om een tabel te vinden en te begrijpen waar de tabel over gaat.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    In een CMS kan (in veel gevallen) een tabel worden ingevoegd. Bepaal het aantal rijen en kolommen en bepaal nauwkeurig wat de tabelkoppen zijn. Dit maakt de tabel automatisch op met de juiste HTML-elementen.

  • Koppen zijn vaak te herkennen aan een afwijkende opmaak, zoals een grotere lettergrootte, vetgedrukte tekst, of een andere kleur tekst. Deze betekenis moet ook in de code worden toegevoegd, zodat het ook door software te begrijpen is. Zorg daarom dat alle tekst die er uit ziet als een kop en ook de functie heeft van een kop wordt opgemaakt met een kop-element.

    Zorg voor een passend kopniveau. Alle koppen samen moeten een goed beeld geven van de inhoud van de webpagina.

    Bezoekers die gebruik maken van een schermlezer kunnen een lijst van alle koppen gebruiken om over de pagina te navigeren. Zij kunnen eventueel ook gelijk springen naar de volgende kop.

    Zorg dat koppen worden opgemaakt met een HTML kop-element (<​h1> t/m <​h6>).

    Teksten die géén kop zijn, mogen niet worden opgemaakt met een HTML kop-element.

    Zorg ook dat de volgorde van de koppen en tussenkoppen logisch is. Een paar vuistregels zijn:

    • De eerste kop op de pagina hoort een kop van het eerste niveau te zijn.
    • Na een kop van het eerste niveau hoort een kop van het tweede niveau te volgen.
    • Na een kop van het tweede niveau hoort opnieuw een kop van het tweede niveau volgen óf een kop van het derde niveau.
    • Kopniveaus horen niet te worden overgeslagen.
    				
    					
    				
    			

    In een CMS kan een tekst worden geselecteerd en worden aangegeven dat het een koptekst is. Je kunt hierbij ook het niveau van de kop aangeven. Dit maakt de tekst automatisch op met het juiste HTML-element.

  • Lijsten zijn vaak te herkennen aan een opsommingsteken of een nummer voor het lijstonderdeel. Mensen die de tekst kunnen zien, herkennen hieraan meteen wat de lijsten zijn maar dit soort vormgeving moet niet de enige manier zijn waarop dit wordt overgebracht.

    De betekenis moet ook in de code worden toegevoegd zodat het ook door software te begrijpen is. Zorg daarom dat alle tekst die er uit ziet als een lijst en ook de functie heeft van een lijst wordt opgemaakt met een passend lijst-element.

    Er zijn verschillende soorten lijsten:

    • een opsomming (<ul>)
    • een genummerde lijst (<ol>)
    • en een lijst met beschrijvingen (<dl>).

    Opsomming

    Onderdelen in een opsomming worden voorafgegaan door een opsommingsteken zoals een bolletje of een streepje. Gebruik opsommingen als de volgorde van de onderdelen in de lijst niet belangrijk is.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Genummerde lijst

    Onderdelen in een genummerde lijst worden voorafgegaan door een nummer. Gebruik genummerde lijsten als de volgorde van onderdelen in de lijst wél belangrijk is.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Lijst met beschrijvingen

    Gebruik een lijst met beschrijvingen bij lijsten die bestaan uit een naam, term of begrip met een beschrijving die daar bij hoort. Gebruik deze lijsten bijvoorbeeld voor een verklarende woordenlijst. Binnen een lijst met beschrijvingen wordt het <​dt​>-element gebruikt om een term aan te geven en wordt het <​dd​>-element om de beschrijving aan te geven.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    In een CMS kan een tekst worden geselecteerd en worden aangegeven dat het een lijst is. Je kunt hierbij vaak kiezen voor een opsomming of een genummerde lijst. Dit maakt de tekst automatisch op met het juiste HTML-element.

  • Geef elke link een beschrijvende linktekst die het doel van de link uitlegt. Linkteksten zoals ‘lees meer’ of ‘klik hier’ zijn niet duidelijk genoeg. Daarom is het belangrijk om linkteksten te gebruiken die zelf aangeven waar de link naartoe leidt. Zo is gemakkelijk het verschil te zien tussen verschillende links op dezelfde pagina.

    Schermlezers kunnen een overzicht van alle links presenteren. Zo kan snel worden genavigeerd naar de inhoud.

    Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. De linktekst kan in de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Wat ook kan is het verbergen van een deel van de linktekst met CSS:

    				
    					
    				
    			
    				
    					
    				
    			

    Let op: Linkteksten die worden uitgebreid met behulp van CSS of het aria-label-attribuut zijn alleen zichtbaar voor bezoekers die gebruik maken van een schermlezer.

  • Verwijs in instructies niet alleen naar zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, locatie, oriëntatie of geluid. Gebruik daarnaast ook tekst.

    Schrijf dus niet:

    • Gebruik de ronde knop om je gegevens te verzenden. (vorm)
    • Op de dagen met een groen bolletje zijn wij beschikbaar. (kleur)
    • Klik op de knop rechts onderaan de pagina om naar de volgende pagina te gaan. (locatie)

    Maar zeg wel:

    • Gebruik de (ronde, groene) knop (onderaan) met tekst “Verzenden” om je gegevens te in te sturen.

    Instructies waarin alleen zintuiglijke eigenschappen worden gebruikt zijn niet door alle bezoekers goed te volgen. Zo kunnen bezoekers die blind of slechtziend zijn vorm, omvang of locatie niet waarnemen. Instructies waarin alleen geluid wordt gebruikt zijn niet, of niet goed, te volgen voor bezoekers die doof of slechthorend zijn.

Heb je nog vragen?

Wil je weten hoe jouw website ervoor staat met betrekking tot digitale toegankelijkheid? Of heb je vragen over onze dienstverlening?

Vergroot je bereik

Digitale toegankelijkheid vergroot de gebruiksvriendelijkheid, vindbaarheid en compatibiliteit.

Succescriteria

  • Principe 1. Waarneembaar
    • Richtlijn 1.1 Tekstalternatieven
      • 1.1.1 Niet-tekstuele content
    • Richtlijn 1.2 Op tijd gebaseerde media
      • 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)
      • 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)
      • 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
      • 1.2.4 Ondertitels voor doven en slechthorenden (live)
      • 1.2.5 Audiodescriptie (vooraf opgenomen)
    • Richtlijn 1.3 Aanpasbaar
      • 1.3.1 Info en relaties
      • 1.3.3 Zintuiglijke eigenschappen
    • Richtlijn 1.4 Onderscheidbaar
      • 1.4.3 Contrast (minimum)
      • 1.4.5 Afbeeldingen van tekst
      • 1.4.11 Contrast van niet-tekstuele content
  • Principe 2. Bedienbaar
    • Richtlijn 2.3 Toevallen en fysieke reacties
      • 2.3.1 Drie flitsen of beneden drempelwaarde
    • Richtlijn 2.4 Navigeerbaar
      • 2.4.2 Paginatitel
      • 2.4.4 Linkdoel (in context)
      • 2.4.6 Koppen en labels
    • Richtlijn 2.5 Input Modaliteiten
      • 2.5.3 Label in naam
  • Principe 3. Begrijpelijk
    • Richtlijn 3.1 Leesbaar
      • 3.1.1 Taal van de pagina
      • 3.1.2 Taal van onderdelen
    • Richtlijn 3.3 Assistentie bij invoer
      • 3.3.1 Fout identificatie
      • 3.3.2 Labels of instructies
  • Principe 4. Robuust
    • Richtlijn 4.1 Compatibel
      • 4.1.2 Naam, rol, waarde

Doelgroepen

Ontwikkelaar

Als ontwikkelaar ben je verantwoordelijk voor het technische aspect van een website. Maak toegankelijkheid een vast onderdeel van je ontwikkelproces en documenteer eventuele knelpunten en oplossingen duidelijk.

Redacteur

Als redacteur ben je verantwoordelijk voor de toegankelijkheid van de content. Je moet weten hoe mensen met functiebeperkingen websites gebruiken en welke toegankelijkheidsproblemen ze ervaren. 

Vormgever

Als vormgever ben je verantwoordelijk voor toegankelijke ontwerpen die iedereen kan gebruiken. Bewaak dit ook in de huisstijl en sjablonen.