Maandag t/m vrijdag, 09:00 – 18:00 +31 970 1028 0205 WhatsApp
WebMaintorNederland
Toegankelijkheid · wat wij doen

Een bestaande WordPress-website toegankelijk maken

Thema, page builder, plugins, menu en formulieren: zo maakt u een bestaande WordPress-site toegankelijk, en zo weet u of uw thema dat aankan.

"Moeten we nu een hele nieuwe site laten bouwen?" Dat is vaak de eerste vraag als iemand hoort dat zijn website niet toegankelijk is. Meestal is het antwoord nee: WordPress toegankelijk maken lukt in de regel binnen de bestaande site. WordPress zelf is een redelijke basis: de beheeromgeving en de standaardblokken zijn met toegankelijkheid in gedachten gebouwd. De problemen zitten bijna altijd in de lagen erbovenop. Het thema, de page builder, een handvol plugins en de manier waarop de inhoud is ingevoerd.

Op deze pagina leest u per laag waar het misgaat in een bestaande WordPress-site, wat binnen uw huidige opzet te repareren is, en aan welke signalen u ziet dat een ander thema op den duur goedkoper is. Bouwt u liever van de grond af aan opnieuw, dan is dat een ander traject; daar hebben wij een aparte pagina voor.

  1. 01

    De vier lagen van een WordPress-site

    Om WordPress toegankelijk te maken helpt het om de site te zien als een stapel. Elke laag heeft zijn eigen soort problemen en zijn eigen soort oplossing.

    LaagTypische problemenWie lost het op
    ThemaGeen zichtbare focus, menu niet bedienbaar met toetsenbord, ontbrekende landmarks, lage contrasten in de huisstijlOntwikkelaar, in een childthema of via instellingen
    Page builderKoppen die geen koppen zijn, veel overbodige code, sliders en pop-ups zonder toetsenbordbedieningOntwikkelaar, deels via instellingen in de builder
    PluginsFormulieren zonder labels, cookiebanners die alles blokkeren, captcha'sInstellingen, een andere plugin, of de maker
    InhoudAlt-teksten, koppenvolgorde, linkteksten, tekst in afbeeldingen, pdf'sUw redactie, met uitleg
  2. 02

    Het thema: repareren of vervangen?

    Het thema bepaalt de opbouw van elke pagina: header, menu, footer, sjablonen voor berichten en archieven. Een fout in het thema komt dus op elke pagina terug. Het goede nieuws is dat één reparatie dan ook op elke pagina effect heeft.

    Veel is binnen een bestaand thema op te lossen met een childthema: een zichtbare focusstijl, een skip-link, betere contrasten, een menu dat met het toetsenbord opent, de juiste lang-instelling. Wij passen dan niet de bestanden van het thema zelf aan, zodat een update van het thema het werk niet wegveegt.

    Er zijn ook signalen dat repareren niet loont:

    • het thema wordt niet meer bijgewerkt door de maker;
    • het menu, de header en de sjablonen zijn zo gebouwd dat vrijwel alles vervangen moet worden;
    • het thema laadt eigen sliders, pop-ups en animaties die niet uit te zetten zijn;
    • u heeft het thema al jaren en het staat sowieso op de lijst om te vervangen.

    Dan bespreken wij een overstap naar een thema dat beter gebouwd is. In de themabibliotheek van WordPress bestaat het label "accessibility-ready". Dat is een nuttig vertrekpunt, maar geen garantie: ook zo'n thema moet u na het inrichten testen.

  3. 03

    Page builders, plugins en het menu

    Een page builder geeft redacteuren veel vrijheid, en die vrijheid levert vaak ontoegankelijke pagina's op. Een tekstblok dat er groot en vet uitziet maar geen kop is, een knop die eigenlijk een link in een div is, een tabblad dat niet met het toetsenbord werkt. Gebruikt u Elementor, dan staat de aanpak voor die builder op de pagina Elementor-websites toegankelijk maken. Voor Divi en WPBakery gelden vergelijkbare patronen.

    Bij plugins kijken wij per plugin wat er mogelijk is. Soms volstaat een instelling, zoals labels zichtbaar maken in een formulierplugin. Soms is er een beter gebouwd alternatief dat hetzelfde doet. En soms moet een probleem bij de maker worden gemeld.

    Het menu verdient aparte aandacht, omdat het op elke pagina staat. Een submenu dat alleen bij muisbeweging opent, een hamburgermenu dat geen naam heeft of de focus niet vasthoudt: het zijn bekende fouten. Hoe een goed menu zich gedraagt, leest u in een navigatiemenu dat met toetsenbord en screenreader werkt. Wilt u zelf controleren hoe uw site met alleen een toetsenbord werkt, kijk dan bij toetsenbordnavigatie testen en verbeteren.

  4. 04

    Hoe WebMaintor een bestaande WordPress-site toegankelijk maakt

    1. Inventarisatie. Wij brengen het thema, de builder en de plugins in kaart, met versies en of ze nog worden onderhouden.
    2. Test. Wij testen een steekproef van pagina's en alle formulieren tegen WCAG 2.2 AA, met de hand en met tools.
    3. Advies per laag. U krijgt per bevinding te horen in welke laag het probleem zit en wat de oplossing is: instelling, childthema, andere plugin of contentaanpassing. Is een ander thema verstandiger, dan zeggen wij dat eerlijk, met de afweging erbij.
    4. Herstel tegen vaste prijs. Na die beoordeling krijgt u een vaste prijs. Wij werken in een stagingomgeving en zetten alles live na uw akkoord. Hoe dat herstel verloopt, staat bij toegankelijkheidsproblemen laten herstellen.
    5. Uitleg aan uw redactie. Wij laten zien hoe u in de editor koppen, alt-teksten en links goed invoert.
  5. 05

    Wat u en uw redactie zelf doen

    Techniek en inhoud moeten allebei kloppen. Het thema kan nog zo goed zijn, een pagina waarin alle tussenkoppen vetgedrukte alinea's zijn, blijft ontoegankelijk. Een paar gewoontes die het verschil maken:

    • gebruik het kopblok voor koppen, en sla geen niveau over;
    • geef elke betekenisvolle afbeelding een alt-tekst, en laat hem leeg bij pure decoratie;
    • schrijf linkteksten die op zichzelf te begrijpen zijn;
    • zet geen tekst in afbeeldingen;
    • gebruik lijsten en tabellen voor wat echt een lijst of tabel is.

    Werkt u met de blokeditor, dan vindt u praktische uitleg in toegankelijke content maken in de blokeditor.

  6. 06

    Wat een plugin niet voor u kan doen

    Er zijn plugins die beloven uw WordPress-site met één klik toegankelijk te maken, vaak met een knopje in de hoek van het scherm. Die lossen de problemen in de code niet op. Een menu dat niet met het toetsenbord werkt, blijft dat ook met zo'n widget. Waarom dat zo is, leest u op toegankelijkheidsplugins en overlays. Een overzicht van het hele traject, van test tot onderhoud, staat op uw website toegankelijk maken.

