Toegankelijke content op het Inspraakplatform
Een praktische gids voor webredacteuren die het Inspraakplatform van Hoplr vullen met content.
Over Hoplr en het Inspraakplatform
Hoplr is het sociale netwerk voor buurten en overheden — een privacyvriendelijk platform voor buurtcommunicatie, participatie en burenhulp, zonder advertenties of algoritmes. Lokale overheden gebruiken het Inspraakplatform om buurtgericht te informeren en bewoners bij beleid te betrekken: nieuws, enquêtes, projectpagina's en gesprek lopen er via één kanaal.
250+
Lokale overheden gebruiken Hoplr
1,2M
Burgers actief op het netwerk
WCAG 2.2
Techniek voldoet aan niveau AA
De techniek van het platform is honderd procent toegankelijk — daar zorgt Hoplr voor. Maar één vage "lees meer"-link, een lege alt-tekst bij een belangrijke foto of een video zonder ondertiteling kan dat helemaal teniet doen. Deze instructie helpt je jouw deel goed te doen.
Per onderwerp lees je wat er vaak misgaat, hoe je het zelf opspoort, en hoe je het oplost. Op properaccess.nl/tools staan gratis tools waarmee je je eigen content kunt checken.
Koppen markeren als kop
Een tussenkop vetgedrukt typen ziet eruit als een kop, maar in de code is het gewone tekst. Schermlezers slaan dan over wat ze als kop hadden kunnen aankondigen.
Fout
Een vetgedrukte zin
De tekst eronder...
Goed
Een echte kop
De tekst eronder...
Kop 2 ▾
B
I
Zelf checken
Vul de URL in op de Koppenstructuur checker — je ziet meteen welke teksten als kop zijn gemarkeerd en welke alleen vetgedrukt zijn.
Oplossing
Gebruik in de editor de Kop-dropdown ("Kop 2", "Kop 3"). Niveau 1 is meestal de paginatitel — die wordt automatisch geplaatst.
Geen vetgedrukte of cursieve alinea's
Vet en cursief zijn voor nadruk-op-één-woord, niet voor hele zinnen of alinea's. Een complete alinea vet maken geeft visuele ruis én verkeerde signalen aan schermlezers.
Fout
Bewoners kunnen via dit platform meedoen aan onderzoeken, projecten en activiteiten in hun buurt.
Goed
Bewoners kunnen via dit platform meedoen aan onderzoeken, projecten en activiteiten in hun buurt.
Zelf checken
Loop je tekst door. Loopt vet of cursief langer dan 2-3 woorden? Dan klopt het niet.
Oplossing
Verwijder de opmaak. Wil je een passage laten opvallen, gebruik dan een kop of nieuwe alinea.
Lijsten markeren als lijst
Streepjes zelf intypen levert visueel een lijst op, maar in de code blijft het gewone tekst. Schermlezers kondigen dan geen "lijst met drie items" aan.
Fout — streepjes getypt
- Reageer op nieuws
- Doe mee aan enquêtes
- Bekijk projecten
Goed — echte lijst
- Reageer op nieuws
- Doe mee aan enquêtes
- Bekijk projecten
☰
1.
Zelf checken
Klik in een item van je lijst. Staat de bullet- of nummerknop in de editor ingedrukt? Zo niet, is het geen echte lijst.
Oplossing
Gebruik de bullet- of nummerknop in de editor. Een schermlezer kondigt dan aan "lijst met drie items" voordat hij voorleest.
Taalwisselingen aangeven
Een Engels citaat midden in een Nederlandse tekst wordt anders met Nederlandse uitspraakregels voorgelezen — onverstaanbaar resultaat.
Wat de schermlezer leest
"We zijn open en honnesst" — uitgesproken met Nederlandse klanken, terwijl er staat: "We are open and honest"
Zelf checken
Loop je tekst door en zoek anderstalige passages — citaten, productnamen, leuzen.
Oplossing
Heeft je editor een "Taal van fragment"-optie, gebruik die. Anders: noteer welke stukken anderstalig zijn en vraag je webmaster het lang-attribuut toe te voegen.
Een alt-tekst is geen technische omschrijving van de afbeelding, maar de tekstvariant van wat de afbeelding doet op die plek in de pagina. Soms is dat zichtbare logo-tekst, soms een linkbestemming, soms een korte beschrijving — en soms is een lege alt het juiste antwoord.
Twijfel per afbeelding? Gebruik de Alt-tekst keuzehulp — een beslisboom.
Decoratieve afbeeldingen — leeg alt-attribuut
Decoratief = je mist geen informatie zonder de afbeelding. Schermlezer hoeft hem niet voor te lezen.
Fout
alt="decoratieve afbeelding"
alt="icoon"
Zelf checken
Denk de afbeelding weg. Mis je informatie? Zo nee, is hij decoratief.
Oplossing
Laat het alt-veld leeg, of vul exact "" in. Hoe je dat instelt verschilt per CMS — vraag je webmaster.
Informatieve afbeeldingen — beschrijvende alt
Draagt de afbeelding informatie? Dan beschrijft de alt wat erop staat en wat de bezoeker eraan heeft.
Voorbeeld uit de oorspronkelijke audit
Een enquêtevraag toonde een belangrijke foto met alt-tekst "survey image". Een bezoeker die de foto niet kon zien, miste de hele kern van de vraag.
Fout
alt="survey image"
alt="afbeelding 3"
Goed
alt="Het sportveld naast de sporthal — een grasveld met twee voetbaldoelen"
Zelf checken
Vul je URL in op de Alt-tekst checker en zie meteen welke alt-teksten ontbreken of nietszeggend zijn.
Oplossing
Schrijf in max. 150 tekens wat te zien is en waarom het ertoe doet. Begin met het belangrijkste.
Afbeeldingen die ook een link zijn
Een klikbare afbeelding krijgt geen beschrijving van de afbeelding, maar van de linkbestemming.
🖱️
Normale cursor → geen link
👆
Handje → er zit een link achter
Zelf checken — hover-test
Beweeg je muis over de afbeelding. Verandert de cursor in een handje? Dan is de afbeelding klikbaar en moet de alt-tekst de bestemming beschrijven.
Fout
alt="Foto van kind op speelplein"
Goed
alt="Lees het artikel over Spelen, Bewegen en Ontmoeten in Zuiddorpe"
Oplossing
Beschrijf waar de link heen gaat. Staat naast de afbeelding al een tekstuele link met dezelfde naam? Laat de alt dan leeg om herhaling te voorkomen.
Logo's en afbeeldingen met zichtbare tekst
Zichtbare tekst in een logo of afbeelding moet ook in de alt staan. Anders krijgen schermlezer-gebruikers minder informatie dan ziende bezoekers.
Voorbeeld uit de oorspronkelijke audit
Het logo toonde zichtbaar "doemee doemee.terneuzen.nl", maar de alt was "Banner of gemeente Terneuzen". Schermlezer-gebruikers kregen iets anders te horen dan wat er stond.
Zelf checken
Lees hardop wat er in het logo staat. Vergelijk met de alt — komt elk zichtbaar woord terug?
Oplossing
Zet álle zichtbare tekst in de alt. Linkt het logo naar de homepage? Combineer: alt="doemee — naar de homepage".
Afbeeldingen met veel tekst (organogram, infographic)
Een organogram of infographic met veel tekst past niet in 150 tekens. Een korte alt voldoet dan niet — de informatie hoort ook tekstueel op de pagina.
Zelf checken
Bevat de afbeelding meer dan een paar woorden tekst? Dan heb je een uitgeschreven alternatief nodig.
Oplossing
Schrijf de informatie uit in tekst direct onder of boven de afbeelding, of link naar een toegankelijke PDF/webpagina met dezelfde info. In de alt: alt="Organogram. Volledige tekst hieronder."
Schermlezer-gebruikers springen van link naar link om snel een pagina te scannen. Dat werkt alleen als elke linktekst uit zichzelf duidelijk maakt waar hij heen gaat.
Geen vage linkteksten
"Lees meer", "Klik hier", "Hier" — uit context losgehaald zegt het niets.
Voorbeeld uit de oorspronkelijke audit
Onder een nieuwsbericht stond een "Lees meer"-link. Op een overzichtspagina hoorde een schermlezer-gebruiker tien keer achter elkaar "Lees meer, link" zonder context.
Wat de schermlezer leest in linklijst-modus
"Lees meer. Lees meer. Lees meer. Lees meer. Lees meer..."
Zelf checken
Lees alleen de linkteksten van je pagina, zonder de zinnen eromheen. Snap je nog steeds waar elke link heen gaat? Of vul je URL in op de Link checker.
Oplossing
Schrijf linktekst die op zichzelf staat — vermeld het onderwerp en de actie.
Geen identieke linkteksten naar verschillende bestemmingen
Tien project-cards met allemaal "Bekijk project" linken naar tien verschillende projecten. Een blinde bezoeker kan ze niet uit elkaar halen.
Voorbeeld uit de oorspronkelijke audit
Op de projectenpagina had elke project-card de linktekst "Bekijk project". Eén project = "Bekijk project", tien projecten = ook tien × "Bekijk project".
Oplossing
Maak elke linktekst onderscheidend — voeg de projectnaam, datum of locatie toe.
Geen overbodige tekst in link-namen
Een link met tekst plus een klikbare afbeelding waarvan de alt-tekst dezelfde naam herhaalt — de schermlezer leest dan een wirwar voor.
Voorbeeld uit de oorspronkelijke audit
Een logo-link combineerde de tekst "In samenwerking met" met afbeeldingen met alt "hoplr logo" en "hoplr text". De link werd voorgelezen als "In samenwerking met hoplr logo hoplr text".
Zelf checken
Lees alle onderdelen van een link aan één stuk hardop — tekst plus alt-teksten samen. Klinkt het natuurlijk?
Oplossing
Laat één van beide leeg of maak de alt-tekst beschrijvend in plaats van technisch.
Video draagt vaak het belangrijkste deel van een participatieboodschap. Wie doof is, mist het geluid. Wie blind is, mist het beeld. Wie liever leest, heeft een transcript nodig.
Audio-only content heeft een transcript (1.2.1)
Een podcast of geluidsopname zonder geschreven versie is onbruikbaar voor wie niet (goed) hoort.
Zelf checken
Heb je audio geplaatst? Is er een tekstuele versie? Zo niet, is die nodig.
Oplossing
Schrijf een transcript en plaats het direct onder de audiospeler. Een uitklap-accordeon werkt prima.
Video met geluid heeft ondertiteling (1.2.2)
Voor doven, slechthorenden én bezoekers op een telefoon zonder geluid is ondertiteling essentieel.
Zelf checken
Zet het geluid uit en bekijk je video. Begrijp je nog wat er wordt gezegd? Zo niet, is ondertiteling nodig.
Oplossing
Voeg ondertiteling toe via YouTube Studio of een vergelijkbaar platform. Automatische ondertiteling is een startpunt — controleer altijd op fouten en namen.
Video met belangrijke visuele info heeft een audiobeschrijving (1.2.3 / 1.2.5)
Sprekers in beeld, namen in beeld, schema's — als die visuele info niet ook hoorbaar is, mist een blinde bezoeker context.
Zelf checken
Zet het beeld uit (of luister met je ogen dicht). Begrijp je nog wat er gebeurt?
Oplossing
Voeg een tweede audiospoor toe met een verteller die de visuele info beschrijft, óf zet de visuele info uit in een tekst naast de video.
YouTube-embeds met conflicterende sneltoetsen (2.1.4)
De YouTube-speler reageert op enkele letters (k, m, j, l) — die botsen met schermlezer-commando's en starten of muten ongewenst de video.
Zelf checken
Lastig zelf te testen zonder schermlezer. Maak bij elke video-embed een aantekening: "moet IT checken op disablekb-parameter".
Oplossing
Voeg bij YouTube-embeds ?disablekb=1 toe aan de URL. Of vraag IT om een toegankelijke videospeler.
Niet verwijzen naar kleur of plek
"Klik op de rode knop", "Het formulier in de rechter kolom" — werkt niet voor wie kleurenblind is, een schermlezer gebruikt, of de site op een telefoon bekijkt (waar "rechts" eigenlijk "onderaan" is).
Fout
Klik op de rode knop hieronder.
Goed
Klik op de knop "Verzenden" hieronder.
Zelf checken
Zoek in je tekst naar kleur- of plaatsaanduidingen: "rood", "groen", "links", "rechts", "boven", "onder".
Oplossing
Verwijs naar wát er staat, niet hoe het eruitziet of waar het staat.
Voldoende kleurcontrast in afbeeldingen, grafieken en infographics
Tekst in een afbeelding heeft minstens 4,5:1 contrast nodig met de achtergrond (3:1 voor grote tekst).
Onvoldoende leesbaar
1,5:1 — fout
Goed leesbaar
12:1 — goed
Zelf checken
Pak twee kleuren uit je afbeelding en check ze met de Kleurcontrast checker. Of bekijk de afbeelding op je telefoon in fel zonlicht — is de tekst nog leesbaar?
Oplossing
Bij drukke achtergrond: voeg een halfdoorzichtig vlak achter de tekst toe, of kies een effen achtergrond.
Kleur niet als enige drager van informatie
Een grafiek waar balken alleen op kleur te onderscheiden zijn, of een statusindicator alleen op rood/groen — bezoekers met kleurenblindheid kunnen ze niet uit elkaar halen.
Zelf checken
Maak een schermafdruk en open hem in Chrome DevTools → Rendering → Emulate vision deficiencies. Of: print je grafiek in zwart-wit. Is de info nog te lezen?
Oplossing
Voeg een tweede onderscheid toe: patroon of arcering in balken, een datalabel direct op de balk, of een icoon naast een statustekst (✕ "afgekeurd", ✓ "goedgekeurd").
Datatabellen met juiste kolomkoppen
Zonder gemarkeerde kop-rij weet de schermlezer niet welke kolom welk getal beschrijft.
Zelf checken
Zet de cursor in de bovenste rij. Staat "Tabelkop" of "Header" actief in de editor? Of vul je URL in op de Tabel checker.
Oplossing
Selecteer de kop-rij en stel het rijtype in op "Tabelkop" / "Header". In HTML wordt dat <th> in plaats van <td>.
Geen tabel voor layout
Een tabel hoort alleen voor data — niet om twee blokjes naast elkaar te zetten.
Zelf checken
Zijn er rijen en kolommen die elkaar verklaren (zoals "Maand" → "Bedrag")? Zo niet, is het geen datatabel.
Oplossing
Vraag je webmaster om een passend blok-element of twee-koloms-layout via CSS.
Duidelijke foutmeldingen met suggestie
"Ongeldig" of "Vul dit veld in" zonder uitleg — voor bezoekers met cognitieve beperking, schermlezer-gebruikers of mensen in haast niet genoeg om te herstellen.
Fout
jansen.example.nl
⚠ Ongeldig
Zelf checken
Vul je eigen formulier expres fout in. Zegt de melding wát er mis is én hoe je het oplost?
