2. Digitale toegankelijkheid

2.1. Waarom digitale toegankelijkheid?

Veel wordt online gedaan, of het nu bankieren is of het kopen van een nieuw kledingstuk. In Nederland heeft een kwart van de mensen een fysieke of mentale beperking die beperkend zijn in het gebruik van internet. Dit zijn niet alleen blinden of slechtzienden mensen, maar ook mensen die doof, slechthorend, kleurenblind of dyslectisch zijn of één of meerdere ledematen niet kunnen gebruiken Bron.

Wij als (web)ontwikkelaars hebben veel invloed op het dagelijkse leven van mensen. Door rekening te houden met toegankelijkheid op websites, kunnen meer mensen goed gebruik maken van het internet. Voor overheidsinstanties is het zelfs een verplichting om toegankelijkheid te zijn Bron.

Daarnaast levert het structuren van onze code ons ook veel op. Het maakt de code leesbaarder en overzichtelijker. Ook is het beter voor de vindbaarheid op Google.

2.2. HTML Basis

Een goede basis van toegankelijkheid is het structuren van HTML. Door gebruik te maken van de juiste html tags kan de browser of een schermlezer makkelijk de structuur van je website herkennen.

2.2.1. Page Layout

Een goed startpunt van iedere webpagina is een logische indeling. Hiervoor kunnen we de structuurelementen van HTML gebruiken. Deze layout is in principe op iedere pagina hetzelfde.

Voorbeeld van een page layout:

<body>
  <header>
    <!-- Hier komt bijvoorbeeld je logo-->

    <nav>
      <!--Hier komt je hoofdnavigatie-->
    </nav>
  </header>
  <main>
    <!--De content van de pagina-->
  </main>

  <footer>
    <!--Hier komt de tekst onderaan de pagina te staan-->
  </footer>
</body>

2.2.2. Content

Gebruik voor content de juiste elementen. Voor blokken tekst gebruik je altijd een p tag. Kopteksten gaan van groot naar klein, h1 > h2 > h3 etc. h1 tag gebruik je meestal voor de titel van de pagina of artikel. h2 tag is dan een subkop daarvan, gevolgd door h3 t/m h6. Gebruik CSS om de styling van kopjes aan te passen.

Voor lijsten gebruik je de ol tag voor geordende lijsten (als de volgorde uitmaakt) of ongeordende lijsten met de ul tag.

Voorbeeld van content op een pagina:

<main>
  <h1>Titel van de pagina</h1>

  <p>Intro van de pagina...</p>

  <p>Nog een paragraaf</p>

  <h2>Subkop</h2>

  <h3>Subkop binnen een subskop</h3>

  <ol>
    <li>Stap 1: Boodschappenkar pakken</li>
    <li>Stap 2: Boodschappen pakken</li>
    <li>Stap 3: Afrekenen</li>
  </ol>

  <ul>
    <li>Appels</li>
    <li>Peren</li>
    <li>Bananen</li>
  </ul>
</main>

Naast deze tags heb je ook tags zoals strong en em. Deze tags hebben elk zijn eigen betekenis. Gebruik deze tags niet om teksten dikker te maken. In dat geval kun je beter een span gebruiken met een class en deze stylen in CSS.

Vermijd ook het gebruik van de br tag. Voor extra witruimte is het beter om CSS te gebruiken.

2.2.3. Afbeeldingen

Vrijwel iedere website heeft afbeeldingen. Dit kunnen achtergrondafbeeldingen, hero-images, icons, foto's en nog meer zijn. Deze afbeeldingen zijn niet voor iedereen te zien. Daarom gebruiken we alt texts. Dit is een alternatieve text voor als de afbeelding niet getoond kan worden. Het is de bedoeling dat de afbeelding zo duidelijk en beknopt mogelijk de afbeelding omschrijft. Gebruik niet woorden zoals "afbeelding" of "foto" in de omschrijving. Het is al duidelijk dat het om een foto gaat.

Een goede alt text omschrijft de foto in context met de bijbehorende tekst. Zonder context: "Een gans op het gras". Een artikel over het broedseizoen van ganzen: "Een gans die mensen weghoudt van haar ganzenkuiken".

Als je een afbeelding hebt ter illustratie van de tekst of website dan mag je de alt tekst leeg houden. Met een lege alt tekst geef je aan dat deze afbeelding ter decoratie is.

Voorbeeld van een afbeelding met alt tekst:

<figure>
  <img src="afbeelding-bestaat-niet.png" alt="Voorbeeld van een alt tekst als de afbeelding niet bestaat" />
  <figcaption>
    Een schermlezer zal de alt text voorlezen van deze afbeelding. Ook als de afbeelding niet bestaat zal deze worden getoond.
  </figcaption>
</figure>
Voorbeeld van een alt tekst als de afbeelding niet bestaat
Een schermlezer zal de alt text voorlezen van deze afbeelding. Ook als de afbeelding niet bestaat zal deze worden getoond.

2.3. Formulieren

Bij formulieren zul je gebruik gaan maken van invoervelden. Het is hierbij belangrijk om aan te geven wat er in het invoerveld ingevuld moet worden. Gebruik hiervoor de label tag en niet de placeholder attribuut. Een label blijft altijd zichtbaar, ook al vul je iets in het veld. Daarnaast lezen schermlezers placeholder teksten niet.

Doe dit dus niet:



Gebruik de for atribuut op een label om deze aan een input te koppelen via de id. In het onderstaande voorbeeld is er ook een name met dezelfde waarde "naam". Dit is geen verplichting, de name atribuut mag een andere waarde hebben.

<label for="naam">Naam:</label>
<input type="text" id="naam" name="naam" />

Gebruik voor formulieren altijd een button of een input met type="submit".

<button type="submit">Versturen</button>

<input type="submit" value="Versturen">

Gebruik binnen formulier ook geen br tags. Het is beter om onderdelen te scheiden doormiddel van een div of section. Gebruik CSS voor styling.

<form action="/" method="POST">
  <div>
    <label for="naam">Naam:</label>
    <input type="text" id="naam" name="naam" />
  </div>
  <div>
    <label for="profiel">Kies je profiel:</label>
    <select id="profiel" name="profiel">
      <option>Web Development</option>
      <option>Software Development</option>
      <option>Embedded Software Development</option>
      <option>Data Solutions Development</option>
      <option>Bedrijfskundige Informatica & Management</option>
      <option>Infrastructure & Security Management</option>
    </select>
  </div>
  <input type="submit" value="Versturen">
</form>

2.4. Verder lezen

Er valt nog veel meer te leren over digitale toegankelijkheid. Goede HTML is een eerste stap. Gebruik daarom ook altijd de W3 Validator om je HTML te valideren!

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

https://accessibility.huit.harvard.edu/describe-content-images