Kennisbank

Verder lezen

FAQ

Veelgestelde vragen

Blijven mijn aanpassingen staan na een WordPress-update?

Aanpassingen in een childthema en in eigen code blijven staan bij updates van het thema en van WordPress. Wel kan een update van een plugin nieuwe problemen introduceren. Daarom is het verstandig na grote updates opnieuw te controleren.

Kan ik mijn page builder houden?

In veel gevallen wel. Het vraagt discipline bij het bouwen van pagina's en soms wat maatwerk. Bij een builder die zware, ontoegankelijke code genereert en niet goed aan te passen is, bespreken wij de alternatieven.

Is de beheeromgeving van WordPress ook toegankelijk?

De standaardbeheeromgeving van WordPress is met toegankelijkheid in gedachten gebouwd. Plugins voegen daar soms schermen aan toe die minder goed werken. Gebruikt een van uw medewerkers hulpsoftware, laat het ons dan weten, zodat wij ook daarop letten.

Hoe weet ik of mijn huidige thema een goede basis is?

Een snelle aanwijzing: druk op een pagina een paar keer op Tab. Ziet u niet waar de focus is, of opent het menu niet, dan zit er werk in het thema. Of dat werk opweegt tegen een overstap, blijkt pas na een test van de sjablonen.

Werkt u ook met sites die een ander bureau heeft gebouwd?

Ja. De meeste sites die wij toegankelijk maken, zijn door een ander gebouwd. Wij hebben dan wel beheerderstoegang nodig, en bij voorkeur een overzicht van wat er op maat is gemaakt.

Vragen over toegankelijkheid?

Vraag een gratis websitecheck aan. U ontvangt binnen één werkdag een helder rapport, zonder verplichtingen.

Reactie binnen 4 werkuren
WhatsApp