Mobiele toetsenbordopening verbergt de verzendknop
7 november 2026 · 5 min leestijd · Marketing Scan
In dit artikel
Begrijp wat er verandert wanneer het toetsenbord opent
Bij het openen van het toetsenbord verkleint op sommige toestellen de zichtbare ruimte, terwijl andere browsers de pagina enkel verschuiven of het toetsenbord over de inhoud leggen. Dat gedrag verschilt per besturingssysteem, browser en versie. Je mag er dus niet van uitgaan dat wat op één toestel lukt, overal werkt.
Dit is geen puur esthetisch probleem. Een knop die bestaat maar niet bereikbaar is, voelt voor de bezoeker als een fout in de pagina. De MDN-uitleg over webprestaties noemt vragen als 'reageren knoppen?' en 'scrolt het soepel?' als onderdeel van de gebruikerservaring, maar behandelt het gedrag van mobiele toetsenborden niet. De testprocedure hieronder is dus een eigen voorstel.
Stel een testopstelling samen
Kies minstens twee echte toestellen: één iOS en één Android, liefst met verschillende schermhoogtes, plus de browsers die je bezoekers vermoedelijk gebruiken. Gebruik de browserontwikkeltools op desktop alleen als voorverkenning. Zet een testlijst op met:
- toestel, besturingssysteem en browserversie;
- staande en liggende oriëntatie;
- of de pagina in een in-appbrowser werd geopend, bijvoorbeeld via een link uit een sociale app;
- welk veld focus krijgt en hoe het toetsenbord eruitziet (tekst, nummer, e-mail).
Zonder deze gegevens kun je een bevinding later niet reproduceren of overdragen aan de ontwikkelaar.
Stappenplan: meten en bekijken
- Open het formulier op de eerste stap en noteer waar de verzendknop staat: onderaan de inhoud of vast onderaan het scherm.
- Tik in het eerste veld. Kijk of het veld zichtbaar blijft boven het toetsenbord.
- Ga veld voor veld naar beneden met de volgende-toets van het toetsenbord. Noteer bij elk veld of het in beeld komt.
- Bij het laatste veld: probeer te scrollen tot de verzendknop. Lukt het niet, noteer hoe ver ze verborgen blijft.
- Sluit het toetsenbord en controleer of de pagina terugkeert naar een normale layout, zonder lege ruimte of verspringende knoppen.
- Herhaal in liggende stand en in de tweede browser.
Wie de zichtbare hoogte wil uitlezen, kan in een testpagina de hoogte voor en na het openen van het toetsenbord laten tonen. Beschouw dat als een hulpmiddel bij het zoeken, niet als bewijs dat de oplossing werkt.
Beslismatrix: oorzaak en aanpassing
| Wat je ziet | Mogelijke oorzaak | Richting van de aanpassing |
|---|---|---|
| Vaste knopbalk bedekt het laatste veld | Vaste positie ten opzichte van het scherm, vaste hoogte | Laat de balk meescrollen of voeg onderaan voldoende ruimte toe |
| Pagina scrolt niet tot de knop | Container met vaste hoogte of afgesneden overloop | Controleer de hoogte-instellingen van de containers |
| Veld springt uit beeld bij focus | Script dat de scrollpositie wijzigt | Test zonder het script en pas het aan |
| Knop zichtbaar maar moeilijk te raken | Te klein of te dicht bij de rand | Vergroot het raakoppervlak en de ruimte rondom |
| Probleem enkel in een in-appbrowser | Afwijkend gedrag van die omgeving | Test die context apart en kies een eenvoudiger layout |
Toegankelijkheid en snelheid na de wijziging controleren
Een oplossing die enkel met aanraking werkt, is niet af. Controleer of de volgorde van de velden logisch blijft en of de knop ook via de toetsenbordnavigatie van een schermlezer of extern toetsenbord bereikbaar is. De toegankelijkheidstutorials van het W3C bevatten praktijkrichtlijnen voor veelvoorkomende onderdelen. Zoek zelf na welke tutorial voor formulieren relevant is; deze gids baseert zich niet op de details ervan. Een controle van veldvolgorde en bereikbaarheid bewijst geen volledige WCAG-conformiteit.
Controleer ook of je aanpassing de pagina niet zwaarder maakt. De cursus over prestaties van web.dev behandelt onder meer hoe JavaScript en bronnen het laden beïnvloeden. Een extra script voor toetsenbordgedrag verdient dus een bewuste afweging.
Fictief overdrachtsvoorbeeld en volgende stap
Stel (fictieve invoer): een formulier met twaalf velden en een vaste verzendknop onderaan het scherm. Op een telefoon in staande stand bedekt het toetsenbord het onderste deel van het scherm. Verwachte controles na de aanpassing:
- Bij elk van de twaalf velden blijft het actieve veld zichtbaar.
- Na het laatste veld kun je de verzendknop volledig zien en aanraken, zonder het toetsenbord te sluiten.
- Na het sluiten van het toetsenbord is de layout hersteld.
- Dezelfde reeks lukt in een tweede browser en in liggende stand.
Noteer per toestel "geslaagd" of "niet geslaagd" en bewaar de lijst bij het ticket. Wil je daarnaast bekijken welke publieke signalen je site toont, dan kan dat via Marketing Scan. Een publieke scan meet zichtbare signalen en test geen formulier op een echt toestel.
Veelgestelde vragen.
Volstaat het om op desktop het venster smaller te maken?
Nee. Een smaller venster toont de layout, maar niet hoe een mobiel toetsenbord de zichtbare ruimte verandert. Gebruik het alleen als eerste verkenning en bevestig op echte toestellen.
Moet de verzendknop altijd vast onderaan blijven staan?
Niet noodzakelijk. Bij lange formulieren is een knop aan het einde van de inhoud vaak eenvoudiger, omdat ze niet met het toetsenbord botst. Kies een vaste knop alleen als je test dat ze bereikbaar blijft.
Hoe weet ik of het probleem bij mijn code of bij de browser ligt?
Maak een kale testpagina met enkel enkele velden en een knop, en vergelijk die op hetzelfde toestel. Gedraagt de kale pagina zich goed, dan is dat een aanwijzing dat de oorzaak in jouw layout of scripts zit. Verwijder die stap voor stap om dat te bevestigen, en houd rekening met verschillen tussen browser en versie.
Zegt een gelukte test dat alle bezoekers het formulier kunnen versturen?
Nee. Je bewijst alleen dat het werkt op de geteste combinaties van toestel, browser en oriëntatie. Breid je lijst uit wanneer je merkt dat bezoekers andere toestellen gebruiken.
Bronnen bij dit artikel
Hoe werkt een marketing scan? Meetmethode en grenzen
Van advies naar actie voor jouw website
Maak een gratis account voor één website. Controleer zes kenmerken van je homepage en bekijk maximaal drie bevindingen.
Herhaal de check handmatig één keer per zeven dagen. Voor volledige audits en automatische opvolging is uitgebreide toegang nodig.
Maak je gratis account