AnySurfer Checklist 2.0

3.2.3 Opmaaktabel gebruikt geen structurele/semantische markering

Opmaaktabellen

De html-elementen table, tr en td zijn in principe bedoeld voor de tabulaire uitlijning van gegevens waarbij hoofdingen de inhoud van rijen en kolommen aangeven. Sommige webdesigners gebruiken dezelfde HTML-elementen ook om een (onzichtbaar) raster te maken waarop ze paginaonderdelen nauwkeurig kunnen positioneren. Zulke tabellen noemt AnySurfer opmaaktabellen. De voorkeur gaat uit naar het gebruik van CSS in plaats van tabbellen om paginaonderdelen te positioneren.

Als u gebruik maakt van opmaaktabellen dan mogen die niet gemarkeerd zijn met structurele of semantische elementen zoals th, caption.

Zie ter vergelijking ook de ijkpunten over gegevenstabellen.

Voorbeeld (niet goed):

<table summary="layout table" >
<tr>
   <th colspan=3>Page Title</th>
</tr>
<tr>
   <td bgcolor="#CCCCCC" ><div>navigation content</div></td>
   <td bgcolor="#FFFFFF" width="50%"><div>main content</div></td>
   <td bgcolor="#CCCCCC"><div>right sidebar content</div></td>
</tr>
<tr>
   <td colspan=3>footer</td>
</tr>
</table>

Testmethode

Firefox Web Developer Toolbar:

  1. Wordt het table-element gebruikt? Outline > outline tables > tables of zoek in de code
    • nee; u voldoet aan dit ijkpunt. Einde van de test.
    • ja: ga verder met vraag 2
  2. Wordt het table-element gebruikt? Outline > outline tables > tables of zoek in de code
    • nee; u voldoet aan dit ijkpunt. Einde van de test.
    • ja: ga verder met vraag 2
  3. Wordt elke cel van de opmaaktabel gemarkeerd als <td>? Outline > outline tables > table cells
    • nee: pas uw pagina aan
    • ja: ga verder met vraag 4
  4. Wordt er een caption gebruikt? Outline > outline tables > caption
    • nee: ga verder met vraag 5
    • ja: pas uw pagina aan
  5. Wordt er een summary-atribuut gebruikt? Information > Display Table Information.
    • nee: ok, de opmaaktabel voldoet aan dit ijkpunt
    • ja: is het summary-atribuut leeg?
      • ja: de opmaaktabel voldoet aan dit ijkpunt
      • nee: pas uw website aan

    (Als er een table summary-atribuut is gebruikt, wordt het getoond met zijn waarde in een gele achtergrond. Als u Summary= ziet, is het summary-atribuut leeg, dat is goed.)

Meer informatie

Overeenkomstige richtlijnen

WCAG 2.0

Er zijn geen overeenkomstige richtlijnen voor dit ijkpunt.

Aanvullende informatie over dit ijkpunt

Prioriteit

  • Level A

Doelgroepen

  • Blinden
  • Zoekrobots

Webwerkers

  • Front-end developer met kennis van JavaScript
  • Webdesigner met kennis van HTML en CSS