Mooie titels op elk scherm: gebruik de <br>-tag niet

Als we websites auditen, zien we in de HTML-code vaak titels die onderbroken zijn door een <br>-tag. Bijvoorbeeld:

<h2 class="text-center">Voor een toegankelijker <br>internet</h2>

Het probleem

We spreken hier niet over een blokkerend toegankelijkheidsprobleem, maar er is een veel betere manier om het op te lossen. Het alternatief zorgt voor een website die voor iedereen toegankelijk is. Daarnaast is het technisch slimmer. Dus waarom zou je het niet doen?

Wat wringt er?

• Ten eerste stopt een schermlezer bij de <br>. Als hij daarna het tweede deel leest, herhaalt hij de rol kop niveau 2.

  Anders gezegd, in plaats van te zeggen Kop niveau 2 Voor een toegankelijker internet, zal hij lezen Kop niveau 2 Voor een toegankelijker Kop niveau 2 internet. Dit is niet ideaal om de tekst goed te begrijpen.

• Ten tweede forceer je een onderbreking die misschien niet klopt in deze context of de getoonde breedte. Je riskeert dat een titel vreemd afbreekt op mobiel, of omgekeerd op een groot scherm dat er een lege ruimte ontstaat.

• Tenslotte wijzig je de HTML om een louter visueel probleem op te lossen, wat het onderhoud van de website lastiger maakt: als de template verandert, moet je de HTML aanpassen, en niet alleen de CSS.

De oplossing: text-wrap: balance

De CSS-eigenschap text-wrap: balance zorgt ervoor dat de browser de tekst in een titel automatisch zo gelijkmatig mogelijk verdeelt over de beschikbare regels.

Praktijkvoorbeeld:

h2 {
text-wrap: balance;
text-align: center;
}

Toegankelijk

De HTML blijft semantisch correct: een echte titel h2 zonder kunstmatige onderbreking. Schermlezers lezen de tekst nu vloeiend.

Perfecte titels op mobiel én desktop

De browser zorgt zelf voor een mooie verdeling van de tekst over de regels. Dit gebeurt automatisch op basis van:

• de breedte van het scherm;
• het gekozen lettertype;
• de lengte van de tekst.

Eenvoudiger onderhoud

De vormgeving van titels blijft altijd gelijk, ook als je de tekst in het CMS aanpast. Je hoeft geen codes meer te gebruiken om de tekst goed te verdelen; de website regelt dit nu zelf.

Vergelijkend voorbeeld

Bekijk het voorbeeld in CodePen.

Visueel is het resultaat hetzelfde, maar de inhoud is toegankelijk, responsive en semantisch correct als je text-wrap: balance gebruikt.

Met text-wrap: balance, pak je twee fundamentele uitdagingen van toegankelijkheid aan:

1. Opmaak en structuur scheiden.

   De tekst blijft in de HTML. De weergave blijft in de CSS. Dat is de basis van toegankelijkheid en van duurzaam digitaal ontwerpen.

2. De leesbaarheid behouden.

   Het optimaliseert de regels en vermijdt:

   • losse woorden;
   • te korte regels;
   • visueel storende onderbrekingen.

Browsercompatibiliteit

De eigenschap text-wrap: balance is compatibel met alle moderne browsers. Voor meer details, zie text-wrap: balance | Can I Use.

Besluit

Voor een mooie, evenwichtige titel gebruik je het best text-wrap: balance. Dit is de beste keuze die rekening houdt met alle bezoekers van je website.

Dankzij text-wrap: balance, kan je:

• de toegankelijkheid verbeteren,
• semantisch correcte HTML behouden,
• zorgen dat titels mooi over de regels verdeeld zijn,
• extra werk in de toekomst voorkomen en het onderhoud makkelijker maken,
• zorgen dat de website op elk scherm goed werkt.

De browser doet het werk, en iedereen wint: designers, ontwikkelaars, redacteurs… en vooral de gebruikers.