Techniek

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.

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

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

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

  • Zorg dat alle bewegende, scrollende of knipperende content dat automatisch start én langer dan 5 seconden duurt kan worden gepauzeerd, gestopt of worden uitgezet. Onder bewegende, scrollende of knipperende content vallen onder andere carrousels, animaties op de pagina, bewegende advertenties, enz. Bezoekers met een cognitieve beperking kunnen er door worden afgeleid. Ook voor bezoekers die gebruik maken van een schermlezer kan dit storend zijn.

    Deze regels gelden ook alle automatisch verversende content, maar hiervoor geldt ook de frequentie van updates mag worden aangepast.

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

  • Alle afbeeldingen moeten een tekstalternatief hebben. Een tekstalternatief kan op verschillende manieren worden toegevoegd:

    Tekstalternatief voor een <img>-element

    Bij een <img>-element wordt een tekstalternatief gegeven met behulp van het alt-attribuut.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Tekstalternatief voor een <svg>-element

    Bij een <svg>-element wordt een tekstalternatief gegeven met behulp van het title-element in de svg. Gebruik ook aria-attribuut role="img" om ervoor te zorgen dat zo veel mogelijk ondersteunende technologieën het <svg>-element herkennen als een afbeelding.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Tekstalternatief voor afbeeldingen die is geplaatst met CSS

    Aan een afbeelding die geplaatst is met CSS kan een tekstalternatief worden gegeven met een aria-label.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Invulling van het Tekstalternatief

    De invulling van een tekstalternatief wordt bepaald door de functie die een afbeelding heeft. In veel gevallen draagt een afbeelding informatie over. Beschrijf dan in het tekstalternatief wat er op de afbeelding te zien is. Bij een afbeelding die ook een link is, gaat het juist om het beschrijven waar de link naar toe verwijst. Als een afbeelding geen informatie aan de pagina toevoegt, dan is het beter om het helemaal geen tekstalternatief te geven zodat het kan worden genegeerd door hulptechnologieën.

