Toegankelijke content maken in de WordPress-blokeditor

Het thema is netjes gebouwd, de contrasten kloppen en het menu werkt met het toetsenbord. Dan plaatst een collega een nieuwsbericht. Kopjes zijn vetgedrukte alinea’s, de foto heeft geen beschrijving en de knop onderaan heet “Klik”. Zo raakt een toegankelijke site langzaam zijn toegankelijkheid kwijt. Goed nieuws: toegankelijke content in WordPress maken vraagt geen technische kennis. De blokeditor heeft voor bijna alles een instelling. U moet alleen weten waar die zit.

Koppen en lijsten: structuur, geen opmaak

Het kopblok

Het kopblok heeft een keuzemenu voor het niveau: H2, H3, H4 en verder. Kies het niveau op basis van de structuur, niet op basis van hoe groot de letter moet zijn.

• De titel van uw bericht of pagina is meestal al de H1. Gebruik in de inhoud dus geen H1.
• Hoofdonderwerpen worden H2, onderdelen daarvan H3.
• Sla geen niveau over: na een H2 komt een H3, geen H4.
• Maak nooit een kop door een gewone alinea vet en groot te zetten. Dan is het voor een screenreader gewoon tekst.

Vindt u een H3 te klein? Pas dat aan in de stijl van het thema, niet door een ander niveau te kiezen. Controleer de opbouw met het documentoverzicht linksboven in de editor. Daar ziet u alle koppen op een rij; afhankelijk van uw WordPress-versie staat het onder het lijstweergave-pictogram of onder de informatieknop. De achtergrond leest u in koppen in de juiste volgorde.

Lijsten: gebruik het lijstblok

Een opsomming met streepjes aan het begin van elke regel ziet eruit als een lijst, maar is het niet. Een screenreader leest dan losse regels voor. Gebruik het lijstblok. Een screenreader zegt dan “lijst, vijf items” en de bezoeker weet wat er komt. Kies een genummerde lijst voor stappen in een vaste volgorde, en een ongenummerde voor de rest.

Afbeeldingen: alt-tekst in de zijbalk

Klik op een afbeeldingsblok en kijk in de zijbalk rechts onder Instellingen. Daar staat het veld Alternatieve tekst. Een paar richtlijnen:

• Beschrijf wat de afbeelding in deze context betekent, niet elk detail.
• Begin niet met “Afbeelding van”. Een screenreader meldt zelf al dat het een afbeelding is.
• Is de afbeelding puur sier, laat het veld dan leeg.
• Staat er tekst in de afbeelding, zet die tekst dan in de alt of liever in de pagina zelf.

Let op: een alt-tekst die u in de mediabibliotheek invult, wordt bij het invoegen overgenomen. Past die beschrijving niet bij de nieuwe context, pas hem dan in het blok aan. Meer voorbeelden staan in alt-teksten schrijven.

Een bijschrift is iets anders dan een alt-tekst. Het bijschrift is voor iedereen zichtbaar. Herhaal het niet woordelijk in de alt, want dan hoort een screenreadergebruiker alles twee keer.

Knoppen en links: zeg waar het heen gaat

Het knoppenblok maakt van een link een opvallende knop. De tekst op die knop is wat een screenreader voorleest, en wat iemand met spraakbesturing moet uitspreken om hem te activeren. Kies dus een tekst die op zichzelf duidelijk is:

• Niet “Klik hier”, maar “Vraag een offerte aan”.
• Niet “Meer”, maar “Meer over onze openingstijden”.

Hetzelfde geldt voor gewone links in een alinea. Selecteer de woorden die beschrijven waar de link heen gaat, niet het woord “hier”. Zet een link die in een nieuw venster opent bij voorkeur gewoon in hetzelfde venster. Moet het toch een nieuw venster zijn, vermeld dat dan in de tekst.

Tabellen: alleen voor gegevens

Het tabelblok is bedoeld voor gegevens met rijen en kolommen: openingstijden, prijzen, specificaties. Niet om tekst naast elkaar te zetten; daarvoor is het kolommenblok.

Zet in de instellingen van het tabelblok de optie voor een koptekstsectie aan. Dan wordt de eerste rij als kopregel gemarkeerd, en kan een screenreader bij elke cel zeggen bij welke kolom die hoort. Voeg ook een bijschrift toe dat zegt wat de tabel laat zien. Wat er verder bij een goede tabel komt kijken, staat in tabellen toegankelijk maken.

Kleuren in de editor

Veel blokken hebben kleurinstellingen voor tekst en achtergrond. Handig, maar ook een bron van problemen. Lichtgrijze tekst op een witte achtergrond, of witte tekst op een felgeel vlak, haalt het vereiste contrast van 4,5:1 niet.

• Houd u zoveel mogelijk aan de kleuren uit het palet van uw thema. Als het thema goed is opgezet, zijn de combinaties daaruit getest.
• Kiest u toch een eigen kleur, dan toont WordPress bij sommige blokken een waarschuwing als het contrast laag is. Neem die serieus.
• Gebruik kleur nooit als enige manier om iets aan te geven, zoals “de rode data zijn volgeboekt”.

Nog een paar blokken om op te letten

• Omslagblok: tekst op een foto. Zorg voor voldoende donkere of lichte overlay, anders verdwijnt de tekst op delen van de foto.
• Videoblok en ingesloten video’s: zorg voor ondertiteling, en zet automatisch afspelen uit.
• Detailsblok: een ingebouwd uitklapblok dat met het toetsenbord werkt. Een goede keuze voor veelgestelde vragen.
• Bestandsblok: geef de link een duidelijke naam, met het type en eventueel de omvang. “Jaarverslag 2025 (pdf)”.

Toegankelijke content in WordPress controleren voor publicatie

1. Open het documentoverzicht. Zijn de koppen logisch?
2. Heeft elke afbeelding een alt-tekst of bewust een lege?
3. Zijn alle knop- en linkteksten duidelijk zonder context?
4. Zijn tabellen echte tabellen met een kopregel?
5. Zijn eigen kleuren goed leesbaar?

Bekijk het bericht daarna één keer in de voorbeeldweergave op een telefoon. Lange tabellen, brede afbeeldingen en knoppen naast elkaar gedragen zich op een smal scherm soms anders dan in de editor.

Werkt de basis van het thema zelf niet goed, dan helpt goede content maar beperkt. Wat er aan de technische kant nodig kan zijn, leest u op een bestaande WordPress-website toegankelijk maken. Het complete overzicht staat op digitale toegankelijkheid.