Techniek

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

  • Geluid op een pagina dat automatisch begint af te spelen, moet eenvoudig kunnen worden gepauzeerd, gestopt of zachter worden gezet. Bezoekers kunnen er door worden afgeleid of krijgen er moeite om zich te concentreren. Voor bezoekers die gebruik maken van voorleessoftware is de voorleesstem niet meer goed te horen.

    Laat geluid (bij voorkeur) niet automatisch afspelen na het laden van een pagina. Als er toch wordt gekozen om geluid automatisch af te laten spelen, zorg er dan voor dat het geluid niet langer dan 3 seconden duurt of eenvoudig kan worden bediend. Voorzie bijvoorbeeld een knop bovenaan de pagina met een duidelijk label, of voorzie een skiplink direct naar het mediabestand.

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

    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:

  • 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 tekstueel alternatief 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 tekstueel alternatief doorgaans worden toegevoegd in de mediatheek.

    In de code ziet dat er zo uit:

    Het tekstuele alternatief moet een goede vervanging kunnen geven voor een afbeelding. Bedenk bij het schrijven van het tekstueel alternatief altijd wat de bedoeling is van de afbeelding. Houd een tekstueel alternatief altijd nuttig en beknopt.

  • Op veel websites staan blokken die op iedere pagina terugkomen. Bijvoorbeeld het logo, de navigatie, het zoekveld, enz. Bezoekers die gebruik maken van hulptechnologieën, 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 dat bezoekers herhalende blokken kunnen overslaan. Bijvoorbeeld door bovenaan elke pagina een skiplink toe te voegen die direct naar de hoofdinhoud verwijst, of door een skiplink toe te voegen van het begin van een blok met herhalende inhoud naar het einde van het blok.

    Dit kan op twee manieren worden opgelost:

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

    Herhalende blokken overslaan kan met skiplinks. Een skiplink is een ankerlink die verwijst naar een onderdeel lager op de pagina. Hiermee geef je bezoekers de mogelijkheid om sneller bij de inhoud te komen. Skiplinks zijn doorgaans niet 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 het 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.

    Zorg ook dat alle <iframe>-elementen een naam hebben zodat ze gemakkelijk overgeslagen kunnen worden. Gebruik hiervoor het title-attribuut.

  • Sommige bezoekers hebben moeite met het begrijpen van de navigatie op een website, of vinden een bepaalde navigatiemethode makkelijker of sneller. Bied daarom meer dan één manier om een pagina op een website te vinden. Bijvoorbeeld door ook een zoekfunctie aan te bieden, of pagina met een sitemap.

  • Schrijf een linktekst waaruit het doel van de link duidelijk is af te leiden. Linkteksten die duidelijk beschrijven waar ze naartoe verwijzen kunnen beter worden gebruikt door bezoekers die gebruik maken van hulptechnologieën zoals voorleessoftware of een brailleleesregel. Het helpt bezoekers om over de website te navigeren. Bezoekers die gebruik maken van hulptechnologieën kunnen een lijst van links op de pagina gebruiken.

    Een duidelijke link beschrijft nauwkeurig en zo beknopt mogelijk wat het doel is van de link. Wees daarom voorzichtig met links met de inhoud “klik hier” of “lees meer”. Zonder de omliggende tekst is het niet duidelijk waar de link naar verwijst. Een te lange linktekst is ook niet handig voor bezoekers die gebruik maken van hulptechnologieën.

    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 tekstueel alternatief dat beschrijft waar de link naar verwijst. Als er een afbeelding én een tekst gebruikt worden met allebei dezelfde link, 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.

    Een link mag nooit leeg zijn. Een lege link is visueel misschien niet waar te nemen maar hulptechnologieën en toetsenbordnavigatie komen deze link wel tegen.

    Als het niet mogelijk is om een duidelijke linktekst te geven aan een link, dan zijn er nog een paar andere opties:

    • Zorg dat het doel van de link duidelijk wordt uit de direct omringende tekst van de link:
    • Gebruik CSS om een deel van de linktekst te verbergen:
    • Gebruik ARIA-attributen om het doel van de link te beschrijven:

    Als CSS wordt gebruikt om een deel van de linktekst te verbergen of als ARIA-attributen worden gebruikt om het doel van de link te beschrijven dan kunnen alleen bezoekers die gebruik maken van hulptechnologieën de hele linktekst waarnemen.

  • Soms is het niet mogelijk om een afbeelding volledig te beschrijven in een kort tekstueel alternatief. Bijvoorbeeld als het gaat om een uitgebreide infographic of een grafiek. Dit soort complexe afbeeldingen moeten ook volledig worden beschreven in een tekstueel alternatief. 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 tekstueel alternatief hebben dat het doel van de link beschrijft, of die beschrijft wat er gebeurd als op de afbeelding wordt geklikt. Voorleessoftware gebruikt het tekstuele alternatief 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 tekstueel alternatief worden vermeld. Hierdoor kunnen bezoekers die met spraakherkenning werken de link ook makkelijk bereiken.

  • Afbeeldingen die alleen ter decoratie op de pagina zijn geplaatst, horen geen tekstueel alternatief 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.

  • Afbeeldingen van tekst moeten niet worden gebruikt tenzij het echt niet anders kan. Het is toegankelijker om echte tekst te gebruiken en deze tekst met CSS vorm te geven. Met CSS kan tekst ook goed worden vormgegeven, zo kan bijvoorbeeld de kleur, de grootte, het lettertype, de spatiëring en de regelafstand worden ingesteld.

  • Bewegende plaatjes en knipperende onderdelen moeten eenvoudig kunnen worden gepauzeerd, gestopt of worden verborgen. Bezoekers met een cognitieve beperking kunnen er door worden afgeleid. Bijvoorbeeld voor bezoekers die moeite hebben met concentratie.

    Laat plaatjes en knipperende onderdelen niet langer duren dan 5 seconden. De richtlijnen houden deze vijf seconden aan omdat content in deze 5 seconden wel de aandacht kan trekken, maar niet lang genoeg duurt om een bezoeker af te leiden of te belemmeren bij het gebruik van de website.

  • Laat onderdelen 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 filmpjes.

  • 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 dit in tekst worden aangegeven. Benoem in de tekst de naam van het veld dat verkeerd in ingevuld. Zo weet de bezoeker om welk formulierveld het gaat. Schrijf dus niet:

    • Dit veld is verplicht.

    Maar schrijf:

    • Het veld ‘Telefoonnummer’ mag niet leeg zijn.

    Deze tekst kan worden aangevuld met andere visuele aanwijzingen, zoals een andere kleur of een icoon.

    Geef in de foutmelding ook aan wat er precies fout is en geef, als dat kan, suggesties hoe dit kan worden verbeterd. Wees hierin zo specifiek mogelijk zodat de bezoeker niet alleen weet dát er een fout is, maar ook hoe hij deze kan oplossen. Bij veel invoervelden is al bekend in welk formaat het ingevuld moet worden. Zo bestaat een telefoonnummer in Nederland uit 10 cijfers. Een goede foutmelding bestaat dan uit de mededeling dat het veld ‘telefoonnummer’ niet juist is ingevuld, en dat een telefoonnummer uit 10 cijfers bestaat.

    Enkele voorbeelden:

    • Datum bestaat in de vorm dd-mm-jjjj.
    • IBAN begint met 2 letters, 2 cijfers, 4 letters.
    • Postcode bestaat uit 4 cijfers en 2 letters.
    • Telefoonnummer bestaat uit 10 cijfers.
    • URL begint met http:// of https://.

    Geboortedatum is niet juist ingevuld. Gebruik het formaat dd-mm-jjjj.

    Het veld ‘Telefoonnummer’ is niet juist ingevuld. Een telefoonnummer bestaat uit 10 cijfers.

    Koppel foutmeldingen in de code aan het invoerveld

    Om verwarring te voorkomen bij bezoekers die gebruik maken van hulptechnologieën moet een foutmelding ook in de code worden gekoppeld aan het bijbehorende invoerveld. Gebruik hiervoor het attribuut aria-describedby.

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

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

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

  • Door een goede paginatitel te gebruiken kunnen bezoekers gemakkelijk een pagina terugvinden. De titel van een pagina wordt getoond in het venster van de browser of in het tabblad van de pagina. Voor bezoekers die gebruik maken van hulptechnologieën is een duidelijke en beschrijvende titel ook belangrijk. Deze informatie wordt aan hen als eerste gepresenteerd bij het openen van een pagina. Met een paginatitel die het onderwerp of doel van de pagina beschrijft, kunnen zij zich snel oriënteren over de inhoud van de pagina.

    Houd een paginatitel altijd nuttig en zo beknopt als mogelijk. Een titel hoort uniek te zijn en te vernieuwen als de URL van de pagina verandert.

    De paginatitel kan vaak per pagina in het CMS ingesteld worden.

    Gebruik het title-element in de <head> in de code om de paginatitel in te stellen.

    In de code ziet dat er zo uit:

  • De taal van de pagina moet in de code worden aangegeven. Door de juiste taal in te stellen, kan voorleessoftware de pagina goed voorlezen. Als er geen taal wordt aangegeven in de code, dan zal voorleessoftware de pagina lezen in de standaardtaal die een bezoeker heeft ingesteld. Dit is niet altijd de juiste taal, daarom is het veiliger om de taal zelf te markeren.

    De standaard taal van de pagina moet vaak 1 keer in het CMS ingesteld worden.

    Gebruik het lang-attribuut op het <html>-element om de taal in te stellen.

    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"), etc.

    Bekijk alle taalcodes op: https://www.w3schools.com/tags/ref_country_codes.asp

  • Voor de oriëntatie op een pagina is het prettig om de vaste pagina-onderdelen telkens in dezelfde volgorde te tonen. Dit helpt alle bezoekers met het navigeren over de website en het vinden van informatie op een pagina. Het is belangrijk voor de toegankelijkheid van de website dat deze volgorde niet alleen in de vormgeving hetzelfde blijft, maar ook in de broncode.

    Per pagina mogen wel onderdelen worden weggelaten of worden toegevoegd.

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

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

    Tekstueel alternatief voor een <img>-element

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

    In de code ziet dat er zo uit:

    Tekstueel alternatief voor een <svg>-element

    Bij een <svg>-element wordt een tekstueel alternatief 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:

    Tekstueel alternatief voor afbeeldingen die is geplaatst met CSS

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

    In de code ziet dat er zo uit:

    Invulling van het tekstueel alternatief

    De invulling van een tekstueel alternatief wordt bepaald door de functie die een afbeelding heeft. In veel gevallen draagt een afbeelding informatie over. Beschrijf dan in het tekstueel alternatief 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 tekstueel alternatief te geven zodat het kan worden genegeerd door hulptechnologieën.

E-mail ons

info@wcag.nl

Bel ons

085 - 80 81 814

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
    • Richtlijn 3.2 Voorspelbaar
      • 3.2.1 Bij focus
      • 3.2.3 Consistente navigatie
    • Richtlijn 3.3 Assistentie bij invoer
      • 3.3.1 Fout identificatie
      • 3.3.2 Labels of instructies
      • 3.3.3 Foutsuggestie
      • 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)
  • Principe 4. Robuust
    • Richtlijn 4.1 Compatibel
      • 4.1.2 Naam, rol, waarde
      • 4.1.3 Statusberichten