Basiskennis

Stel: je bent een nieuw deel van een website aan het maken. Hoe zorg je dat deze vanaf het begin al toegankelijk is? Als je deze stappen onder de knie hebt doe je dit al snel vanzelf en kost het geen extra moeite meer 😊

Belangrijk

  1. Zorg dat je op de hoogte bent van de richtlijnen (WCAG 2.2)
  2. Zorg dat je alle HTML elementen kent (voor structuur van de pagina, lijsten, interactieve elementen etc.) en basis ARIA
  3. Ken de basisregels die staan bij CSS & design
  4. Test altijd zelf je code door de ogen én oren van een gebruiker

Wist je dat?

  1. Als je tijdens het programmeren op toetsenbord navigatie focust, je vaak niks (of bijna niks) hoeft te doen om het met de muis te laten werken? Focus daarom altijd eerst op toetsenbord navigatie 😉
  2. Toegankelijke HTML goed is voor SEO? Niet alleen tools van gebruikers begrijpen je website beter, maar ook zoekmachines
  3. De meeste plugins/frameworks niet toegankelijk zijn? Plugins voor bijvoorbeeld pop-ups, sliders, etc. Er zijn wel vaak toegankelijke alternatieven. Zelf programmeren blijft vaak de beste optie.

Programmeren

  1. Schrijf eerst je semantische HTML met de juiste elementen.
    • Test dit door met toetsenbordnavigatie te testen.
    • Doe je ogen dicht 😌 en doe alsof je de pagina voor het eerst bezoekt. Snap je de structuur van de pagina goed en de interacties?
  2. Voeg daarna pas je (toegankelijke) CSS toe.
    • Test dit door te zoomen tot 400%: 320px hoog en 256px breed (WCAG richtlijn).
    • Test door de lettergrootte aan te passen in de browserinstellingen.
    • Test dit door animaties in/uit te schakelen in je instellingen.
    • Test of toetsenbord focus nog werkt op alle elementen en zichtbaar is.
  3. Accessibility tree.
    • Maak je een artikel? Test dit met de insluitende lezer in Edge.
    • Check de headings tree.
    • Check de accessibility tree handmatig met een schermlezer of in devtools.