Visuele controle: kolommen, tekst en foto's op alle schermen
Een pagina zonder overloop kan nog steeds moeilijk leesbaar zijn. Controleer verhoudingen, lange inhoud en interacties voordat u wijzigingen publiceert.
Zes herhaalbare controles
Kies representatieve pagina's
Test homepage, categorie, artikel, dienst, formulier en tabel. Neem een lange titel, een taal van rechts naar links en meerdere foto's op.
Vergelijk kolommen
Controleer breedtes van 320, 390, 768, 1280, 1440 en 1920 px. Bekijk uitlijning, leesvolgorde en tussenruimte. Verberg fouten niet met verborgen overloop.
Vergroot tekst
Test tekst op 200% en herschikking bij 320 CSS-pixels breed. Informatie en bediening moeten beschikbaar blijven; tabellen mogen afzonderlijk scrollen.
Controleer foto's
Bekijk uitsnede, onderwerp, afmetingen en bronvermelding. Rek foto's niet uit met de aangrenzende tekst. Beschrijf zichtbare inhoud en herken stockfoto's.
Test interacties
Gebruik het toetsenbord voor menu's, filters, FAQ's en formulieren. Controleer focus, fouten en behouden invoer zonder een echte aanvraag te versturen.
Bewaar bewijs
Noteer URL, taal, breedte, browser, fout en resultaat na herstel. Vul laboratoriummetingen aan met gebruikersgegevens zodra voldoende verkeer beschikbaar is.
Controleverslag
- URL en taal
- Scherm en zoomniveau
- Fout en schermafbeelding
- Herstel en resultaat van de hertest
Werkmethode, geen conformiteitsverklaring. Pas de reikwijdte aan en documenteer uitzonderingen.
Voor publicatie: zes functionele controles
- Doorloop menu’s, links, downloads en taalwissels; controleer de echte bestemming.
- Gebruik fictieve invoer: lege velden, ongeldige adressen, accenten en lange teksten.
- Controleer of fouten het veld benoemen, met het toetsenbord werken en bruikbare invoer bewaren.
- Test ook servervalidatie: browsercontroles zijn te omzeilen.
- Maak onderscheid tussen ontvangstbevestiging en daadwerkelijke aflevering; gebruik een toegestaan testadres.
- Controleer gedrag zonder JavaScript, afwijzingen en herstel; bewaar geen geheimen in bewijs.
Situaties en passende controles
Scrol de tabel op kleine schermen horizontaal. Geef de tabel met het toetsenbord focus en gebruik de pijltjestoetsen.
| Situatie | Wat dit aangeeft | Nuttige controle |
|---|---|---|
| Een bediening verdwijnt bij tekst op 200%. | De taak blijft na vergroting niet toegankelijk. | Pas de indeling aan en test met toetsenbord. |
| Een foto rekt uit of laat een groot desktopgat. | De verhoudingen verstoren naburige inhoud. | Controleer groottebeperkingen en leesvolgorde. |
| overflow: hidden snijdt een tabel af. | Gegevens worden verborgen. | Geef de tabel een eigen toetsenbordbedienbaar scrolgebied en cellen met tekstomloop. |
| Een vertaalde kop wordt afgesneden. | Eén taal testen is onvoldoende. | Test lange teksten, RTL-talen en daadwerkelijk taalwisselen. |
Fictief voorbeeld
Een fictieve dienstenpagina oogt correct op 1.440 pixels. Op 320 wordt de lange vertaalde kop afgesneden; bij tekst op 200% is een FAQ-bediening onbereikbaar.
Beperk de foto, laat kolommen krimpen en tekst omlopen. Herhaal de taak op 320, 390, 768 en 1.440 pixels met tekstvergroting en toetsenbord. Leg resterende fouten vast en test na correctie opnieuw.
Acceptatiecriteria
- Informatie en bediening zijn leesbaar bij representatieve breedtes en talen.
- Tekstvergroting en toetsenbord laten de taak afronden.
- Versie, browser, taal en resultaten van de hertest zijn vastgelegd.
Praktische vragen
Is een schermafbeelding voldoende?
Nee. Die toont één toestand. Test ook lange inhoud, toetsenbordgebruik en geopende, gefilterde en fouttoestanden.
Bestaat een universele lettergrootte?
Nee. Beoordeel leesbaarheid, regellengte, zoom en contrast. Grootte alleen garandeert geen toegankelijkheid of evenwicht.
Hoe leest u Core Web Vitals?
De grenzen voor goede ervaringen zijn LCP ≤ 2,5 s, INP ≤ 200 ms en CLS ≤ 0,1 op het 75e percentiel. Ze meten laden, interactie en stabiliteit en vervangen geen visuele controle.
Is voor elk mogelijk apparaat een schermafbeelding nodig?
Kies belangrijke paginafamilies, nuttige taken en browsers met waargenomen verschillen. Leg de dekkingsgrenzen vast: enkele beelden bewijzen niet alle apparaten.
Hoe geef je weergavecorrecties prioriteit?
Herstel eerst geblokkeerde taken, verborgen gegevens en leesbaarheid. Verbeter daarna verhoudingen, uitlijning en afstand en controleer de werking van andere pagina's.