Bediening

  • Acties die in worden geactiveerd door een apparaat te kantelen of te schudden zijn niet goed toegankelijk voor sommige bezoekers. Bezoekers met een motorische beperking kunnen deze acties bijvoorbeeld onbedoeld uitvoeren. Er zijn ook bezoekers die dit niet, of niet goed, kunnen bedienen omdat het apparaat op een vaste plek is bevestigd aan bijvoorbeeld een rolstoel. Ook het maken van gebaren naar een camera die deze de bewegingen kan interpreteren valt onder bewegingsactivering.

    Laat bezoekers daarom de bewegingsactivering uitschakelen of zorg dat acties die kunnen worden geactiveerd met bewegingsactivering ook te activeren zijn met een alternatieve bediening.

  • Alle functies op een website moeten te bereiken en gebruiken zijn met alleen het toetsenbord. Sommige bezoekers kunnen geen muis gebruiken door bijvoorbeeld een visuele of motorische beperking. Als alle functionaliteit met het toetsenbord kan worden bediend, dan werkt deze ook met een groot aantal hulptechnologieën. Zorg daarom dat onderdelen zoals links, knoppen, navigatie, invoervelden, selectievakjes, keuzerondjes, keuzelijsten en alle andere interactieve functies de toetsenbordfocus kunnen krijgen en kunnen worden gebruikt.

    Standaard HTML-elementen voor links, knoppen en formulierelementen op de website zijn goed toegankelijk met het toetsenbord.

    De standaard toetsenbordnavigatie is als volgt:

    • Met TAB navigeert de toetsenbordfocus vooruit.
    • Met SHIFT + TAB navigeert de toetsenbordfocus achteruit.
    • Met de pijltoetsen kan worden genavigeerd in gegroepeerde menu’s of radiobuttons.

    Bezoekers die gebruik maken van het toetsenbord gebruiken de TAB-toets om door een website te navigeren. De TAB-toets verplaatst de toetsenbordfocus naar het volgende focuseerbare onderdeel.

  • Als bezoekers met het toetsenbord naar een onderdeel op de pagina kunnen navigeren, maar er niet meer vandaan kunnen dan is dit een toetsenbordval. Om uit een toetsenbordval te raken is de enige manier vaak om de muis (of ander aanwijsapparaat) te gebruiken of om de pagina helemaal te herladen. Dit is dit geen optie voor bezoekers die geen gebruik kunnen maken van de muis. Dit komt soms voor als er plugins worden gebruikt.

    Zorg dat met het toetsenbord helemaal over de pagina kan worden genavigeerd.

  • Op sommige websites kunnen bezoekers gebruik maken van sneltoetsen. Met sneltoetsen kunnen bezoekers gemakkelijk functies uitvoeren of navigeren naar een pagina. Dit werkt goed voor veel bezoekers die gebruik maken van het toetsenbord maar kunnen conflicteren sommige hulptechnologieën. Hierdoor kunnen sneltoetsen onbedoeld worden geactiveerd. Dit geldt bijvoorbeeld voor bezoekers die gebruik maken van software voor spraakherkenning.

    Zorg daarom dat sneltoetsen die bestaan uit één karakter kunnen worden aangepast, uitgeschakeld of alleen geactiveerd kunnen worden als het onderdeel de toetsenbordfocus heeft.

  • Sommige functionaliteit op een website is alleen te uit te voeren met een moeilijk gebaar. Bijvoorbeeld gebaren waarbij de bezoeker meerdere vingers moet gebruiken (meerpuntsgebaren) of gebaren waarbij de bezoeker een vinger (of de aanwijzer) in een bepaald pad moet bewegen (pad gebaseerde gebaren). Bezoekers kunnen, om verschillende redenen, soms niet in staat zijn om moeilijke gebaren te maken met hun vingers of met een aanwijzer. Bijvoorbeeld door een motorische beperking.

    Zorg dat functionaliteit die met gebaren wordt geactiveerd, ook met een klik, dubbelklik of klikken-en-vasthouden van een muis kan worden geactiveerd. Dit kan bijvoorbeeld met een eenvoudige bediening toe te voegen.

