Redactie

Afbeeldingen

  • Afbeeldingen die informatie overbrengen zijn noodzakelijk voor het begrijpen van de tekst. De afbeeldingen voegen extra informatie toe aan de pagina. Deze afbeeldingen moeten een tekstalternatief hebben dat nauwkeurig beschrijft wat er op de afbeelding te zien is. De invulling is afhankelijk van de context en kan per situatie afwijkend zijn voor dezelfde afbeelding.

    In een CMS kan een tekstalternatief doorgaans worden toegevoegd in de mediatheek.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Het tekstalternatief moet een goede vervanging kunnen zijn voor een afbeelding. Bedenk bij het schrijven van het tekstalternatief altijd wat de bedoeling is van de afbeelding. Houd een tekstalternatief altijd nuttig en beknopt.

  • In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Dit kunnen afbeeldingen zijn die verwijzen naar een andere pagina of website, maar ook afbeeldingen die een actie op de pagina uitvoeren.

    Deze afbeeldingen moeten een tekstalternatief hebben dat het doel van de link beschrijft, of die beschrijft wat er gebeurd als op de afbeelding wordt geklikt. Voorleessoftware gebruikt het tekstalternatief namelijk als linktekst. Daarom is het belangrijker om het doel van de link te beschrijven, in plaats van wat er op de afbeelding te zien is.

    Als er ook tekst staat op een functionele afbeelding, dan moeten de tekst op de afbeelding én het doel van de link allebei in het tekstalternatief worden vermeld. Hierdoor kunnen bezoekers die met spraakherkenning werken de link ook makkelijk bereiken.

    Zo is ‘Ga naar Twitter.com’ een beter tekstalternatief dan ‘Kleine witte vogel op een lichtblauwe achtergrond’ als het gaat om een afbeelding die wordt gebruikt als link naar een Twitter.com.

    				
    					
    				
    			
  • Afbeeldingen die puur ter decoratie op de pagina zijn geplaatst, horen geen tekstalternatief te hebben. Dit zijn bijvoorbeeld afbeeldingen die geen informatie overdragen en niet noodzakelijk zijn voor het begrijpen van de tekst. Deze afbeeldingen moeten worden genegeerd door hulptechnologieën. Decoratieve afbeeldingen kunnen het best met CSS worden geplaatst.

    				
    					
    				
    			
    				
    					
    				
    			

    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.

    				
    					
    				
    			

    Let op: Dit kan in bepaalde gevallen ook worden gedaan met ARIA role="presentation" of aria-hidden="true".

  • Soms is het niet mogelijk om een afbeelding volledig te beschrijven in een kort tekstalternatief. Bijvoorbeeld als het gaat om een uitgebreide infographic of een grafiek. Dit soort complexe afbeeldingen moeten ook volledig worden beschreven in een tekstalternatief. Geef in dat geval naast een beknopte beschrijving in het alt-attribuut ook een langere beschrijving in de omringende tekst.

    				
    					
    				
    			

    Een langere beschrijving mag ook op een aparte pagina worden geplaatst. Plaats dan een link met de verwijzing naar die andere pagina direct voor of na de afbeelding.

    				
    					
    				
    			

    De omringende tekst hoort ook te worden gekoppeld aan de afbeelding. Dit is geen verplichting maar wel erg handig. Hiervoor kan gebruik worden gemaakt van het aria-describedby-attribuut. Gebruik het ID van het element waar de complexe afbeelding beschreven wordt. Deze informatie hoort dan ook zichtbaar te zijn voor bezoekers die wel kunnen zien.

    				
    					
    				
    			
  • Gebruik geen afbeeldingen van tekst om informatie over te dragen. Afbeeldingen van tekst zijn voor sommige bezoekers niet handig. De lettergrootte in een afbeelding schaalt namelijk vaak niet goed mee. Ook kunnen bezoekers tekst die is ingebakken in een afbeelding niet aanpassen naar eigen voorkeuren.

    Gebruik daarom ‘echte’ tekst. Tekst die daadwerkelijk als tekst op de pagina staat kan goed worden vormgegeven met CSS. Hiermee kan bijvoorbeeld de kleur, het lettertype, de lettergrootte, de regelhoogte en de letterafstand en worden ingesteld. Eventueel kan tekst met CSS ook bovenop een afbeelding worden geplaatst.

    Er zijn een paar uitzonderingen waarbij een afbeelding van tekst wél mag worden gebruikt:

    1. Met HTML en CSS kan niet dezelfde visuele weergave worden bereikt.
    2. De weergave van de tekst in de afbeelding is essentieel voor de informatie die wordt overgebracht.
    3. De afbeelding van tekst kan worden aangepast naar de voorkeuren van de bezoeker.

  • Gebruik geen flitsende content. Laat onderdelen in elk geval niet meer dan 3 keer per seconde flitsen. Bezoekers met bepaalde vormen van epilepsie kunnen een aanval krijgen als ze kijken naar knipperende of flitsende afbeeldingen of media.

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

  • Alle mediabestanden moeten een korte tekstuele introductie hebben, ook als er volledige alternatieven zoals een transcript of audiodesciptie aanwezig zijn. Zo’n korte introductie moet de inhoud van het mediabestand globaal beschrijven. Met deze informatie kunnen bezoekers zelf beslissen wat ze met het mediabestand willen doen. Dit is vooral handig voor bezoekers die de content niet gemakkelijk kunnen scannen, zoals bezoekers die gebruik maken van schermlezers.

    Een korte tekstuele introductie kan worden gegeven met een beschrijvende kop, een beschrijvende titel of eventueel een beschrijvend label.

  • Alle geluidsfragmenten en bewegende beelden moeten een transcript hebben. Ook voor filmpjes kan een transcript een waardevolle toevoeging zijn. Een transcript is een uitgeschreven tekst waarin alles wordt beschreven dat te zien, te horen en te doen is. Bijvoorbeeld alle gesproken tekst, maar ook de belangrijke beelden en geluiden. Eventuele interactieve elementen, zoals een link, moeten ook worden opgenomen in een transcript.

    Een goed transcript:

    • bevat alle gesproken tekst.
    • beschrijft alle belangrijke beelden.
    • beschrijft alle belangrijke geluiden.
    • bevat alle links.
    • beschrijft wie er spreekt als dit belangrijk is.
    • benadrukt het volume van de spreker als dit belangrijk is.

    Een transcript moet voor alle bezoekers gemakkelijk te bereiken zijn. Plaats een transcript, of een link naar het transcript, altijd direct onder de code van het mediabestand.

    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.

  • Alle filmpjes moeten ondertitels voor doven en slechthorenden hebben. In ondertitels voor doven en slechthorenden moeten de gesproken tekst én de belangrijke geluiden worden overgenomen. Belangrijk geluiden zijn bijvoorbeeld een deurbel of een explosie. Ook muziek kan belangrijk zijn om het filmpje of de sfeer in het filmpje te kunnen begrijpen.

    Goede ondertitels:

    • bevatten alle gesproken tekst.
    • beschrijven alle belangrijke geluiden.
    • beschrijven wie er spreekt als dit niet direct duidelijk is.
    • benadrukken het volume van de spreker als dit belangrijk is.
    • zijn goed zichtbaar.
    • lopen zo veel mogelijk gelijk met het geluid.
    • bedekken geen andere informatie.

    Het is niet erg als de gesproken tekst een heel klein beetje wordt versimpeld om de ondertitels niet te lang te maken.

    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:

  • In filmpjes wordt soms niet alle zichtbare informatie óók met geluid overgedragen. Sommige dingen zijn wel te zien, maar niet te horen. Deze visuele informatie moet met een audiodescriptie worden toegevoegd aan het filmpje. In een audiodescriptie vertelt een voice-over over belangrijke zichtbare beelden die niet zijn af te leiden uit dat wat te horen is in het filmpje. Dat kan bijvoorbeeld gaan om handelingen, personen maar ook om tekst die alleen in het beeld te zien is. Dit gebeurt op de momenten dat er pauzes zijn in het originele geluid van het filmpje. Zo kunnen bezoekers die blind of slechtziend zijn het filmpje ook goed volgen.

    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.

    Een audiodescriptie hoort zo veel mogelijk samen te vallen met de beschreven zichtbare informatie.

    Voor filmpjes is een audiodescriptie niet altijd nodig. Als alle zichtbare informatie ook te horen is, dan is het niet verplicht. Aan bewegende beelden moet alleen een audiodescriptie worden toegevoegd als er geen transcript aanwezig is.

  • Gebruik geen flitsende content. Laat onderdelen in elk geval niet meer dan 3 keer per seconde flitsen. Bezoekers met bepaalde vormen van epilepsie kunnen een aanval krijgen als ze kijken naar knipperende of flitsende afbeeldingen of media.

