Kennisbank succescriteria: 1.3.1 Info en relaties

Tabellen bestaan uit rijen en kolommen. Tabelkoppen zijn vaak te herkennen aan een afwijkende opmaak, zoals een andere achtergrond of vetgedrukte tekst. Individuele cellen worden vaak onderscheiden door een rand of een wisselende rijkleur. Mensen die de tabel kunnen zien, kunnen deze relaties vaak snel herkennen maar dit soort vormgeving moet niet de enige manier zijn waarop de structuur en relaties worden overgebracht.

De betekenis moet ook in de code worden toegevoegd zodat het ook door software te begrijpen is. Dit is handig voor mensen die gebruik maken van hulptechnologieën. Zorg daarom dat alle tabellen worden opgemaakt met een tabel-element en dat tabelkoppen worden opgemaakt met een tabelkop-element. Hiermee wordt dan vastgelegd welke cellen koppen zijn en in welke cellen gegevens staan en wat de onderlinge relaties tussen de cellen zijn.

In de code ziet dat er zo uit:

Geef de tabel ook een korte beschrijving. Deze beschrijving wordt in de code vastgelegd met een <​caption​>-element. Een goede beschrijving helpt bezoekers om een tabel te vinden en te begrijpen waar de tabel over gaat.

In de code ziet dat er zo uit:

Lijsten zijn vaak te herkennen aan een opsommingsteken of een nummer voor het lijstonderdeel. Mensen die de tekst kunnen zien, herkennen hieraan meteen wat de lijsten zijn maar dit soort vormgeving moet niet de enige manier zijn waarop dit wordt overgebracht.

De betekenis moet ook in de code worden toegevoegd zodat het ook door software te begrijpen is. Zorg daarom dat alle tekst die er uit ziet als een lijst en ook de functie heeft van een lijst wordt opgemaakt met een passend lijst-element.

Er zijn verschillende soorten lijsten:

Opsomming

Onderdelen in een opsomming worden voorafgegaan door een opsommingsteken zoals een bolletje of een streepje. Gebruik opsommingen als de volgorde van de onderdelen in de lijst niet belangrijk is.

In de code ziet dat er zo uit:

Genummerde lijst

Onderdelen in een genummerde lijst worden voorafgegaan door een nummer. Gebruik genummerde lijsten als de volgorde van onderdelen in de lijst wél belangrijk is.

In de code ziet dat er zo uit:

Lijst met beschrijvingen

Gebruik een lijst met beschrijvingen bij lijsten die bestaan uit een naam, term of begrip met een beschrijving die daar bij hoort. Gebruik deze lijsten bijvoorbeeld voor een verklarende woordenlijst. Binnen een lijst met beschrijvingen wordt het <​dt​>-element gebruikt om een term aan te geven en wordt het <​dd​>-element om de beschrijving aan te geven.

In de code ziet dat er zo uit:

Koppen zijn vaak te herkennen aan een afwijkende opmaak, zoals een grotere lettergrootte, vetgedrukte tekst, of een andere kleur tekst. Deze betekenis moet ook in de code worden toegevoegd, zodat het ook door software te begrijpen is. Zorg daarom dat alle tekst die er uit ziet als een kop en ook de functie heeft van een kop wordt opgemaakt met een kop-element.

Zorg voor een passend kopniveau. Alle koppen samen moeten een goed beeld geven van de inhoud van de webpagina.

Bezoekers die gebruik maken van een schermlezer kunnen een lijst van alle koppen gebruiken om over de pagina te navigeren. Zij kunnen eventueel ook gelijk springen naar de volgende kop.

Zorg dat koppen worden opgemaakt met een HTML kop-element (<​h1> t/m <​h6>).

Zorg ook dat de volgorde van de koppen en tussenkoppen logisch is. Een paar vuistregels zijn:

Zorg voor labels bij invoervelden

Labels zijn het belangrijkste element voor een toegankelijk formulier. Zorg voor labels bij alle invoervelden of ander formulierelementen zoals selectievakjes, keuzerondjes en keuzelijsten. Een duidelijk label beschrijft precies wat er in het veld ingevuld moet worden, is zichtbaar voor alle bezoekers en staat dichtbij het invoerveld.

Het label moet in de code worden gekoppeld aan het invoerveld. Zo maak je het invoerveld ook toegankelijk voor bezoekers die gebruik maken van hulptechnologieën. Het label is de naam van het invoerveld. Een label vergroot ook het klikbare gebied waarmee een invoerveld kan worden geselecteerd. Dit is handig voor bijvoorbeeld bezoekers met een motorische beperking.

Koppel labels in de code aan een invoerveld

Labels worden geplaatst met het <​label​>-element. Het koppelen van een <​label​>-element aan een formulierelement gebeurt met een for/id-koppeling. Geef hiervoor het <​label​>-element een for-attribuut en het bijbehorende formulierelement een id-attribuut met dezelfde waarde.

In de code ziet dat er zo uit:

Er zijn ook manieren om de labels visueel te verbergen. Vraag je dan wel goed af waarom je dat zou willen doen. Het invoerveld verliest dan het grotere klikbare gebied en het wordt misschien minder duidelijk voor bezoekers. Als het label toch visueel wordt verborgen, zorg er dan er wel voor dat er een label beschikbaar is voor hulptechnologieën. Gebruik hiervoor het attribuut aria-label, aria-labelledby of een title-attribuut. Deze zijn niet zichtbaar.

In de code ziet dat er zo uit:

Groepeer meerdere secties van gerelateerde invoervelden

Als een formulier meerdere secties van gerelateerde invoervelden heeft dan wordt een <​fieldset​>-element gebruikt om deze te groeperen. Geef het <​fieldset​>-element een label door een <​legend​>-element in het <​fieldset​>-element te plaatsen. Hulptechnologieën gebruiken het <​legend​>-element alsof het een onderdeel is van het label van de elementen in het <​fieldset​>-element.

Het <​fieldset​>-element is vooral relevant voor het groeperen selectierondjes en keuzevakjes maar kan ook worden gebruikt om andere invoervelden te groeperen.

In de code ziet dat er zo uit:

Zorg voor instructies bij invoervelden

Instructies geven een extra hint voor de invoer in het invoerveld. De instructies in een formulier moeten aangeven of er verplichte velden zijn en eventueel of er een verplicht invoerformaat is.

Geef aan dat een invoerveld verplicht is

Het aangeven van een verplicht invoerveld kan in tekst of bijvoorbeeld met een asteriks (*). Zorg dat deze aanduiding in het <​label​>-element is geplaatst.

In de code ziet dat er zo uit:

Als de instructies niet duidelijk per invoerveld worden benoemd dan hoort voorafgaand aan het eerste invoerveld in tekst worden aangegeven op welke manier de verplichte velden zijn aangeduid.

In de code ziet dat er zo uit:

Markeer verplichte velden ook in de code. Gebruik hiervoor bij voorkeur het aria-required-attribuut.

Geef het aan als er een verplicht invoerformaat is verplicht is

Ook bij verplichte invoerformaten, zoals een postcode of een e-mailadres die moet worden ingevuld, moeten blijken uit de instructies wat de eisen zijn aan de invoer. Dit kan direct in het <​label​>-element.

In de code ziet dat er zo uit:

Maar dit kan ook via het attribuut aria-describedby.

In de code ziet dat er zo uit: