Info en relaties

Zorg dat niet alleen vormgeving wordt gebruikt om informatie, structuur en relaties over te brengen. De content moet ook door software te begrijpen zijn. Elementen zoals koppen, lijsten en tabellen brengen allemaal informatie, structuur of relaties over.

Schermlezers zijn afhankelijk van de code van een pagina om de content goed te kunnen presenteren. Door betekenisvolle code te gebruiken worden informatie, structuur en relaties van elementen ook in de code vastgelegd. Mensen die een schermlezer gebruiken kunnen hiermee eenvoudig over een pagina navigeren door bijvoorbeeld van kop naar kop te springen.

Toepassen

Koppen

  • Gebruik het HTML-element <h[x]> (<h1> tot en met <h6>) voor koppen.

Lijsten

  • Gebruik het HTML-element <ul> voor ongeordende lijsten.
  • Gebruik het HTML-element <ol> voor genummerde lijsten.
  • Gebruik het HTML-element <dl> voor definitielijsten.

Tabellen

  • Gebruik het HTML-element <table> voor tabellen.
  • Gebruik het HTML-element <td> voor alle cellen in een tabel met gegevens.
  • Gebruik het HTML-element <th> voor alle cellen in een datatabel die een tabelkop zijn.

Lees meer over toegankelijke tabellen

Formulierelementen

  • Gebruik het HTML-element <input> voor invoervelden, selectievakjes en keuzerondjes.
  • Gebruik het HTML-element <textarea> voor grote invoervelden.
  • Gebruik het HTML-element <select> voor keuzelijsten.
  • Gebruik het HTML-element <label> om alle formulierelementen een label te geven.
  • Zorg dat labels en instructies in de code zijn gekoppeld aan de bijbehorende formulierelementen.

Gegroepeerde formulierelementen

  • Gebruik het HTML-element <fieldset> om formulierelementen die bij elkaar horen te groeperen.
  • Gebruik het HTML-element <legend> om gegroepeerde formulierelementen een gezamenlijk label te geven.

Voorbeelden

Voor deze lijst wordt alleen vormgeving gebruikt:

1. Appels
2. Peren
3. Bananen

<p>
1. Appels<br>
2. Peren<br>
3. Bananen
</p>

Beter zou zijn:

  1. Appels
  2. Peren
  3. Bananen
<ol>
  <li>Appels</li>
  <li>Peren</li>
  <li>Bananen</li>
</ol>

Impact

  • Mensen die gebruik maken van een schermlezer.

Verantwoordelijkheid

  • Redacteur
  • Ontwikkelaar