Info en relaties

Succescriterium 1.3.1 Info en relaties

Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.

Info en relaties begrijpen (Engelstalig)

Als je een website maakt, is het belangrijk dat de indeling en opmaak niet alleen voor bezoekers, maar ook voor computers begrijpelijk zijn. Wat je met vormgeving laat zien, moet ook in de code van je website duidelijk zijn. Denk hierbij bijvoorbeeld aan koppen, lijsten, tabellen en andere elementen die betekenis overbrengen.

Schermlezers zijn namelijk afhankelijk van de onderliggende code. Door betekenisvolle code te gebruiken, leg je de informatie, structuur en relaties van elementen vast. Mensen die een schermlezer gebruiken kunnen hierdoor gemakkelijk door een pagina navigeren, bijvoorbeeld door van kop naar kop te springen.

Hoe pas je dit toe?

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 met het HTML-element <td>.
  • Zorg dat cellen die een tabelkop zijn in een datatabel worden opgemaakt met 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 met 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>.

Voor wie is dat belangrijk?

  • Mensen die gebruik maken van een schermlezer.
  • Mensen die blind of slechtziend zijn.

Wie is verantwoordelijk?

  • Redacteur
  • Ontwikkelaar

Bronnen