Navigatie

  • De paginatitel van een webpagina moet het onderwerp of doel van de pagina beschrijven. Een beschrijvende paginatitel maakt het voor iedereen makkelijker om te navigeren door de website. Paginatitels worden getoond in het venster van de browser of in het tabblad van de pagina. Met een goede paginatitel kunnen bezoekers de pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen open staan.

    Goede paginatitels:

    • beschrijven duidelijk het onderwerp of doel van de pagina.
    • veranderen als een nieuwe pagina wordt ingeladen.
    • hebben de unieke informatie vooraan.
    • zijn uniform met de andere pagina’s.
    • zijn beknopt.
    • zijn uniek.

    Paginatitels worden door hulptechnologieën gebruikt om de webpagina aan te duiden. Deze informatie wordt als eerst gepresenteerd bij het openen van een pagina.

    Gebruik het title-element in het <​head​>-element in de code van de pagina. Beschrijf in dit element het onderwerp of doel van de pagina.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    In een CMS kan de paginatitel vaak per pagina van de website worden ingesteld.

  • Geef links op een webpagina een linktekst waaruit het doel van de link duidelijk is af te leiden. Een beschrijvende linktekst is voor iedereen duidelijker. Zorg dat de linktekst zo is geformuleerd dat bezoekers direct weten waar de link naar verwijst.

    Schrijf dus niet:

    • Lees meer. (onduidelijk)
    • LinkedIn. (onduidelijk)

    Maar zeg wel:

    • Lees meer over digitale toegankelijkheid.
    • Ga naar onze LinkedIn pagina.

    Tip: Als je verwijst naar een e-mailadres, gebruik dan het volledige e-mailadres als linktekst.

    Bezoekers die gebruik maken van een schermlezer kunnen een lijst met alle links gebruiken om over de pagina te navigeren.

    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.

    Een linktekst mag nooit leeg zijn. Zonder linktekst kan (natuurlijk) niet worden bepaald waar de link naar verwijst. Een lege link is misschien niet zichtbaar op de pagina maar deze links komen wél terug in de focus volgorde. Schermlezers merken deze ook link op.

    In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Geef afbeeldingen die ook een link zijn een tekstalternatief dat beschrijft waar de link naar verwijst. Als er een afbeelding én een tekst gebruikt worden met allebei hetzelfde linkdoel, dan is het beter om deze te combineren tot één link. Voor bezoekers die gebruik maken van hulptechnologieën kan het storend zijn als dezelfde link twee keer direct na elkaar voorkomt.

