Maak geen kolommen, tabellen of speciale teksteffecten met spaties of tabs

Als je tekst wilt weergeven in kolommen of in tabelvorm, gebruik hier dan niet de spatiebalk of tabtoets voor. Gebruik ook geen spaties om woorden er anders uit te laten zien, bijvoorbeeld om letters verder uit elkaar te plaatsen. Er zijn betere, toegankelijke manieren om deze effecten te bereiken.

Hoe pas ik dit toe?

De aanpak die je kiest hangt af van het doel dat je wilt bereiken:

  • Een tekst over meerdere kolommen verdelen: dit is een visueel effect, dat geen invloed heeft op de betekenis van de tekst. Aanpak: gebruik CSS om het effect te bereiken.
  • Een tekst in tabelvorm weergeven: als het daadwerkelijk gaat om tabeldata, dan moet de structuur van deze data in de HTML-code staan. Het gaat in dit geval namelijk niet alleen om de vormgeving, maar ook om de betekenis van de gegevens. Door deze in een tabel te plaatsen maak je de relatie tussen de gegevens duidelijk. Aanpak: maak een HTML tabel.
  • Letters in een woord verder uit elkaar plaatsen: dit is een visueel effect, dat geen invloed heeft op de betekenis van het woord. Aanpak: gebruik CSS om het effect te bereiken.

Voorbeelden

Een tekst over meerdere kolommen verdelen

Er zijn verschillende manieren om een tekst over meerdere kolommen te verdelen. In HTML kun je bijvoorbeeld voor elke aparte kolom een <div>-element gebruiken. Met CSS zet je deze <div>-elementen als kolommen naast elkaar. Voor veel moderne browsers kun je met alleen CSS3 een tekst die in één HTML-element staat automatisch verdelen over meerdere kolommen. Doordat je de kolom-opmaak met CSS regelt blijft de tekst zelf onaangetast, en dus begrijpelijk en leesbaar voor bezoekers met hulptechnologie.

Een tekst in tabelvorm weergeven

Het feit dat, en de wijze waarop gegevens in een tabel zijn geplaatst zegt iets over de relatie tussen die gegevens. Dit is een belangrijk verschil met het weergeven van tekst in kolommen. De kolommen geven geen extra of andere betekenis aan de inhoud van de tekst zelf, terwijl de tabel dat wel doet. Om die reden moet de tabelvorm vastgelegd worden in de structuur van de tekst (door HTML-code te gebruiken), terwijl dit voor de kolommen niet hoeft. Meer over het plaatsen van tabellen.

Letters verder uit elkaar plaatsen

Letters van een woord kunnen met CSS eenvoudig verder uit elkaar worden geplaatst. Dit is een betere aanpak dan het gebruik van een spatie na elke letter, omdat je het woord zelf niet wijzigt. Bezoekers met hulptechnologie kunnen het woord dan gewoon lezen.

De volgende HTML-code toont de kop ‘Museum’. In het woord zijn geen spaties toegevoegd.

<h2>Museum</h2>

Met de volgende CSS-code worden de letters van de <h2>-kop een stukje uit elkaar geplaatst (namelijk 1em, dit is een meeteenheid in CSS). Visueel lijkt het nu of er spaties tussen elke letter zijn toegevoegd.

h2 { letter-spacing: 1em; }

Hoe draagt dit bij aan een betere website?

Als je spaties of tabs gebruikt om visuele effecten te creëren bij tekst, wordt deze tekst vaak onbegrijpelijk voor bezoekers met hulptechnologie. Kolommen die op deze wijze zijn gemaakt worden niet juist voorgelezen door voorleessoftware. De tekst wordt dan niet kolom voor kolom gelezen, maar regel voor regel. Dat betekent dat de eerste, tweede en volgende regels van alle kolommen aan elkaar worden geplakt. Hetzelfde probleem ontstaat als je een tabelvorm nabootst met spaties of tabs. Gebruik je spaties binnen één woord, dan herkent hulptechnologie dat woord niet meer. Elke letter wordt dan apart voorgelezen.

Bouwer of redacteur?

De redacteur moet erop letten dat hij of zij geen spaties of tabs gebruikt om kolommen, tabellen of speciale teksteffecten te creëren. Tabellen moeten gemaakt worden met de tabelfuncties van de editor in het CMS. Voor kolommen en woorden met letters die verder uit elkaar staan moet CSS gebruikt worden.

Technische details

  • Hoort bij toegankelijkheidseis 1.3.1, 1.3.2
  • Niveau A

Hoort bij