2.2.2 Pagina's zijn semantisch gestructureerd

Gebruik de structuurelementen die HTML biedt voor het markeren van paragrafen (p), koppen (h1-h6) en lijsten (ul, ol, li). Het volstaat niet om visueel aan te duiden wat een kop of een lijst is.

Waarom?

Voordelen van structuurelementen voor webontwikkelaars:

  • Positie in resultaatpagina's van zoekmachines wordt gunstig beïnvloed
  • In combinatie met CSS is de vormgeving nauwkeuriger en onafhankelijk van de HTML-code aanpasbaar.
  • HTML-code is compacter en overzichtelijk
  • Basisopmaak is gegarandeerd in oude browsers en op mobiele apparaten

Dankzij structuurelementen kan een screenreader ook automatisch inhoudsopgaves samenstellen en lijsten met verschillende niveaus beter doorzoekbaar maken.

Semantisch gestructureerde pagina's passen zich ook beter aan aan persoonlijke stijlbladen. Met behulp daarvan kunnen slechtzienden de kleur, het lettertype, de grootte en de positie van verschillende tekst- en paginadelen nauwkeuriger bepalen.

Koppen

Voor de kop op het hoogste niveau gebruikt u het h1-element. Subkoppen geeft u aan met h2, en koppen op een derde of lager niveau met h3 tot h6. Respecteer steeds deze hiërarchie.

Voorbeeld (niet goed)

In dit slechte voorbeeld zijn de paginatitel en tussentitels opgemaakt met div-elementen. Door middel van een CSS-class krijgen ze visueel de layout van een kop, maar de semantiek ontbreekt.

<div class="pagetitle">Over AnySurfer</div>
<p>AnySurfer is een Belgisch kwaliteitslabel voor toegankelijke websites.</p>

<div class="subtitle">Onstaan</div>
<p>AnySurfer werd opgericht in 2001.</p>

<div class="subtitle">Missie</div>
<p>Onze missie is het Internet toegankelijker maken voor mensen met een functiebeperking.</p>

.pagetitle {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 0.2em; 
}

.subtitle {
  font-size: 1.2em;
  margin-bottom: 0.2em; 
}

p { 
  margin-top: 0; 
} 

Voorbeeld (goed)

In dit goede voorbeeld is de titel opgemaakt met h1 en de tussentitels zijn opgemaakt met h2's.

<h1>Over AnySurfer</h1>
<p>AnySurfer is een Belgisch kwaliteitslabel voor toegankelijke websites.</p>

<h2>Onstaan</h2>
<p>AnySurfer werd opgericht in 2001.</p>

<h2>Missie</h2>
<p>Onze missie is het Internet toegankelijker maken voor mensen met een functiebeperking.</p>

HTML5 outline algoritme

HTML5 heeft verschillende nieuwe elementen geïntroduceerd zoals section, nav, aside en article, ook "sectioning content" genoemd. Theoretisch mag u in combinatie met deze nieuwe HTML5 elementen altijd h1 gebruiken. Het HTML5 outline algorithm zal automatisch het kopniveau bepalen. Screenreaders hebben hiervoor nog geen ondersteuning:

  • Gebruik dus altijd een logische en hiërarchische volgorde van kopniveaus h1, h2, h3 om pagina's te structureren. Vertrouw (nog) niet op het HTML5 outline algoritme dat de koppenstructuur berekent op basis van de "sectioning content".
  • Gebruik role="heading" en aria-level="x" om het correct kopniveau aan alle screenreaders door te geven.

Meer uitleg over de koppenstructuur als u HTML5 gebruikt

Lijsten

Voor lijsten gebruikt u ol (voor genummerde lijsten) of ul (voor lijsten met opsommingstekens). Combineren kan ook.

Voorbeeld (niet goed)

<p>
  1. Home
  2. Aanbod
     * Auto's
     * Motorfietsen
  3. Contact
</p>

Voorbeeld (goed)

<ol>
  <li>Home</li>
  <li>Aanbod
    <ul>
      <li>Auto's</li>
      <li>Motorfietsen</li>
    </ul>
  </li>
  <li>Contact</li>
