PricingLoginStart free
Web Accessibility Academy logo
HTMLWebNiveaus A1 → B222 talen

Web Accessibility Academy

Bouw inclusieve websites die iedereen kan gebruiken. Leer semantische HTML, ARIA, ondersteuning voor toetsenbord en schermlezers en voldoen aan WCAG 2.2. Een CoddyKit-leertraject met 30 korte cursussen en 120 interactieve lessen, met een AI-tutor die 24/7 voor je klaarstaat.

Cursussen
30
Lessen
120
Interactieve stappen
1,560
Gratis beginnen
Cursus 1
Lesprogramma

30 cursussen in dit leertraject

Elke cursus in het leertraject Web Accessibility Academy, in de juiste leer volgorde. De eerste is gratis.

1

A14 lessenGratis

Leg uit wie baat heeft bij toegankelijkheid en wat de zakelijke en ethische argumenten zijn om inclusief te bouwen.

  1. 1Hoe een beperking er op het web echt uitziet
  2. 2Maak kennis met de gebruikers: blind, slechtziend, doof, motorisch, cognitief
  3. 3Assistive tech 101: screenreaders, switches, loepen
  4. +1 meer
Gratis beginnen met leren
2

A14 lessenPRO

Pas de vier WCAG-principes toe om te beoordelen of een pagina toegankelijk is.

  1. 1Waarneembaar: kan iedereen de content waarnemen?
  2. 2Bedienbaar: kan iedereen de bediening gebruiken?
  3. 3Begrijpelijk: is het leesbaar en voorspelbaar?
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
3

A14 lessenPRO

Kies betekenisvolle elementen zodat de pagina toegankelijk is voordat u ook maar één attribuut toevoegt.

  1. 1Tags hebben betekenis: waarom div-soep faalt
  2. 2Tekstelementen: alinea's, lijsten en nadruk
  3. 3De accessibility tree: wat screenreaders horen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
4

A14 lessenPRO

Bouw een logische koppenstructuur waarin gebruikers van schermlezers kunnen navigeren.

  1. 1Eén h1 per pagina: het hoofdonderwerp benoemen
  2. 2Niveaus nesten zonder over te slaan
  3. 3Koppen zijn navigatie, niet alleen grote tekst
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
5

A14 lessenPRO

Gebruik landmarkgebieden zodat gebruikers direct naar het benodigde onderdeel kunnen springen.

  1. 1header, nav, main, footer: de vier grote elementen
  2. 2Content in main plaatsen, en slechts één main
  3. 3Meerdere regio's benoemen met aria-label
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
6

A24 lessenPRO

Schrijf alternatieve teksten voor afbeeldingen die betekenis overbrengen in plaats van ruis toe te voegen.

  1. 1Informatief versus decoratief: de eerste beslissing
  2. 2Alt-tekst schrijven die het doel overbrengt, niet de pixels
  3. 3Lege alt en de verborgen decoratieve afbeelding
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
7

A24 lessenPRO

Kies het juiste interactieve element zodat gedrag en semantiek overeenkomen.

  1. 1Links brengen u ergens heen, buttons doen iets
  2. 2Linktekst die ook buiten de context begrijpelijk is
  3. 3Buttons die aankondigen wat ze doen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
8

A24 lessenPRO

Bouw formulieren waarin elk besturingselement een naam heeft en eenvoudig te bedienen is.

  1. 1Elke invoer heeft een echte label nodig
  2. 2Een placeholder is geen label
  3. 3Velden groeperen met fieldset en legend
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
9

A24 lessenPRO

Zorg dat tekst en UI voldoende opvallen voor slechtziende en kleurenblinde gebruikers.

  1. 1Waarom contrastverhoudingen bestaan
  2. 2AA halen: drempelwaarden voor tekst en grote tekst
  3. 3Vertrouw nooit alleen op kleur
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
10

A24 lessenPRO

Maak elke interactie bereikbaar en zichtbaar met alleen het toetsenbord.

  1. 1Tab, Shift+Tab, Enter, spatie: de belangrijkste toetsen
  2. 2Zichtbare focus: verberg de omtrek nooit
  3. 3Een logische tabvolgorde volgt de content
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
11

B14 lessenPRO

Gebruik ARIA correct om betekenis toe te voegen die native HTML niet kan uitdrukken.

  1. 1De eerste regel: geen ARIA is beter dan slechte ARIA
  2. 2Rollen bepalen wat iets is
  3. 3Statussen en eigenschappen: expanded, checked, disabled
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
12

B14 lessenPRO

Bepaal precies wat ondersteunende technologie voor elk element aankondigt.

  1. 1De berekening van de toegankelijke naam ontrafeld
  2. 2aria-label versus aria-labelledby
  3. 3aria-describedby voor extra context
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
13

B14 lessenPRO

Verplaats en beperk de focus zodat dynamische interfaces bruikbaar blijven.

  1. 1tabindex 0, -1 en nooit positief
  2. 2De focus verplaatsen na een actie
  3. 3De focus terugzetten wanneer een laag sluit
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
14

B14 lessenPRO

