Semantiek

Wat?

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.

Als u niet tevreden bent met het standaarduitzicht van structuurelementen, dan kunt u dit eenvoudig aanpassen in het stijlblad.

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. Dat dient enkel voor een citaat.

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.

When do headings fail WCAG?

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>

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>

Zelf testen

Koppen

Ga na of alle koppen als kop zijn gemarkeerd en of de volgorde, het niveau van de koppen ten opzichte van elkaar, correct is.

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.