Ontwerp

  • De kleur van tekst moet genoeg contrast hebben tegen de achtergrond. Zo is de tekst voor alle bezoekers goed leesbaar. Tekst moet een contrastverhouding hebben van minimaal:

    • 4,5:1 voor tekst kleiner dan 24px of 19px dikgedrukt.
    • 3:1 voor tekst groter dan 24px of 19px dikgedrukt.

    Deze contrasteisen gelden ook voor tekst op afbeeldingen.

    Let op: Deze contrastverhoudingen mogen niet naar boven worden afgerond. De contrastverhouding tussen de hexadecimale kleurcodes #777777 (grijs) en #FFFFFF (wit) is 4,47:1. Dit is dus niet genoeg.

    Om een contrastverhouding te berekenen kan gebruik worden gemaakt van een contrast-checker. Bijvoorbeeld de contrast checker op de website van WebAIM of de Colour Contrast Analyser (software) van The Paciello Group.

    Er zijn een paar uitzonderingen voor contrast van tekst zoals logo’s, decoratieve tekst en elementen die niet actief zijn.

  • Zorg dat componenten die dezelfde functionaliteit hebben op de hele website hetzelfde worden benoemd. Zo kunnen bezoekers herhalende onderdelen makkelijk terug vinden. Het gaat dan bijvoorbeeld om:

    • teksten op knoppen;
    • labels bij invoervelden;
    • linkteksten;
    • alternatieve teksten van iconen die dezelfde functie hebben.

    Door onderdelen op een consistente manier te benoemen kunnen bezoekers die gebruik maken van schermlezers sneller en efficiënter hun weg vinden.

    Voorbeeld:
    De tekst op de knop bij een zoekveld is op alle pagina’s ‘zoeken’, en niet op sommige pagina’s ‘vinden’.