Laat toetsenbordgebruikers herhaalde inhoud overslaan naar wat belangrijk is.

  1. 1Waarom ‘Naar hoofdinhoud’ bestaat
  2. 2Een skiplink bouwen die echt werkt
  3. 3Visueel verborgen tot de focus erop komt
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
15

B14 lessenPRO

Meld formulierfouten zodat elke gebruiker ze kan vinden en oplossen.

  1. 1Fouten aan velden koppelen met aria-describedby
  2. 2De ongeldige status markeren met aria-invalid
  3. 3De focus naar de eerste fout verplaatsen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
16

B14 lessenPRO

Markeer tabellen zo dat de relatie tussen cellen en koppen duidelijk is.

  1. 1th, scope en het caption-element
  2. 2Rij- en kolomkoppen correct gebruiken
  3. 3Complexe tabellen: headers en id koppelen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
17

B14 lessenPRO

Maak betekenisvolle afbeeldingen beschikbaar en verberg puur decoratieve afbeeldingen.

  1. 1Inline SVG: role img en een title
  2. 2Decoratieve pictogrammen verbergen met aria-hidden
  3. 3Pictogramknoppen die toch een naam hebben
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
18

B14 lessenPRO

Bouw dialogen die de focus vasthouden, netjes sluiten en zichzelf aankondigen.

  1. 1Dialoogrollen en het native dialog-element
  2. 2De focus binnen de modal vasthouden
  3. 3Sluiten met Escape en de focus herstellen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
19

B14 lessenPRO

Implementeer veelgebruikte disclosure-widgets met de juiste ARIA en toetsen.

  1. 1Het tabbladenpatroon: tablist, tab, tabpanel
  2. 2Met pijltoetsen tussen tabbladen navigeren
  3. 3Accordeons met Button en aria-expanded
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
20

B14 lessenPRO

Test uw eigen werk zoals blinde gebruikers het daadwerkelijk ervaren.

  1. 1NVDA, VoiceOver en TalkBack inschakelen
  2. 2De belangrijkste gebaren en sneltoetsen
  3. 3Bladermodus versus focusmodus
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
21

B24 lessenPRO

Koppel echte succescriteria aan concrete oplossingen voor een AA-conforme website.

  1. 1A, AA, AAA: het juiste doel kiezen
  2. 2De toevoegingen van 2.2: focusweergave en doelgrootte
  3. 3Sleepbewegingen en toegankelijke authenticatie
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
22

B24 lessenPRO

Houd singlepage-apps toegankelijk ondanks client-side routing en opnieuw renderen.

  1. 1Routewijzigingen zonder pagina opnieuw te laden
  2. 2Focus beheren met refs en useEffect
  3. 3Fragments, Portals en de valkuil van de DOM-volgorde
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
23

B24 lessenPRO

Breng schermlez gebruikers op de hoogte van wijzigingen die zonder herladen plaatsvinden.

  1. 1polite versus assertive: urgentie kiezen
  2. 2De rollen status, alert en log
  3. 3Toasts, laders en aantallen aankondigen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
24

B24 lessenPRO

Bouw robuuste aangepaste widgets door bewezen APG-patronen te volgen.

  1. 1De APG lezen: patronen, toetsen en voorbeelden
  2. 2Combobox en autocomplete correct bouwen
  3. 3Menu, menubalk en menuknop
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
25

B24 lessenPRO

Respecteer bewegingsvoorkeuren en voorkom dat u ongemak of epileptische aanvallen veroorzaakt.

  1. 1prefers-reduced-motion in CSS en JS
  2. 2Vestibulaire aandoeningen en risico’s van parallax
  3. 3De drempel van drie flitsen voor aanvallen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
26

B24 lessenPRO

Maak grafieken en diagrammen waarneembaar zonder uitsluitend op kleur en vorm te vertrouwen.

  1. 1Elke grafiek heeft een tekstequivalent nodig
  2. 2De fallback voor datatabellen
  3. 3Kleur, patroon en directe labels
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
27

B24 lessenPRO

Detecteer automatisch een categorie toegankelijkheidsbugs in uw pipeline.

  1. 1Wat automatisering wel en niet kan detecteren
  2. 2Scannen met axe DevTools en Lighthouse
  3. 3axe-core koppelen aan Playwright-tests
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
28

B24 lessenPRO

Voer een gestructureerde handmatige audit uit en geef prioriteit aan belangrijke oplossingen.

  1. 1Een handmatige auditworkflow bouwen
  2. 2Ernst en impact prioriteren
  3. 3Bugrapporten schrijven waar ontwikkelaars mee aan de slag kunnen
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
29

B24 lessenPRO

Begrijp de wetten en standaarden die toegankelijkheid op de roadmap zetten.

  1. 1ADA, Section 508 en Amerikaanse rechtszaken over websites
  2. 2De European Accessibility Act en EN 301 549
  3. 3WCAG als gemeenschappelijke wettelijke maatstaf
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
30

B24 lessenPRO

Veranker toegankelijkheid in uw team, zodat deze ook na één project blijft bestaan.

  1. 1Shift left: a11y in ontwerp en tickets
  2. 2Een Definition of Done inclusief a11y
  3. 3Een praktische toegankelijkheidschecklist per functie
  4. +1 meer
Gratis beginnen met lerenOntgrendelen met PRO
CoddyKit PRO

Ontgrendel alle 30 cursussen in dit leertraject en in elk ander leertraject

AI-begeleider, certificeringsexamen en certificaat. Werkt op het web, iOS en Android.

Alle abonnementen bekijken
Jaarlijks$29.90 per jaarOngeveer $2.49 per maandEenmalig betalenLevenslang$69.99 eenmaligGeen verlengingen. PRO voor altijd.
Cursusoverzicht

Webtoegankelijkheid (a11y): bouw voor iedereen

Bouw inclusieve websites die iedereen kan gebruiken. Leer semantische HTML, ARIA, ondersteuning voor toetsenbord en schermlezers en voldoen aan WCAG 2.2. Dit leertraject omvat 30 oplopende minicursussen, van absolute beginner (A1) tot gevorderd (B2), met korte, gerichte lessen en snelle quizzen om elk concept goed onder de knie te krijgen.

Wat je leert

Je begint met de basis en werkt toe naar onderwerpen voor gemiddeld en gevorderd niveau, waarbij elke cursus voortbouwt op de vorige. Elke les is praktisch en kort en er is 24/7 een AI-tutor beschikbaar wanneer je hulp nodig hebt.

Zo werkt het

Elke cursus bestaat uit vier korte, gerichte lessen. Volg elke dag een paar lessen en je beheerst het volledige leertraject in weken, niet maanden.

Hulpmiddelen

Oefen met AI in plaats van alleen te lezen

Geef je leerproces een boost met AI-hulpmiddelen en -functies

AI-chatChat met een AI-docentStel een supervraagKrijg antwoorden op expertniveauPROLes makenAI-gestuurde lessenbouwerPROStart het certificeringsexamenBehaal je certificaatPROStart de uitdagingTest je vaardigheden

Zo leer je

  1. 01

    Interactieve lessen

    Praktische codeeroefeningen met realtime feedback

  2. 02

    AI-docent

    Krijg direct hulp van onze AI als je vastloopt

  3. 03

    Ingebouwde editor

    Schrijf en voer code direct uit in je browser

  4. 04

    Certificaat

    Behaal een certificaat wanneer je de cursus afrondt

Verder ontdekken

Gerelateerde leertrajecten

Angular Academy logoAngular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Frontend Academy logoFrontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.HTML for Kids logoHTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.HTML Academy logoHTML AcademyBuild strong foundations in web development by learning HTML at HTML Academy.Micro Frontends Architecture with Module Federation logoArchitectuur van micro-frontends met Module FederationMaster Micro Frontends architecture using Module Federation to build scalable and indepen…Vue Academy logoVue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.
FAQ

Veelgestelde vragen

Is de Web Accessibility Academy-cursus gratis?

Ja. Je kunt gratis aan de Web Accessibility Academy-cursus beginnen en de interactieve lessen kosteloos doorlopen. Met een optioneel PRO-abonnement krijg je toegang tot geavanceerde AI-tools en een deelbaar certificaat.

Heb ik voorafgaande ervaring nodig om HTML te leren?

Nee. De cursus begint bij de basis en behandelt geleidelijk steeds geavanceerdere onderwerpen. Je kunt dus ook zonder eerdere ervaring met HTML beginnen.

Hoe leer ik HTML op CoddyKit?

Je leert door te doen. Korte interactieve lessen combineren een duidelijke uitleg met een praktische codeeroefening die in realtime wordt uitgevoerd. Een AI-begeleider is 24/7 beschikbaar voor persoonlijke hulp wanneer je vastloopt.

Krijg ik een certificaat als ik Web Accessibility Academy afrond?

Ja. PRO-leerlingen kunnen een examen afleggen en een deelbaar certificaat van voltooiing behalen, met een verifieerbare code voor de Web Accessibility Academy-cursus.

Kan ik HTML op mijn telefoon leren?

Ja. CoddyKit is beschikbaar op het web en als native iOS- en Android-app, zodat je HTML op elk apparaat kunt leren en je voortgang op al je apparaten wordt gesynchroniseerd.

Wat kost CoddyKit PRO?

De eerste cursus van Web Accessibility Academy is gratis. Met CoddyKit PRO ontgrendel je elke cursus: $5.90 per week, $7.90 per maand, $29.90 per jaar of eenmalig $69.99 voor levenslange toegang zonder verlengingen.

Hoe lang duurt het om Web Accessibility Academy te voltooien?

Web Accessibility Academy bevat 30 cursussen en 120 lessen. De meeste lessen duren ongeveer 5–10 minuten, dus het hele leertraject kost ongeveer 14 uur aan praktische oefeningen, in je eigen tempo.

Begin nu met Web Accessibility Academy

Sluit je aan bij duizenden leerlingen die met AI-ondersteunde lessen leren programmeren.

Gratis beginnen met lerenBekijk alle cursussen