</ol>

Merk op dat het navigatiemenu van uw website ook een lijst is en dus ook met een ul moet worden opgemaakt, ook als het om een horizontaal menu gaat.

Aandachtspunten

  • Gebruik geen lijst-elementen als er slechts 1 item is.
  • Een broodkruimel hoeft u niet als een lijst te markeren. Een "groter dan teken" (>) als scheidingsteken geeft de hiërarchie tussen de links beter weer dan een ul.
  • Sluit de lijst niet af na ieder lijstitem.

Voorbeeld (niet goed)

<ul>
 <li>Home</li>
</ul>
<ul>
 <li>Over ons</li>
</ul>
<ul>
 <li>Onze producten</li>
</ul>
<ul>
 <li>enz.</li>
</ul>

Voorbeeld (goed)

<ul>
 <li>Home</li>
 <li>Over ons</li>
 <li>Onze producten</li>
 <li>enz.</li>
</ul>

Opmerkingen

Als u niet tevreden bent met het standaarduitzicht van structuurelementen, dan kunt u dit eenvoudig aanpassen in het stijlblad. Als u bijvoorbeeld de kop op niveau 1 niet zo groot wilt tonen en niet vet, dan hoeft u daar geen speciale class voor te creëren:

h1 { 
 font-size: 1.4em; 
 font-weight: normal 
}

Misbruik structuurelementen niet om visuele effecten te bekomen. Als u een klein lettertype nodig heeft voor tekst die geen kop is, gebruik dan geen h5- of h6-element. Als u tekst wil laten inspringen, gebruik dan geen blockquote-element (tenzij het om een citaat gaat) of geneste lijsten.

Voorbeeld (niet goed)

<ul><ul><ul>
 <li>Home</li>
 <li>Over ons</li>
 <li>Producten</li>
 <li>Contact</li>
</ul></ul></ul>

Voorbeeld (goed)

<ul class="nav">
 <li>Home</li>
 <li>Over ons</li>
 <li>Producten</li>
 <li>Contact</li>
</ul>

.nav {
 margin-left: 20px; 
}

Zelf testen

Koppen

Ga na of alle koppen als kop zijn gemarkeerd.

  • Nee; pas uw website aan.
  • Ja; Is de volgorde, het niveau van de koppen ten opzichte van elkaar, correct?
    • Ja; dan is aan dit ijkpunt voldaan.
    • Nee; pas uw website aan.

Web developer tool bar in Firefox

  • outline > outline headings
  • selecteer ook de optie outline > Show Element Names When Outlining dan worden koppen gemarkeerd als h1, h2, h3 enz
  • Ga na of elke titel omkaderd is en of de opeenvolging van niveaus klopt.

Wave toolbar in Firefox

  • klik op structure/order, de koppen zijn gemarkeerd als h1, h2, h3 enz.
  • om enkel de koppen te zien kunt u ook Outline klikken
  • Ga na of elke titel in de outline is opgenomen en of de opeenvolging van niveaus klopt.

Lijsten

Web developer tool bar in Firefox

  • Optie 1:
    • outline > custom elements > ol/ul/li
    • Ga na of elke lijst is omkaderd
  • Optie 2:
    • CSS > Disable styles > All Styles (Ctr + Shift + S)
    • Ga na of elke lijst op de default manier gerenderd word; een ol met nummers en een ul met bolletjes

Wave toolbar in Firefox

  • klik op structure/order
  • Ga na of elke lijst gemarkeerd is. Het begin en einde van een lijst worden met lichtblauwe rechte haken aangeduid en met behulp van een icoon ziet u het type lijst; een ol met nummers en een ul met bolletjes.

Accessibility toolbar in Internet Explorer

  • Optie 1:
    • Structuur > Lijsten: Toon elementen voor lijst opmaak
    • Ga na of elke lijst gemarkeerd is.
  • Optie 2:
    • CSS > in-/uitschakelen
    • Ga na of elke lijst op de default manier gerenderd word; een ol met nummers en een ul met bolletjes