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

  • Zorg dat koppen worden opgemaakt met het HTML-element <h[x]> (<h1> tot en met <h6>).

Lees meer over toegankelijke koppen

Lijsten

  • Zorg dat ongeordende lijsten worden opgemaakt met het HTML-element <ul>.
  • Zorg dat genummerde lijsten worden opgemaakt met het HTML-element <ol>.
  • Zorg dat definitielijsten worden opgemaakt met het HTML-element <dl>.

Tabellen

  • Zorg dat tabellen worden opgemaakt met het HTML-element <table>.
  • Zorg dat alle cellen met gegevens in een datatabel worden opgemaakt het HTML-element <td>.
  • Zorg dat cellen die een tabelkop zijn in een datatabel worden opgemaakt het HTML-element <th>.

Lees meer over toegankelijke tabellen

Teksten

  • Zorg dat citaten in een tekst worden opgemaakt met het HTML-element <q>.
  • Zorg dat citaten worden opgemaakt met het HTML-element <blockquote>.
  • Zorg dat codeblokken worden opgemaakt met het HTML-element <pre>.
  • Zorg dat codes in een tekst worden opgemaakt met het HTML-element <code>.

Formulierelementen

  • Zorg dat invoervelden, selectievakjes en keuzerondjes worden opgemaakt het HTML-element <input>.
  • Zorg dat grote invoervelden worden opgemaakt met het HTML-element <textarea>.
  • Zorg dat keuzelijsten worden opgemaakt met het HTML-element <select>.

Gegroepeerde formulierelementen

  • Groepeer formulierelementen die bij elkaar horen het HTML-element <fieldset>.
  • Geef gegroepeerde formulierelementen een gezamenlijk label met het HTML-element <legend>.

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

Bronnen