Formulieren

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

    				
    					
    				
    			

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

    				
    					
    				
    			
  • Veranderingen in de inhoud van een pagina worden aangegeven met een statusbericht. Een statusbericht voegt nieuwe informatie toe aan de pagina. Het geeft de bezoeker bijvoorbeeld informatie over de resultaten van een actie, over de voortgang van een laadtijd of een waarschuwing over eventuele fouten in een formulier. Deze informatie is belangrijk voor iedereen. Deze informatie moet dus ook beschikbaar worden gemaakt voor een bezoeker die gebruik maakt van hulptechnologieën.

    Hulptechnologie synchroniseert continu met het DOM en merkt de wijziging dus wel op, maar de bezoeker die hiervan gebruik maakt wordt er nietover geïnformeerd. Met het attribuut aria-live wordt een blok een live region. Deze informatie moeten in de code worden opgemaakt zodat ze de aandacht krijgen van hulptechnologieën op een manier die de bezoeker niet onnodig onderbreekt.

    • Bij succes of informatie over voortgang wordt dit gedaan met ARIA role="status" of aria-live="polite".
    • Bij waarschuwing wordt dit gedaan met ARIA role="alert" of aria-live="assertive".
    				
    					
    				
    			

    Standaard zal hulptechnologie alleen de gewijzigde tekst voorlezen. Als toch het hele blok moet worden voorlezen, voeg dan aria-atomic=”true” toe.

    Een bezoeker heeft geen controle over de uitgesproken informatie. Als een bezoeker (per ongeluk) een toets aanraakt, wordt de aankondiging onderbroken en is er geen manier om de informatie opnieuw te beluisteren.

  • Als er door het insturen van een formulier een onomkeerbare actie wordt uitgevoerd die grote gevolgen kan hebben, dan moet er voor worden gezorgd dat bezoekers de inzending kunnen annuleren, controleren of bevestigen.

    Bezoekers met een functiebeperking lopen vaak meer risico om fouten te maken. Mensen met dyslexie kunnen letters en cijfers omdraaien en mensen met motorische stoornissen kunnen per ongeluk toetsen aanslaan. Eigenlijk hebben alle bezoekers profijt van de mogelijkheid om ernstige fouten te voorkomen.

    Bij een formulier waarmee een wettelijke of financiële transactie wordt gedaan, kun je één van de volgende technieken toepassen:

    • Geef de bezoeker na verzending van het formulier een bepaalde tijd om de inzending te wijzigen of annuleren.
    • Toon voordat het formulier wordt verzonden een overzicht van de ingevulde gegevens en bied de bezoeker de mogelijkheid om deze te verbeteren.
    • Voeg een selectievakje toe aan het formulier waarmee de bezoeker aan kan geven dat hij de gegevens heeft gecontroleerd en dat deze correct zijn, voordat hij het formulier verzendt.

    Bij een formulier waarmee de bezoeker gegevens kan wijzigen of verwijderen, zoals profielgegevens op een website, kun je één van de volgende technieken toepassen:

    • Bied de mogelijkheid om verwijderde gegevens terug te halen.
    • Vraag bevestiging om door te gaan met de actie van het wijzigen of verwijderen.
    • Voeg een selectievakje toe aan het formulier waarmee de bezoeker aan kan geven dat hij de gegevens heeft gecontroleerd en dat deze correct zijn, voordat hij het formulier verzendt.

    Bij een formulier waarmee de bezoeker antwoorden kan geven op vragen uit een test, toets of examen, kun je één van de volgende technieken toepassen:

    • Bied de mogelijkheid om antwoorden te controleren en verbeteren voordat ze worden verzonden.
    • Vraag bevestiging om door te gaan met het inzenden van het antwoord.
  • Laat geen grote gebeurtenis plaatsvinden als een bezoeker een veld invoerveld invult, een selectievakje of keuzerondje aanklikt of een waarde kiest uit een keuzelijst, tenzij de bezoeker vooraf is geïnformeerd. Voor veel bezoekers kan een onverwachte gebeurtenis verwarrend zijn. Bezoekers met een visuele beperking kunnen de wijziging misschien niet zien. Bezoekers die alleen met het toetsenbord navigeren kunnen hierdoor moeite hebben met de bediening van de website. Laat de bezoeker daarom zelf op een knop klikken om de gebeurtenis in gang te zetten.

    Grote gebeurtenissen worden contextwijzigingen genoemd. Contextwijzigingen zijn bijvoorbeeld:

    • het automatisch inzenden van een formulier;
    • het openen van een venster;
    • het veranderen van de focus naar een ander onderdeel.

    Er mag ook geen contextwijziging plaatsvinden door het veranderen van de focus.

  • Soms moeten formulieren binnen een bepaalde tijd worden ingevuld of verloopt een inlogsessie na een bepaalde termijn. Zo’n tijdslimiet is niet handig voor bezoekers die meer tijd nodig hebben. Bijvoorbeeld omdat zij gebruik maken van hulptechnologieën of omdat zij door een cognitieve beperking meer tijd nodig hebben om tekst te lezen. Zorg daarom dat er geen tijdslimiet wordt gebruikt. Als het echt niet anders kan, geef bezoekers dan de mogelijkheid om de tijdslimiet aan te passen. Dit kan op één van de volgende manieren:

    • Uitzetten: Laat bezoekers de tijdslimiet uitzetten voordat het begint.
    • Aanpassen: Laat bezoekers de tijdslimiet aanpassen tot ten minste 10 keer de tijdslimiet voordat het begint.
    • Verlengen: Geef bezoekers een waarschuwing voordat de tijd afloopt en geef ze tenminste 20 seconden om de tijdslimiet te verlengen. Laat de bezoeker dit ten minste 10 keer doen.

    Niet bij alle tijdslimieten is het nodig dat deze kan worden uitgezet, aangepast of worden verlengt. Er zijn namelijk een paar uitzonderingen:

    • Real-time: Als de tijdslimiet onderdeel is van een real-time gebeurtenis, zoals het bieden in veiling, en er geen alternatief voor de tijdslimiet mogelijk is.
    • Essentieel: Als de tijdslimiet zelf essentieel is, zoals bij een toets die in een bepaalde tijd moet worden gemaakt, en verlenging de activiteit ongeldig zou maken.
    • Langer dan 20 uur: Als de tijdslimiet langer is dan 20 uur.
  • Vaak moeten in formulieren gegevens worden ingevuld die bij veel andere formulieren ook worden gevraagd. Dit geldt voor veelgevraagde gegevens zoals naam, e-mailadres en telefoonnummer.

    Het doel van een invoerveld kan worden vastgelegd in de code. Hierdoor begrijpen browsers welke gegevens er worden gevraagd. Een browser kan het formulier dan al (deels) automatisch zelf invullen. Dit is handig voor alle bezoekers, maar voor bezoekers met een motorische beperking is dit nog belangrijker. Het invullen van een formulier kan hen veel tijd kosten.

    Gebruik hiervoor het autocomplete-attribuut in de code om het doel van het invoerveld toe te voegen aan het <input>-element.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Het W3C heeft een lijst met 53 doelen van invoer die in de code horen vastgelegd te worden. (https://www.w3.org/TR/WCAG21/#input-purposes).

Media

  • Zorg dat alle bewegende, scrollende of knipperende content dat automatisch start én langer dan 5 seconden duurt kan worden gepauzeerd, gestopt of worden uitgezet. Onder bewegende, scrollende of knipperende content vallen onder andere carrousels, animaties op de pagina, bewegende advertenties, enz. Bezoekers met een cognitieve beperking kunnen er door worden afgeleid. Ook voor bezoekers die gebruik maken van een schermlezer kan dit storend zijn.

    Deze regels gelden ook alle automatisch verversende content, maar hiervoor geldt ook de frequentie van updates mag worden aangepast.

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

  • Laat geluid niet automatisch spelen na het laden van een pagina, of zorg er in elk geval voor dat het geluid niet langer dan 3 seconden duurt. Voor bezoekers die gebruik maken van voorleessoftware kan het storend zijn als geluid automatisch begint te spelen. Zij kunnen de stem van voorleessoftware dan niet meer goed te horen. Ook voor bezoekers die moeite hebben met concentratie kunnen er door worden afgeleid.

    Geluid dat toch automatisch begint te spelen, moet eenvoudig kunnen worden gepauzeerd, gestopt of zachter worden gezet. Zorg dan voor een pauze- of stopknop en een volumeregelaar bij het geluid. Voorzie eventueel ook een skiplink zodat deze bediening gemakkelijk te bereiken is.

    Op de grote videoplatformen kan autoplay worden in- en uitgeschakeld, zet dit bij voorkeur uit.

Navigatie

  • Op veel websites staan blokken content die op iedere pagina worden herhaald. Bijvoorbeeld het logo, het navigatiemenu, het zoekveld, enz. Bezoekers die gebruik maken van een schermlezer, zoals voorleessoftware of een brailleleesregel, en bezoekers die met het toetsenbord navigeren moeten, iedere keer als ze op een pagina komen, bovenaan de pagina beginnen. De inhoud wordt steeds volledig voorgelezen voordat zij uitkomen bij de inhoud op de pagina. Het navigeren duurt zo erg lang.

    Zorg daarom voor een manier dat zorgt dat bezoekers herhalende blokken kunnen overslaan. Dit kan grofweg op 2 manieren worden opgelost:

    1. Voeg skiplinks toe.
    2. Groepeer onderdelen in de code.

    Een skiplink is een ankerlink die verwijst naar een onderdeel lager op de pagina. Hiermee geef je bezoekers de mogelijkheid om sneller bij een pagina-onderdeel te komen. Skiplinks zijn doorgaans niet gelijk zichtbaar, maar worden ze pas zichtbaar als er met het toetsenbord door de pagina wordt genavigeerd.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

    Skiplinks horen het eerste element op een pagina te zijn. Zet ze dus bovenaan in de code en gebruik ze op iedere pagina waarop herhalende blokken staan.

    Groepeer onderdelen in de code

    Herhalende blokken overslaan kan ook door deze onderdelen te groeperen in de code. Hiervoor bestaan meerdere technieken. Door deze onderdelen te groeperen kunnen bezoekers die gebruik maken van hulptechnologieën gemakkelijk over de pagina navigeren. Deze bezoekers kunnen bijvoorbeeld een lijst van alle koppen gebruiken of direct naar een oriëntatiepunt navigeren.

    • Gebruik een kop-element aan het begin van alle blokken op een pagina.
    • Gebruik ARIA landmark-elementen zoals <header>, <main> en <footer> maar ook bijvoorbeeld de navigatie en de zoekfunctie.

    Dit moet wel op iedere pagina op dezelfde manier toegepast worden.

    Let op: Dit is een effectieve manier om blokken met content over te slaan voor bezoekers die gebruik maken van hulptechnologieën. Bezoekers die over de pagina navigeren met alleen het toetsenbord kunnen hier geen voordeel uit halen.

    Zorg ook dat alle <iframe>-elementen een naam hebben zodat ze gemakkelijk overgeslagen kunnen worden. Gebruik hiervoor het title-attribuut. Zorg dat deze beschrijving het onderwerp of doel van het filmpje goed beschrijft.

    In de code ziet dat er zo uit:

    				
    					
    				
    			

  • Webpagina’s moeten op meer dan één manier te vinden zijn. Sommige bezoekers kunnen moeite hebben met het begrijpen van de navigatie op een website, of vinden een bepaalde navigatiemethode makkelijker of sneller.

    Zorg daarom voor meer dan één manier om een pagina op een website te vinden. Bied naast de navigatie bijvoorbeeld ook een zoekfunctie aan, of publiceer een pagina met een sitemap.

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

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

  • Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.

    Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.

Ontwerp

  • Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.

    Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.

  • 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

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

  • 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 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.3 Aanpasbaar
      • 1.3.1 Info en relaties
      • 1.3.5 Identificeer het doel van de input
    • Richtlijn 1.4 Onderscheidbaar
      • 1.4.2 Geluidsbediening
      • 1.4.5 Afbeeldingen van tekst
  • Principe 2. Bedienbaar
    • Richtlijn 2.1 Toetsenbordtoegankelijk
      • 2.1.1 Toetsenbord
      • 2.1.2 Geen toetsenbordval
      • 2.1.4 Enkel teken sneltoetsen
    • Richtlijn 2.2 Genoeg tijd
      • 2.2.1 Timing aanpasbaar
      • 2.2.2 Pauzeren, stoppen, verbergen
    • Richtlijn 2.3 Toevallen en fysieke reacties
      • 2.3.1 Drie flitsen of beneden drempelwaarde
    • Richtlijn 2.4 Navigeerbaar
      • 2.4.1 Blokken omzeilen
      • 2.4.2 Paginatitel
      • 2.4.4 Linkdoel (in context)
      • 2.4.5 Meerdere manieren
      • 2.4.6 Koppen en labels
    • Richtlijn 2.5 Input Modaliteiten
      • 2.5.1 Aanwijzergebaren
      • 2.5.3 Label in naam
      • 2.5.4 Bewegingsactivering
  • 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.1 Bij focus
      • 3.2.3 Consistente navigatie
      • 3.2.4 Consistente identificatie
    • Richtlijn 3.3 Assistentie bij invoer
      • 3.3.1 Fout identificatie
      • 3.3.2 Labels of instructies
      • 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)
  • Principe 4. Robuust
    • Richtlijn 4.1 Compatibel
      • 4.1.2 Naam, rol, waarde
      • 4.1.3 Statusberichten