Terug naar Artikelen

Legends of headings

Een vraag die regelmatig terug komt over toegankelijkheid is hoe geef je nu de structuur van je pagina aan. In HTML zijn er verschillende elementen beschikbaar die gebruikt kunnen worden om paginastructuur mee op te maken, maar welke elementen het beste zijn, en wat juist helemaal niet mag is niet altijd gemakkelijk om te bepalen.

Wat zijn koppen?

We hebben allemaal wel een idee van wat koppen zijn en hoe ze te gebruiken. Maar in de praktijk blijkt toch dat er veel verwarring is. Als je over tekstdocumenten spreekt dan worden koppen gebruikt om paragrafen en subparagrafen mee aan te geven. Koppen zijn als het waren de naam van de paragraaf, op dezelfde manier dat de titel van een webpagina de naam van die webpagina aangeeft.

In HTML zijn er zes niveaus van koppen: <h1> - <h6>. Door deze opmaak te gebruiken om de koppen van een pagina aan te geven, geef je de relatie aan tussen de kop en de onderliggende tekst. Door verschillende niveaus van koppen te gebruiken kun je duidelijk maken of een nieuwe paragraaf een subparagraaf is of het einde van de huidige paragraaf.

Koppen geven dus de naam van een paragraaf aan. Een webpagina bevat echter vaak veel meer dan alleen tekst. Denk aan tabellen, formulieren, kaarten, etc. Voor sommige van deze typen content zijn in HTML elementen die hiervoor gebruikt kunnen worden. Zo geeft <caption> de naam aan een tabel en <legend> geeft de naam aan een fieldset (een groep formulierelementen).

Relaties tussen elementen

Wat koppen, caption, legend en andere van dit soort HTML elementen gemeen hebben is dat ze een relatie aangeven tussen twee delen van de content. Deze elementen geven aan dat de tekst die in dit element staat de naam is van het bijbehorende onderdeel. Door deze relatie in de code duidelijk te maken, zorg je ervoor dat bezoekers die deze relaties niet kunnen opmerken uit de vormgeving, bijvoorbeeld doordat ze blind zijn, deze toch kunnen achterhalen. Dit is belangrijk om de pagina te kunnen begrijpen en te kunnen gebruiken.

Dit wordt behandeld in succes criterium 1.3.1, waarbij het gaat over de structuur van de pagina en de relatie tussen onderdelen op de pagina. In dit succescriterium wordt niet opgelegd welk element je zou moeten gebruiken, maar wel dat de relaties toegankelijk moeten zijn. Dit geeft webontwikkelaars vaak de mogelijkheid om naar eigen inzicht één van de genoemde elementen te kiezen. Een kop boven een groep formuliervelden zou met een legend-element of met een heading-element opgemaakt kunnen worden. Hetzelfde geldt voor caption. Dus hoe maak je nu die keuze?

Fieldset en legend

De richtlijnen geven in veel situaties de ruimte om een inschatting te maken van welk HTML element het beste zou zijn om een bepaalde relatie mee aan te geven. Om die keuze te kunnen maken is het belangrijk om te weten hoe hulpapparatuur omgaat met de verschillende elementen.

Heading-elementen worden door hulpapparatuur gebruikt als navigatiehulpmiddelen. Bezoekers kunnen op basis van de headings een indicatie krijgen van wat er op de pagina staat en waar ze op de pagina moeten zijn voor het stuk informatie of functionaliteit dat ze nodig hebben. Headeropmaak mag dus ook gebruikt worden bovenaan een groep formuliervelden of boven een tabel, wanneer het een dergelijke functie vervuld.

Legend kan alleen worden gebruikt om de elementen input, select, button en textarea te groeperen. Teksten, afbeeldingen en andere soorten content echter niet. Als die bij de groep horen dan volstaat een legend element niet. Zelfs als dit wel het geval is, is een kop vaak de betere keuze. Hulpapparatuur zal bij ieder invoerveld de legend naast het label uitspreken. Een goede vraag om je te stellen bij deze keuze is: “Is naast het label de legend nodig om te begrijpen wat ingevuld moet worden?”

Een tekst zoals “NAW gegevens” is niet belangrijk om te begrijpen wat je bij een online winkel in het veld “Woonplaats” moet invullen. NAW gegevens kan daarom beter als kop worden aangegeven. Een tekst zoals “Geboortedatum” daarentegen is wel belangrijk om genoemd te hebben bij bij elkaar horende velden met de labels "Dag", “Maand” en "Jaar". Daarvoor is legend de betere oplossing.

Een andere benadering die je kunt nemen is om te kijken naar de structuur van het formulier. Als heel het formulier in een aantal blokken is gedeeld dan gaat het over de structuur van een pagina. Wanneer binnen een formulier een subgroepje van elementen staat die een gezamenlijke naam hebben, dan is het legend element meestal de beste keuze.

Conclusie

HTML is een flexibele opmaaktaal. Vaak staan onderdelen op een pagina die niet exact passen in de manier waarop het element is omschreven. Dan is het belangrijk om een element te gebruiken dat zo dicht mogelijk in de buurt komt van wat je wilt dat een gebruiker met de pagina doet. Om deze keuze te kunnen maken is het belangrijk om te weten welke relatie een element precies aangeeft, en op wat voor manier dit element door de bezoekers gebruikt zal worden. De volgende tabel kan daarbij inzicht geven:

ElementRelatieAfweging
<caption> Geeft de naam van alle informatie in het omsluitende <table> element. Is deze tekst een naam voor alle data in de tabel?
<legend> Geeft de naam van alle formuliervelden (<input>, <select>, <textarea>, <button>) binnen het omsluitende fieldset element. Moet deze tekst bij ieder veld worden genoemd?
<h1> - <h6> Geeft de naam van alle content die erop volgt tot aan het volgende heading-element van hetzelfde of een hoger niveau. Geeft deze tekst structuur aan de pagina?

Gerelateerd

  • Delen op Facebook
  • Delen op Twitter
  • Delen op LinkedIn