edubun
Nederlands
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
Home›Websites maken

Webtoegankelijkheid

Zes hoofdstukken over pagina's bouwen die werken voor mensen met schermlezers, toetsenborden, zoom of hoog contrast. Elk hoofdstuk volgt de behandelde succescriteria van WCAG 2.2 en heeft live HTML-oefeningen die je code controleren, flitskaarten en 9 of 10 oefenvragen met uitleg.

Voortgang

Over deze cursus

Een decoratieve krul en een verkoopdiagram gebruiken allebei img. Toch is de juiste alt-tekst voor de krul een lege string en voor het diagram een volledige zin. Dat kleine verschil vat het onderwerp samen: dezelfde markup vraagt een ander antwoord afhankelijk van wie leest en hoe. Je leert pagina's maken voor mensen met schermlezers, toetsenborden, zoom of hoog contrast. Elk hoofdstuk volgt de behandelde succescriteria van WCAG 2.2.

De zes hoofdstukken gaan van inhoud naar gedrag. Eerst alt-tekst, dan koppenstructuur en oriëntatiepunten: een pagina zonder h2-elementen leest als een boek zonder hoofdstukken. Bij kleurcontrast begint het lab met lichtgrijs #999999 op wit, 2.85:1. Verlaag Lichtheid en zie de verhouding voorbij 4.5:1 voor gewone tekst gaan en daarna 7:1. Bij toetsenbordgebruik leg je de muis weg en druk je op Tab. Bij formulierlabels leer je dat een tekstvak naast Email pas een label heeft als het label-element eraan is gekoppeld. Tot slot schermlezers en de eerste ARIA-regel: vermijd ARIA als een native element zoals button al voldoet. Elk hoofdstuk heeft directe HTML-oefeningen die je code controleren, flitskaarten en 9 of 10 vragen met uitleg.

Een fout die je leert corrigeren is een div of span de rol button geven terwijl een echte button al met toetsenbord en schermlezer werkt, zonder extra code.

Voor je begint

Je werkt bij de oefeningen met live HTML. Daarom moet je elementen, attributen en formulieren kunnen schrijven, zoals je leert in HTML. Het hoofdstuk over contrast gaat over tekst- en achtergrondkleuren, wat begrijpelijker is na CSS. In één hoofdstuk leg je de muis weg en beweeg je met Tab door een pagina.

Als je klaar bent

Je kunt na afloop passende alt-tekst schrijven voor een decoratieve krul en voor een verkoopdiagram, een koppenstructuur en oriëntatiepunten maken waarmee een schermlezer kan springen en controleren dat #999999 op wit niet voldoet aan 4.5:1. Je kunt een pagina met alleen het toetsenbord testen, elk veld aan een label koppelen en de eerste ARIA-regel volgen door een echte knop te gebruiken.

  1. 1Alternatieve tekst voor afbeeldingenEen decoratieve krul en een verkoopgrafiek gebruiken allebei het img-element, maar de juiste alt-tekst is voor de eerste een lege string en voor de tweede een volledige zin.
  2. 2Koppenstructuur en landmarksEen gebruikelijke manier om met een schermlezer een pagina te lezen is van kop naar kop springen. Een pagina zonder h2-elementen leest dus als een boek zonder hoofdstukken.
  3. 3KleurcontrastLichtgrijs #999999 op wit heeft een contrastverhouding van 2.85:1, ver onder de 4.5:1 die WCAG 2.2 voor lopende tekst vraagt.
  4. 4Een pagina met het toetsenbord gebruikenKoppel de muis los en druk op Tab: elke link, knop en elk veld moet om beurten oplichten, in de leesvolgorde van de pagina.
  5. 5FormulierlabelsEen tekstvak naast het woord ‘E-mail’ heeft pas een label als het label-element eraan gekoppeld is; tot dan zegt een schermlezer mogelijk alleen ‘tekst bewerken’.
  6. 6Schermlezers en de eerste ARIA-regelDe eerste ARIA-regel is ARIA vermijden: als een oorspronkelijk HTML-element zoals button de taak al doet, gebruik dat dan in plaats van een rol aan een div toe te voegen.

Verwante cursussen

  • HTML
    Tien eenheden over het met de hand schrijven van webpagina's, van het skelet dat elke pagina deelt tot een kleine afgeronde pagina met een menu, een afbeelding, een tabel en een formulier. Elke eenheid heeft een live-editor die je pagina laat zien terwijl je typt en hem controleert, plus flitskaarten en 9 tot 11 oefenvragen met uitleg.
  • CSS
    Negen hoofdstukken over het vormgeven van webpagina's met CSS, van de opbouw van één regel tot een complete pagina die zich op een telefoon opnieuw indeelt. Elk hoofdstuk heeft een live-editor die de berekende stijlen van je pagina controleert, plus flitskaarten en 9 tot 11 oefenvragen met uitleg.
  • Hoe computers werken · Computerbasis en typen
    Een computer bewaart alles, van foto's tot programma's, als patronen van 0 en 1 en bewerkt die met kleine schakelaars. Zes hoofdstukken bouwen van onderaf op: binaire getallen, bytes en tekst, logische poorten, optellen met poorten, de cyclus ophalen, decoderen en uitvoeren van de CPU en het geheugen. Je kunt bits omschakelen, poorten verbinden, overdrachten door een opteller zien lopen en een kleine computer per fase door zijn programma laten gaan.
  • JavaScript · Programmeren
    Twaalf hoofdstukken voor complete beginners, van een eerste console.log-regel tot een fooiencalculator en FizzBuzz. Elk hoofdstuk heeft code die je op de pagina kunt bewerken en uitvoeren, oefeningen die je uitvoer controleren, flitskaarten voor de termen en 10 tot 12 vragen ‘Wat drukt deze code af?’ met uitleg.
Bronnen van deze cursus (8)
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation first published 5 October 2023, current edition 12 December 2024 (w3.org/TR/WCAG22/, checked 2026-10-17)
  • W3C WAI, What's new in WCAG 2.2 (w3.org/WAI/standards-guidelines/wcag/new-in-22/, checked 2026-10-17)
  • W3C WAI, Images tutorial and alt decision tree (w3.org/WAI/tutorials/images/decision-tree/, checked 2026-10-17)
  • W3C, Using ARIA (w3.org/TR/using-aria/, Discontinued Draft 24 February 2026, rules 1 to 4, checked 2026-10-17)
  • W3C WAI-ARIA Authoring Practices Guide, Read Me First, "No ARIA is better than bad ARIA" (w3.org/WAI/ARIA/apg/practices/read-me-first/, checked 2026-10-17)
  • MDN Web Docs, tabindex (developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex, checked 2026-10-17)
  • MDN, Heading elements, accessibility notes (developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements, checked 2026-10-17)
  • MDN, autocomplete attribute (developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete, checked 2026-10-17).

Geraadpleegd: 2026-10-17