HTML- toegankelijkheid
HTML-toegankelijkheid
Schrijf HTML-code altijd met het oog op toegankelijkheid!
Bied de gebruiker een goede manier om door uw site te navigeren en ermee om te gaan. Maak uw HTML-code zo semantisch mogelijk.
Semantische HTML
Semantische HTML betekent zoveel mogelijk correcte HTML-elementen gebruiken voor het juiste doel. Semantische elementen zijn elementen met een betekenis; als je een knop nodig hebt, gebruik dan het <button>element (en niet een
<div>element).
semantisch
<button>Report an Error</button>
niet-semantisch
<div>Report an Error</div>
Semantische HTML geeft context aan schermlezers, die de inhoud van een pagina hardop voorlezen.
Met het knopvoorbeeld in gedachten:
- knoppen hebben standaard een meer geschikte stijl
- een schermlezer identificeert het als een knop
- focusseerbaar
- klikbaar
Een knop is ook toegankelijk voor mensen die afhankelijk zijn van navigatie met alleen toetsenbord; het kan klikbaar zijn met zowel de muis als de toetsen, en het kan tussen tabs worden geklikt (met de tab-toets op het toetsenbord).
Voorbeelden van niet-semantische elementen: <div>en <span>- Zegt niets over de inhoud ervan.
Voorbeelden van semantische elementen: <form>, <table>, en <article>- Definieert duidelijk de inhoud.
Koppen zijn belangrijk
Koppen worden gedefinieerd met de <h1>to <h6>-tags:
Voorbeeld
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Zoekmachines gebruiken de koppen om de structuur en inhoud van uw webpagina's te indexeren.
Gebruikers skimmen uw pagina's door de koppen. Het is belangrijk om koppen te gebruiken om de documentstructuur en de relaties tussen verschillende secties weer te geven.
Schermlezers gebruiken koppen ook als navigatiehulpmiddel. De verschillende soorten koppen geven de omtrek van de pagina aan.
<h1>koppen moeten worden gebruikt voor hoofdkoppen, gevolgd door <h2>koppen, dan de minder belangrijke koppen,
<h3>enzovoort.
Opmerking: gebruik HTML-koppen alleen voor koppen. Gebruik geen koppen om tekst GROOT of vet te maken .
alternatieve tekst
Het altattribuut biedt een alternatieve tekst voor een afbeelding als de gebruiker deze om de een of andere reden niet kan zien (vanwege een trage verbinding, een fout in het
src
attribuut of als de gebruiker een schermlezer gebruikt).
De waarde van het altattribuut moet de afbeelding beschrijven:
Voorbeeld
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Als een browser een afbeelding niet kan vinden, wordt de waarde van het alt
kenmerk weergegeven:
Voorbeeld
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Verklaar de taal
U moet het lang
attribuut altijd in de <html>tag opnemen om de taal van de webpagina aan te geven. Dit is bedoeld om zoekmachines en browsers te helpen.
In het volgende voorbeeld wordt Engels als taal gespecificeerd:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Gebruik duidelijke taal
Gebruik altijd duidelijke taal, die gemakkelijk te begrijpen is. Probeer ook tekens te vermijden die niet duidelijk kunnen worden gelezen door een schermlezer. Bijvoorbeeld:
- Houd zinnen zo kort mogelijk
- Vermijd streepjes. In plaats van 1-3 te schrijven, schrijf je 1 tot 3
- Vermijd afkortingen. In plaats van februari te schrijven, schrijf februari
- Vermijd jargonwoorden
Maak een goede linktekst
Een linktekst moet duidelijk uitleggen welke informatie de lezer krijgt door op die link te klikken.
Voorbeelden van goede en slechte links:
Goed
Slechte
Opmerking: deze pagina is een introductie in webtoegankelijkheid. Bezoek onze Toegankelijkheidshandleiding voor meer details.