Teksten

  • De paginatitel van een webpagina moet het onderwerp of doel van de pagina beschrijven. Een beschrijvende paginatitel maakt het voor iedereen makkelijker om te navigeren door de website. Paginatitels worden getoond in het venster van de browser of in het tabblad van de pagina. Met een goede paginatitel kunnen bezoekers de pagina gemakkelijk terugvinden als er bijvoorbeeld meerdere tabbladen open staan.

    Goede paginatitels:

    • beschrijven duidelijk het onderwerp of doel van de pagina.
    • veranderen als een nieuwe pagina wordt ingeladen.
    • hebben de unieke informatie vooraan.
    • zijn uniform met de andere pagina’s.
    • zijn beknopt.
    • zijn uniek.

    Paginatitels worden door hulptechnologieën gebruikt om de webpagina aan te duiden. Deze informatie wordt als eerst gepresenteerd bij het openen van een pagina.

    Gebruik het title-element in het <​head​>-element in de code van de pagina. Beschrijf in dit element het onderwerp of doel van de pagina.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    In een CMS kan de paginatitel vaak per pagina van de website worden ingesteld.

  • De koppen op een webpagina moeten het onderwerp of doel van de onderliggende tekst beschrijven. Zorg dat elke kop iets zegt over de tekst die eronder staat. Een beschrijvende kop maakt het voor iedereen makkelijker om informatie op een pagina te vinden. Alle koppen samen horen een goed beeld te geven van de inhoud van de webpagina. Zo kunnen bezoekers snel de structuur van een webpagina of tekst herkennen.

    Een kop moet altijd onderliggende inhoud hebben.

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

  • Door goede beschrijvende koppen te gebruiken kunnen bezoekers snel de structuur in een tekst herkennen. Een koptekst heeft vaak een afwijkende vormgeving, het wordt bijvoorbeeld groter en dikgedrukt weergegeven. Dat maakt het makkelijk om de structuur van de pagina te scannen.

    Structuur die alleen wordt overgebracht met vormgeving kan door bezoekers die blind of slechtziend zijn niet (of niet goed) worden waargenomen. Voor deze bezoekers is het belangrijk om structuur ook in de code vast te leggen. Zo kan software de structuur en relaties op de webpagina ook bepalen.

    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 >).

    Let op: 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 benadrukken belangrijke punten in een tekst. Een lijst heeft vaak een afwijkende vormgeving, onderdelen van een lijst worden opgemaakt met een opsommingsteken of met een nummer.

    Structuur die alleen wordt overgebracht met vormgeving kan door bezoekers die blind of slechtziend zijn niet (of niet goed) worden waargenomen. Voor deze bezoekers is het belangrijk om structuur ook in de code vast te leggen. Zo kan software de structuur en relaties op de webpagina ook bepalen.

    Bezoekers die gebruik maken van een schermlezer kunnen makkelijker door een lijst navigeren. Schermlezers geven bijvoorbeeld aan hoeveel onderdelen er in de lijst staan en bieden de mogelijkheid om de lijst gelijk over te slaan.

    Zorg dat lijsten worden opgemaakt met een 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.

    Let op: Een lijst met beschrijvingen wordt vaak nog niet ondersteund.

  • Tabellen bestaan uit rijen en kolommen. De gegevens in de rijen en kolommen hebben een onderlinge relatie met elkaar. Voor bezoekers met een visuele beperking is deze relatie niet direct duidelijk. Voor deze bezoekers is het belangrijk dat deze relaties ook in de code wordt vastgelegd.

    Structuur en relaties die alleen worden overgebracht met vormgeving kan door bezoekers die blind of slechtziend zijn niet (of niet goed) worden waargenomen. Voor deze bezoekers is het belangrijk om structuur ook in de code vast te leggen. Zo kan software de structuur en relaties op de webpagina ook bepalen.

    Bezoekers die gebruik maken van een schermlezer kunnen makkelijker door een tabel navigeren. Schermlezers geven bijvoorbeeld aan hoeveel rijen en kolommen in een tabel staan.

    Zorg dat tabellen worden opgemaakt met een tabel-element (<​table>). In dit element moet ook worden aangegeven wat een tabelkop is en wat de gegevenscellen zijn. De tabelkoppen worden in de code vastgelegd met een <​th>-element, gegevenscellen met een <​td>-element.

    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.

  • Geef links op een webpagina een linktekst waaruit het doel van de link duidelijk is af te leiden. Een beschrijvende linktekst is voor iedereen duidelijker. Zorg dat de linktekst zo is geformuleerd dat bezoekers direct weten waar de link naar verwijst.

    Schrijf dus niet:

    • Lees meer. (onduidelijk)
    • LinkedIn. (onduidelijk)

    Maar zeg wel:

    • Lees meer over digitale toegankelijkheid.
    • Ga naar onze LinkedIn pagina.

    Tip: Als je verwijst naar een e-mailadres, gebruik dan het volledige e-mailadres als linktekst.

    Bezoekers die gebruik maken van een schermlezer kunnen een lijst met alle links gebruiken om over de pagina te navigeren.

    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.

    Een linktekst mag nooit leeg zijn. Zonder linktekst kan (natuurlijk) niet worden bepaald waar de link naar verwijst. Een lege link is misschien niet zichtbaar op de pagina maar deze links komen wél terug in de focus volgorde. Schermlezers merken deze ook link op.

    In de gevallen dat niet tekst maar alleen een afbeelding als link wordt gebruikt, spreken we over functionele afbeeldingen. Geef afbeeldingen die ook een link zijn een tekstalternatief dat beschrijft waar de link naar verwijst. Als er een afbeelding én een tekst gebruikt worden met allebei hetzelfde linkdoel, dan is het beter om deze te combineren tot één link. Voor bezoekers die gebruik maken van hulptechnologieën kan het storend zijn als dezelfde link twee keer direct na elkaar voorkomt.

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

  • Geef de standaard taal van een webpagina aan in de code. Zo kan software de taal van de webpagina bepalen. Als er meerdere talen op een webpagina voorkomen, gebruik dan de taal die het meest voorkomt.

    Voorleessoftware spreekt een webpagina uit. De uitspraak van de woorden is afhankelijk van de taal van de pagina. Als er geen (of een verkeerde) taal wordt aangegeven in de code, dan kan voorleessoftware de content mogelijk verkeerd of onduidelijk voorlezen. De standaardtaal van de browser wordt dan gebruikt en deze komt niet altijd overeen met de taal van de content.

    Voeg het lang-attribuut toe aan HTML-element om de taal van een webpagina in te stellen. Gebruik in dit attribuut de juiste taalcode. Zo’n taalcode bestaat uit een tweeletterige code.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Voor alle talen bestaat een eigen aanduiding. Voor het Nederlands is dat ‘nl‘ (lang="nl"), voor het Engels ‘en‘ (lang="en"), voor het Duits ‘de‘ (lang="de"). Bekijk alle taalcodes op IANA Language Subtag Registry (Engelstalig).

    In een CMS kan de taal van een website worden aangegeven in de instellingen.

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

    Voorleessoftware spreekt een webpagina uit. De uitspraak van de woorden is afhankelijk van de taal van de pagina. Als er geen (of een verkeerde) taal wordt aangegeven in de code, dan kan voorleessoftware de content mogelijk verkeerd of onduidelijk voorlezen. De standaardtaal van de browser wordt dan gebruikt en deze komt niet altijd overeen met de taal van de content.

    Voeg het lang-attribuut toe aan de elementen met een andere taal. Geeft dit attribuut een waarde dit bestaat uit een tweeletterige code die staat voor een taal. Het lang-attribuut kan worden gebruikt op blok-niveau (<​div​>, <​p​>, <​table​>, enz.) maar ook op inline-elementen (<​span​>, <​a​>, <​strong​>, enz.).

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    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.

    Bekijk alle taalcodes op IANA Language Subtag Registry (Engelstalig).

    Let op: Niet alle CMS hebben hier ondersteuning voor.

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
  • 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.2 Voorspelbaar
      • 3.2.4 Consistente identificatie
    • 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