Een toegankelijke pop-up: modale vensters die niemand opsluiten

Een bezoeker leest uw artikel over vloerverwarming. Na vijf seconden verschijnt er een venster: “Schrijf u in voor onze nieuwsbrief”. Met de muis klikt u dat in een seconde weg. Maar deze bezoeker gebruikt alleen het toetsenbord. Hij drukt op Tab en de focus springt niet naar het venster, maar naar een link in de tekst eronder, die hij niet meer kan zien. Het kruisje rechtsboven bereikt hij pas na veertig keer tabben, of helemaal niet. Een toegankelijke pop-up voorkomt precies dit. Hieronder leest u wat zo’n venster technisch nodig heeft en hoe u uw eigen pop-ups test.

Wat een modaal venster anders maakt dan gewone inhoud

Een modaal venster legt zich over de pagina en vraagt eerst aandacht. Zolang het open staat, hoort de rest van de pagina niet bereikbaar te zijn. Voor een ziende muisgebruiker is dat vanzelfsprekend: de achtergrond is donkerder gemaakt en klikken ernaast doet niets of sluit het venster. Voor een toetsenbordgebruiker of iemand met een screenreader moet dat gedrag apart worden gebouwd. Gebeurt dat niet, dan staat het venster visueel bovenop, maar zit de bezoeker technisch nog gewoon in de pagina eronder.

Daaruit volgen vier eisen. Ze komen terug in meerdere WCAG-criteria, onder andere over toetsenbordbediening (2.1.1), geen toetsenbordval (2.1.2), focusvolgorde (2.4.3) en naam, rol en waarde (4.1.2).

De vier eisen voor een toegankelijke pop-up

1. De focus gaat het venster in

Zodra het venster opent, verplaatst u de focus naar het venster zelf, naar de kop of naar het eerste invoerveld. Een screenreader leest dan meteen voor wat er verschenen is. Blijft de focus achter op de pagina, dan merkt een blinde bezoeker niet eens dat er iets open staat.

2. De focus blijft binnen het venster

Met Tab loopt de bezoeker door de knoppen en velden in het venster, en na de laatste komt hij weer bij de eerste. De pagina eronder doet zolang niet mee. Bij het native <dialog>-element met showModal() regelt de browser dat grotendeels zelf: de rest van de pagina wordt inert. Bij zelfgebouwde vensters moet de ontwikkelaar dat met het inert-attribuut of met script oplossen.

3. Er is altijd een uitweg

De Escape-toets sluit het venster. Daarnaast is er een zichtbare sluitknop die een echte <button> is, met een naam die een screenreader kan voorlezen. Een kruisje als achtergrondafbeelding in een <div> is voor het toetsenbord vaak onbereikbaar en voor een screenreader naamloos.

4. De focus komt terug waar hij was

Na het sluiten zet u de focus terug op het element dat het venster opende, of op een logische plek als het venster vanzelf verscheen. Anders begint de bezoeker weer bovenaan de pagina en moet hij zijn plek opnieuw zoeken.

Zo ziet een goede basis eruit

Het native dialog-element is tegenwoordig in alle gangbare browsers bruikbaar en scheelt veel maatwerk. Een eenvoudig voorbeeld:

<button type="button" id="open-nieuwsbrief">Nieuwsbrief ontvangen</button>

<dialog id="nieuwsbrief" aria-labelledby="nb-titel">
  <h2 id="nb-titel">Onze nieuwsbrief</h2>
  <p>Eén keer per maand tips over onderhoud.</p>
  <label for="nb-mail">E-mailadres</label>
  <input id="nb-mail" type="email" autocomplete="email">
  <button type="submit">Aanmelden</button>
  <button type="button" class="sluiten">Sluiten</button>
</dialog>

Met showModal() opent u het venster, met close() sluit u het. De Escape-toets werkt dan standaard. Let wel: de sluitknop heeft hier de zichtbare tekst “Sluiten”. Kiest u voor alleen een kruisje, geef de knop dan een aria-label="Sluiten". Meer over waarom dit een knop moet zijn en geen link, leest u in het verschil tussen een knop en een link.

Timing: wanneer verschijnt het venster?

Technisch kan een pop-up in orde zijn en toch in de weg zitten. Een nieuwsbriefvenster dat na een paar seconden vanzelf opent, onderbreekt iedereen. Voor een screenreadergebruiker die halverwege een alinea is, voelt het alsof iemand het boek uit zijn handen trekt. Voor iemand met een concentratieprobleem is de draad daarna weg.

Een paar afwegingen die in de praktijk goed werken:

• Laat de bezoeker het venster zelf openen. Een knop “Nieuwsbrief ontvangen” aan het eind van een artikel is minder opdringerig en meestal net zo effectief bij lezers die echt geïnteresseerd zijn.
• Geen pop-up tijdens een handeling. Niet terwijl iemand een formulier invult, afrekent of zoekt.
• Toon hem niet steeds opnieuw. Heeft iemand het venster gesloten, onthoud dat dan voor de rest van het bezoek.
• Geen afteltimer zonder reden. “Nog 30 seconden voor 10% korting” zet druk op mensen die meer tijd nodig hebben.

Een melding die niet de hele pagina hoeft te blokkeren, zoals “Uw bestelling is verzonden”, is vaak beter als een rustige melding op de pagina zelf dan als modaal venster.

En de cookiebanner?

De cookiebanner is voor veel sites het eerste modale venster dat een bezoeker ziet. Daar gelden dezelfde eisen: focus erin, knoppen met duidelijke namen, en geen val waar iemand niet meer uit komt. Omdat cookiebanners meestal uit een plugin of externe dienst komen, heeft u er minder grip op. Hoe u daarmee omgaat, staat op de pagina over een cookiebanner die iedereen kan bedienen.

Uw eigen pop-ups testen in vijf minuten

1. Laad de pagina en leg de muis weg.
2. Laat het venster verschijnen, of open het met Tab en Enter.
3. Kijk waar de focus staat. Ziet u een duidelijke focusrand in het venster? Zo niet, lees dan hoe u de focus zichtbaar maakt.
4. Tab door alle elementen. Blijft u in het venster, of verdwijnt de focus naar de pagina erachter?
5. Druk op Escape. Gaat het venster dicht? Staat de focus daarna op een logische plek?
6. Herhaal het op een telefoon met 200% zoom. Past het venster nog op het scherm, en is de sluitknop zichtbaar zonder scrollen?

Heeft u een screenreader bij de hand, zoals NVDA op Windows of VoiceOver op een Mac of iPhone, luister dan ook of de titel van het venster wordt voorgelezen zodra het opent. Bredere tips om de hele site met het toetsenbord na te lopen, vindt u bij toetsenbordnavigatie op uw website.

Plugins en paginabouwers

Veel WordPress-sites gebruiken een pop-upplugin of de pop-upfunctie van een paginabouwer. De kwaliteit verschilt sterk. Sommige gebruiken het dialog-element of zetten de focus netjes in het venster, andere tonen alleen een gestileerde laag. Vertrouw niet op een vinkje “toegankelijk” in de instellingen: test het met de stappen hierboven. Lukt het niet, dan is het vaak eenvoudiger om de automatische pop-up te schrappen en een gewone knop met een goed gebouwd venster te gebruiken.

Pop-ups zijn één onderdeel van een bredere aanpak. Wilt u weten waar u verder op moet letten, dan geeft onze uitleg over een toegankelijke website het overzicht. En wilt u dat WebMaintor uw pop-ups en formulieren nakijkt, dan kijken we graag mee.