Gebruik betekenisvolle opmaak voor tekst

Betekenisvolle opmaak, oftewel semantiek, zorgt ervoor dat tekst op een consistente manier wordt gepresenteerd en dat de bedoeling ervan duidelijk is, ook voor gebruikers van screenreaders.

Koppen

Gebruik koppen om een duidelijke hiërarchie in de tekst te creëren.

Tip

Koppen liggen vast in de css-classes voor lettertypes

Uitgevulde tekst (Justified)

Tekst die standaard uitgelijnd is (links of rechts) is meestal beter leesbaar dan uitgevulde tekst (justified). Dit komt omdat de afbreking en uitlijning van woorden op websites niet hetzelfde niveau halen als bij gedrukte tekst.

Tip

Utility-classes voor tekst uitlijning vind je in de css-classes voor text-align

Gecentreerde tekst

Beperk gecentreerde tekst tot een minimum, en gebruik het alleen voor korte zinnen of kopjes. Bij langere teksten zorgt het voor onlogische sprongetjes van het oog, wat het lezen moeilijker maakt.

Tip

Utility-classes voor tekst uitlijning vind je in de css-classes voor text-align

ALL CAPS-tekst

Beperk het gebruik van 'ALL CAPS' tot een minimum. Omdat we letters herkennen aan hun vorm, en vooral de bovenkant van een letter, maken we oogbewegingen aan de bovenkant van woorden. Bij all caps is dat moeilijker te doen, wat het lezen vertraagt.

Bovendien kan het gebruik van all caps door screenreaders gelezen worden als losse letters (bijvoorbeeld "V-O-O-R-N-A-A-M"), wat verwarrend is. Het gebruik van all caps kan ook overkomen alsof je "schreeuwt", wat niet altijd de boodschap is die je wilt overbrengen.

Tip

Utility-classes voor tekst transform vind je in de css-classes voor text-transform

Onderstreepte tekst

Gebruik onderstreping alleen voor links. Het onderstrepen van andere tekst kan verwarrend zijn, omdat gebruikers verwachten dat het een klikbare link is.

Tip

Utility-classes voor tekst onderstrepen vind je in de css-classes voor text-decoration, text-decoration-style en text-decoration-thickness