HTML-tabellen presenteren tabelgegevens (rijen en kolommen van gerelateerde gegevens) — niet voor indeling. Een toegankelijke tabel gebruikt de juiste structuur zodat schermlezers kunnen aankondigen welke headers bij elke cel horen.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> met scope — markeert headercellen. scope="col" voor kolomkoppen, scope="row" voor rijkoppen. Schermlezers zeggen dan "North, Revenue: $12,000" in plaats van cellen zonder context te lezen.<caption> — een titel voor de hele tabel, het eerste kind van <table>; wordt uitgesproken om gebruikers te oriënteren.<thead>/<tbody>/<tfoot> — groeperen header-, body- en samenvattingsrijen; helpen bij navigatie en laten de header herhalen bij afdrukken.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Indelingstabellen verwarren schermlezers (ze kondigen gegevenstabel-semantiek aan) en zijn inflexibel. Gebruik CSS Grid/Flexbox voor pagina-indeling.
Juiste tabelsemantica (<th scope>, <caption>, sectiegroepering) is wat gegevenstabellen bruikbaar maakt voor gebruikers van schermlezers — ze binden elke waarde aan de bijbehorende rij- en kolomkoppen.
Reserveer <table> strikt voor echte tabelgegevens.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren