Terug naar Webrichtlijnen 1 - Overzicht van ijkpunten

IJkpunt 3.5 - Webrichtlijnen 1

Gebruik headerelementen om de documentstructuur over te brengen en gebruik ze volgens de specificatie.

Referentie: De WCAG ijkpunten zijn identiek aan de Waarmerk drempelvrij ijkpunten en de Webrichtlijnen.

Beschrijving

Als de juiste headerelementen in een document worden gebruikt, kan de structuur eenvoudiger uit een document worden afgeleid. Voor veel mensen kan een eenvoudige zoekopdracht naar de headers van een pagina een snel overzicht van de inhoud geven. Dit ijkpunt zorgt er niet alleen voor dat het headerelement wordt gebruikt, maar ook dat het op de juiste manier wordt gebruikt.

Voordelen

  • Met bepaalde hulpsoftware kan via de headers door een pagina gelopen worden. Door kopjes met header elementen aan te geven kan snel door de gebruiker bepaald worden welke informatie voor hem relevant is.

Criteria voor toetsing

  • Er zijn headerelementen gebruikt voor het geven van headerinformatie.
  • Headerelementen zijn in de juiste volgorde gebruikt, beginnend bij kop 1 (h1).*
  • Er zijn geen headerniveaus overgeslagen.*
  • Er is een caption element of heading markup gebruikt voor het leveren van een heading boven een tabel.*

*: Dit is uitsluitend een succescriterium binnen de Webrichtlijnen. Het overschrijdt conformiteit met WCAG 1.0; zie hieronder voor meer informatie.

Voorbeelden

Voorbeeld 1 (Header in document)

Gebruik H2 in HTML om een subsectie van H1 aan te geven. Gebruik geen headers voor fonteffecten.

Voorbeeld 2 (Semantisch gebruik van HTML-elementen)

HTML-elementen zoals headers (h1, h2, etc.) worden gebruikt om documentstructuur te schrijven en niet voor hun standaard grootte of het uiterlijk. Grootte en uiterlijk van elementen worden gedefinieerd via het gebruik van CSS. Gebruik niet <p class="header1">…</p> , <em> of <strong> om kopregels aan te geven.*

*: Dit is uitsluitend een succescriterium binnen de Webrichtlijnen. Het overschrijdt conformiteit met WCAG 1.0.

Voorbeeld 3

  1. <table summary="Tussen de jaren 2005 en 2008 is de winst van 18% naar 12% gedaald">
  2. <caption>Winstoverzicht Stichting X</caption>
  3. <tr><th>Jaar</th> <th>Bruto winst</th> <th abb="Bruto winst modes per maand">Mod p/m</th></tr>
  4. <tr><td>2008</td> <td>12%</td> <td>1.5%</td> </tr>
  5. <tr><td>2007</td> <td>14%</td> <td>1.9%</td> </tr>
  6. <tr><td>2006</td> <td>17%</td> <td>1.2%</td> </tr>
  7. <tr><td>2005</td> <td>18%</td> <td>1.1%</td> </tr>
  8. </table>
  1. <h2>Winstoverzicht Stichting X</h2>
  2. <table>
  3. <tr><th>Jaar</th> <th>Bruto winst</th> <th abbr="Bruto winst modes per maand">Mod p/m</th></tr>
  4. <tr><td>2008</td> <td>12%</td> <td>1.5%</td> </tr>
  5. <tr><td>2007</td> <td>14%</td> <td>1.9%</td> </tr>
  6. <tr><td>2006</td> <td>17%</td> <td>1.2%</td> </tr>
  7. <tr><td>2005</td> <td>18%</td> <td>1.1%</td> </tr>
  8. </table>
  9. <p>Tussen de jaren 2005 en 2008 is de winst van 18% naar 12% gedaald</p>

Koppen boven tabellen moeten met een header element of met het caption element opgemaakt worden.

Meer informatie over tabellen vindt u in ijkpunt 5.5.

Definities

Presentatie

  • Weergeven van content en structuur in een vorm die kan worden waargenomen door de gebruiker.

Verwijzingen

  • R-pd.3.2 Gebruik markup voor kopregels die de hiërarchie van de informatie op de pagina uitdrukken.
  • R-pd.3.3 Sla in de markup geen niveaus in de hiërarchie van kopregels over.
  • R-pd.11.7 Gebruik het caption element of heading markup voor het geven van een kopregel boven een tabel.
  • R-pd.2.9 Bouw een website volgens de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C.
  • Delen op Facebook
  • Delen op Twitter
  • Delen op LinkedIn
  • Delen op Google+