Ontwerp

De regel is kort: zet in de HTML wat eerst gelezen moet worden, en gebruik CSS om te bepalen wáár het staat.

Deze drie eigenschappen verplaatsen het beeld zonder de volgorde te veranderen. Ze zijn alle drie nuttig, en worden pas een probleem zodra ze de leesvolgorde omdraaien:

.blok  { order: -1; }
.kaart { grid-row: 1; }
.zij   { position: absolute; top: 0; }

Let ook op CSS-kolommen. Die lezen van boven naar beneden per kolom, niet van links naar rechts. Dat is precies wat je wilt bij lopende tekst, en precies wat je niet wilt bij een lijst met stappen:

.tekst { columns: 2; }

De veilige gewoonte is om eerst zonder opmaak te bouwen. Lees de pagina van boven naar beneden; klopt het verhaal, dan mag de opmaak erop.

Open dit onderwerp op een eigen pagina

Een site heeft lichte en donkere vlakken. Een focusrand van één kleur valt daardoor altijd op één van de twee weg. Zet daarom een lichte ring binnen een donkere: op een donkere knop valt de lichte op, op een lichte knop de donkere.

In de code ziet dat er zo uit:

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;   /* blijft staan in de hoogcontrastmodus */
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px #FFFFFF,              /* binnenring: licht */
    0 0 0 5px #08251C;              /* buitenring: donker */
  border-radius: 6px;
}

De doorzichtige outline lijkt overbodig maar is dat niet. In de hoogcontrastmodus van Windows verwijdert het systeem alle kleuren en schaduwen, waardoor de box-shadow verdwijnt. Een outline blijft wel staan en krijgt dan de systeemkleur.

Drie oplossingen die niet genoeg zijn:

• Alleen de kleur van de knop veranderen. Kleurverschil alleen is geen zichtbare focus, en voor wie kleur anders ziet werkt het niet.
• De rand strak om het onderdeel leggen. Met outline-offset blijft er lucht, waardoor de rand ook op een gekleurde knop opvalt.
• Een rand dunner dan 2 pixels. Op een vergroot scherm valt die weg tegen de rand van het onderdeel zelf.

Open dit onderwerp op een eigen pagina

Zet de automatische schermdraaiing van de telefoon aan, open de site en draai het toestel om. Meer is er niet nodig.

Waar je op let:

• Verschijnt er een melding dat je moet draaien? Dan is dat de fout.
• Blijft alle inhoud zichtbaar en bruikbaar?
• Gaat het menu nog open, en past het op het scherm?
• Werkt een formulier nog, inclusief de knop onderaan?
• Blijf je op dezelfde plek in de pagina, of springt hij naar boven?

Zonder telefoon kan het ook: maak het browservenster laag en breed, bijvoorbeeld 900 bij 400 pixels. In de ontwikkelaarshulpmiddelen van de browser is ook een toestel te kiezen en te draaien.

Open dit onderwerp op een eigen pagina

Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

De richtlijnen vereisen voor deze onderdelen een contrastverhouding van ten minste 3:1 tegen alle aangrenzende kleuren. Het kan dus zijn dat een contrast op meerdere plekken gemeten moet worden.

Formulierelementen

Formulierelementen, zoals invoervelden, keuzerondjes en selectievakjes moeten genoeg contrast hebben. Zorg voor een duidelijke rand of een achtergrondkleur met voldoende contrast. Ook de verschillende statussen van deze elementen moeten genoeg contrast hebben. Het moet duidelijk zijn of een keuzerondje of selectievakje is geselecteerd of juist niet.

Iconen

Informatieve iconen en iconen die ook worden gebruik als link of knop moeten genoeg contrast hebben.

Grafieken en diagrammen

Ook onderdelen in grafieken en diagrammen moeten genoeg contrast hebben. Denk hierbij aan de lijnen in een grafiek en de onderdelen in een diagram.

Open dit onderwerp op een eigen pagina

Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

De contrastverhouding voor tekst moet voldoen aan minimaal:

• 4,5:1 voor tekst die kleiner is dan 24px of 18,5px vetgedrukt.
• 3:1 voor tekst die groter is dan 24px of 18,5px vetgedrukt.

Deze contrasteisen gelden ook voor tekst op afbeeldingen.

Open dit onderwerp op een eigen pagina

Kleur kan helpen om eenvoudig informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden, maar het mag niet de enige manier zijn. Mensen met een visuele beperking kunnen informatie die alleen met kleur worden aangegeven niet (of niet goed) onderscheiden.

Gebruik ook andere manieren, zoals met tekst of een icoon.

Open dit onderwerp op een eigen pagina

Zoomen werkt in elke browser, ook als maten in pixels zijn opgeschreven. De instelling voor de standaard tekstgrootte werkt echter alleen met relatieve eenheden — en dat is de instelling die bezoekers één keer aanzetten en daarna vergeten.

/* volgt de instelling van de bezoeker niet */
body { font-size: 16px; }

/* volgt hem wel */
body { font-size: 1rem; }
h2   { font-size: 1.6rem; }

Laat ook maten meegroeien met de tekst. Gebruik een minimumhoogte in plaats van een vaste hoogte, en geef de leesbreedte op in tekens:

.knop {
  padding: 0.7em 1.4em;
  min-block-size: 2.75rem;   /* geen height */
}

p { max-inline-size: 68ch; }

em rekent met de tekstgrootte van het onderdeel zelf, rem met die van de pagina. Voor ruimte binnen een knop is em handig, voor alles daarbuiten rem.

Open dit onderwerp op een eigen pagina

De fout zit bijna altijd op één van twee plekken. De eerste is een media query die de inhoud verbergt:

/* verbergt de site in liggende stand — nooit doen */
@media (orientation: landscape) {
  .inhoud { display: none; }
  .draai-melding { display: block; }
}

Gebruik orientation gerust om de indeling aan te passen. Gebruik hem nooit om iets te verbergen.

De tweede is het manifest of de app-instellingen:

{
  "orientation": "portrait"
}

De melding weghalen is de eerste stap. De tweede is zorgen dat het er liggend ook goed uitziet. In liggende stand is het scherm laag en breed, en dat is dezelfde situatie als bij inzoomen:

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hero { min-block-size: 60vh; }   /* niet: height: 60vh */

Open dit onderwerp op een eigen pagina

Voor deze test is geen schermlezer nodig. Zet de opmaak uit en lees wat er staat.

Plak dit in de console van de browser. Alle stijlen gaan uit en de pagina komt in de volgorde van de code te staan:

document.querySelectorAll('style, link[rel=stylesheet]')
  .forEach(function (el) { el.disabled = true; });

Waar je op let:

• Lees van boven naar beneden. Klopt de volgorde met wat je gewend bent?
• Staan koppen boven de tekst waar ze bij horen?
• Komt bij een kaart eerst de naam en dan de prijs, of andersom?
• Staat een bijschrift onder de juiste afbeelding?
• Komt het menu vóór de inhoud, en de voettekst erna?

De tweede test is het venster versmallen tot 320 pixels. Alles komt dan onder elkaar te staan, in de volgorde van de code. Springt er iets naar een onverwachte plek, dan is de fout gevonden — en meteen ook een afwijking op 1.4.10.

Ververs de pagina om de stijlen terug te krijgen.

Open dit onderwerp op een eigen pagina

Een knop of link moet minstens 24 bij 24 pixels groot zijn. Is hij kleiner, dan moet er minstens 24 pixels ruimte omheen zitten waar geen andere knop staat. Een vingertop is ongeveer een centimeter breed, zo’n 40 pixels, en dus groter dan een sluitkruisje van 16 bij 16.

Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA. Vierentwintig is een ondergrens en geen streefwaarde: voor een vinger is 44 pixels prettiger. Apple en Google houden in hun eigen richtlijnen 44 en 48 aan.

Dit raakt vooral:

• Bezoekers met trillende handen, door parkinson, MS of ouderdom.
• Bezoekers die de aanwijzer met hun ogen of hun hoofd besturen.
• Bezoekers met één werkende hand, die de telefoon vasthouden en bedienen met dezelfde duim.

Open dit onderwerp op een eigen pagina

Hiervoor is geen software nodig die je moet installeren. De browser toont de maat van elk onderdeel.

Eén knop meten:

• Klik met de rechtermuisknop op de knop en kies Inspecteren.
• Beweeg de muis over het onderdeel in de code. De browser tekent het gebied op de pagina en zet de maat erbij, bijvoorbeeld 18 × 18.
• Is een van beide getallen kleiner dan 24, meet dan de ruimte tot de knop ernaast.

Een hele pagina in één keer: plak dit in het tabblad Console. Het zet een rode rand om elke knop en link die te klein is.

document.querySelectorAll('a, button, input, select, summary')
  .forEach(function (el) {
    var r = el.getBoundingClientRect();
    if (r.width < 24 || r.height < 24) {
      el.style.outline = '2px solid red';
      console.log(Math.round(r.width) + '×' + Math.round(r.height), el);
    }
  });

Doe de test ook op een smal scherm. Knoppen die op een breed scherm ruim staan, komen op een telefoon tegen elkaar aan.

Open dit onderwerp op een eigen pagina

Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.

Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.

Open dit onderwerp op een eigen pagina

De zichtbaarheid van de focus is met het toetsenbord te toetsen. Er is geen software voor nodig.

Ga als volgt te werk:

• Open de pagina en klik één keer bovenaan, buiten een link of invoerveld.
• Druk op Tab, en blijf drukken tot je onderaan de pagina bent.
• Kijk bij elke druk of zichtbaar is welk onderdeel is geselecteerd.

Let daarbij op vier dingen:

• Verdwijnt de focus? Er verandert niets in beeld, terwijl er wel iets is geselecteerd.
• Springt de focus heen en weer? Dan klopt de volgorde niet met wat er staat. Dat valt onder 2.4.3.
• Kom je ergens niet meer weg? Een venster of videospeler die je met Tab niet uit komt is een toetsenbordval.
• Schuift de pagina mee? Staat het geselecteerde onderdeel half onder een vaste balk, dan valt dat onder 2.4.11.

Is de focus nergens te zien, zoek dan in het stijlbestand naar deze regels:

outline: none;
outline: 0;

Staan die er, en staat er geen eigen rand voor in de plaats, dan is de oorzaak gevonden.

Open dit onderwerp op een eigen pagina

Knoppen hoeven er niet groter uit te zien. Het gaat om het gebied dat op een tik reageert, en dat mag onzichtbaar zijn.

De eenvoudigste oplossing laat het pictogram op 16 pixels staan en maakt de knop eromheen 24:

.icoonknop {
  min-inline-size: 24px;
  min-block-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Is er echt geen ruimte, vergroot het gebied dan met een onzichtbare laag over de knop heen. Het beeld blijft klein, het doel wordt groot:

.icoonknop { position: relative; }

.icoonknop::after {
  content: "";
  position: absolute;
  inset: -8px;          /* 8 pixels extra aan elke kant */
}

Waar het meestal misgaat:

• Rijen pictogrammen naast elkaar in een tabel of werkbalk.
• Het sluitkruisje van een venster. Dat is bijna altijd te klein, terwijl het de knop is die iemand onder tijdsdruk zoekt.
• Paginanummers onder een lijst, vaak 20 bij 20 met een paar pixels ertussen.

Open dit onderwerp op een eigen pagina

Een breedte in pixels blijft staan, hoe smal het scherm ook wordt. Een maximumbreedte krimpt mee:

/* houdt vast, ook op 320 pixels */
.kaart { width: 640px; }

/* krimpt mee */
.kaart { max-inline-size: 640px; }

Laat kolommen zelf terugvallen. Met auto-fit hoef je geen enkel breekpunt te bedenken: de kolommen worden smaller tot ze niet meer passen en gaan dan onder elkaar.

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

Een brede tabel of een codevoorbeeld hoeft niet af te breken. Die mogen schuiven, maar dan in hun eigen kader en niet met de hele pagina:

.tabel-omhulsel { overflow-x: auto; }

Open dit onderwerp op een eigen pagina

Er zijn drie regels CSS die dit criterium breken. Wie die opzoekt is er bijna.

Een vaste hoogte knipt de tekst af zodra hij meer ruimte nodig heeft:

/* knipt af */
.knop { height: 40px; }

/* groeit mee */
.knop { min-block-size: 40px; }

Een vaste hoogte met een verborgen overloop is de gevaarlijkste combinatie, want er is niet te zien dát er iets weg is:

.kaart { height: 220px; overflow: hidden; }

Haal de vaste hoogte weg, dan mag de verborgen overloop blijven staan.

Een afgeknipt aantal regels mag, zolang de hele tekst ergens anders wel te lezen is:

.samenvatting { -webkit-line-clamp: 3; }

De veilige basis is dat tekstdragende onderdelen hun hoogte zelf bepalen:

.wp-block-group, .wp-block-column,
p, li, h1, h2, h3, h4, button, a {
  block-size: auto;
  overflow-wrap: break-word;
}

Open dit onderwerp op een eigen pagina

Er is geen extensie nodig. Plak dit in de console van de browser en de pagina staat meteen op de waarden uit de eis:

var s = document.createElement('style');
s.textContent = '* {' +
  'line-height: 1.5 !important;' +
  'letter-spacing: 0.12em !important;' +
  'word-spacing: 0.16em !important; }' +
  'p { margin-bottom: 2em !important; }';
document.head.appendChild(s);

Waar je op let:

• Tekst die uit een knop loopt of erin verdwijnt.
• Kaarten waarvan de laatste regel is afgeknipt. Vergelijk met de kaart ernaast.
• Overlappende regels, bijna altijd door een vaste hoogte op de omhullende laag.
• Een menu dat niet meer past en over de inhoud valt.
• Tabellen waarvan een cel zijn buurcel induwt.

Ververs de pagina om de eigen stijl terug te krijgen.

Open dit onderwerp op een eigen pagina

Deze test kost een minuut per pagina en vindt de meeste fouten.

Ga als volgt te werk:

• Druk vier keer op Ctrl en de plus-toets (op een Mac Command en plus). Je zit dan op 200%.
• Lees de pagina van boven naar beneden.
• Bedien alles: open het menu, vul een formulier in, druk op een knop.

Doe daarna de tweede test, die vaker wordt overgeslagen: zet in de browserinstellingen de standaard tekstgrootte op zeer groot en laat de zoom op 100%. Dat is een andere instelling en legt andere fouten bloot, vooral tekstgroottes die in pixels vastliggen.

Waar je op let:

• Tekst die uit een knop of kader loopt.
• Twee stukken tekst die over elkaar heen vallen.
• Een knop of link die buiten beeld schuift.
• Een menu dat niet meer opengaat of het hele scherm vult.
• Tekst in een afbeelding die wazig wordt in plaats van groter.

Open dit onderwerp op een eigen pagina

Deze test kost een minuut per pagina en vraagt geen gereedschap.

Ga als volgt te werk:

• Maak het browservenster zo groot als het scherm.
• Druk vijf keer op Ctrl en de plus-toets (op een Mac Command en plus). Je zit dan op 400%.
• Lees een alinea. Moet je daarvoor heen en weer schuiven?

Werkt het scherm niet mee, versmal het venster dan tot 320 pixels breed. Dat komt op hetzelfde neer.

Waar je op let:

• Een schuifbalk onderaan de pagina. Dat is de fout. Eén in een tabel of codeblok mag wel.
• Tekst die wegvalt of overlapt, meestal door een vaste hoogte.
• Een menu dat niet meer opengaat of het halve scherm vult.
• Knoppen die buiten beeld vallen. De knop Versturen onder een formulier is de meest voorkomende.
• Een vaste balk bovenaan die op 400% de helft van het scherm inneemt.

Open dit onderwerp op een eigen pagina

Een schermlezer leest een pagina voor in de volgorde van de code, van de eerste regel naar de laatste. Op het scherm staat alles tegelijk, maar wie de pagina hoort of met een vergroting strook voor strook afleest, krijgt hem als een rij. Zorg daarom dat de volgorde in de code overeenkomt met de volgorde waarin de pagina gelezen moet worden.

Een veelvoorkomend voorbeeld is een prijskaart met de prijs boven de naam, terwijl in de code de prijs eerst staat. Op het scherm staat er “Basispakket — 39 euro”. De schermlezer leest “39 euro. Basispakket.” Bij één kaart is dat te volgen, bij vijf kaarten naast elkaar niet meer.

Wie hier tegenaan loopt:

• Bezoekers die blind zijn en de pagina horen in plaats van zien.
• Bezoekers die een schermvergroting gebruiken en de pagina strook voor strook afleiden.
• Bezoekers die de pagina laten voorlezen omdat lezen moeite kost.
• Iedereen op een smal scherm, want dan komt alles onder elkaar te staan in de volgorde van de code.

Open dit onderwerp op een eigen pagina

Bij 400% zoom behandelt de browser de pagina als een smal scherm. Een pagina die ook op een telefoon werkt, schuift zijn kolommen dan onder elkaar. Gebeurt dat niet, dan verschijnt er een schuifbalk onderaan en moet de bezoeker bij elke regel heen en weer schuiven.

De eis is: bij 400% zoom op een scherm van 1280 bij 1024 hoeft er nog maar in één richting geschoven te worden. Dat komt neer op een venster van 320 bij 256 pixels, zo smal als een oude telefoon.

Wie hier last van heeft:

• Bezoekers die slecht zien en daarom vergroten.
• Bezoekers die een schermvergroting gebruiken en maar een deel van het scherm zien.
• Iedereen op een telefoon.

Open dit onderwerp op een eigen pagina

Een website moet werken in zowel de staande als de liggende stand. Niet iedereen kan zijn apparaat draaien: een telefoon in een houder op een rolstoel staat vast, en wie een tablet op een standaard heeft staan of met één hand werkt kan dat ook niet. Een melding als “Draai je scherm voor de beste ervaring” maakt de site voor die bezoekers onbruikbaar.

Je mag geen stand afdwingen, tenzij het echt niet anders kan — een piano-app of het fotograferen van een cheque zijn de gebruikelijke voorbeelden.

Wat er ook onder valt:

• Een pagina die alleen in staande stand een menu toont.
• Een videospeler die in liggende stand het scherm overneemt en niet meer terug wil.
• Een app die in de manifest-instellingen op één stand is vastgezet.

Open dit onderwerp op een eigen pagina

Het onderdeel dat met het toetsenbord is geselecteerd heeft de focus. De browser zet daar standaard een rand omheen, zodat zichtbaar is waar de bezoeker zich bevindt. Ontbreekt die rand, dan is niet te zien welk onderdeel wordt bediend en wat er gebeurt bij het indrukken van Enter. Zorg daarom dat de toetsenbordfocus altijd zichtbaar is.

Dit raakt vooral:

• Bezoekers die geen muis kunnen vasthouden en alles met het toetsenbord doen.
• Bezoekers die een schermvergroting gebruiken en maar een klein deel van het scherm zien. De focus geeft aan waar dat deel moet staan.
• Bezoekers die met een schakelaar of met hun stem werken.

De rand is op de meeste sites ooit bewust weggehaald, met één regel CSS: outline: none. De standaardrand is niet mooi, maar het antwoord daarop is een betere rand en niet geen rand.

Open dit onderwerp op een eigen pagina

Mensen met dyslexie lezen sneller als er meer ruimte tussen de regels en de letters staat. Er zijn browserextensies die die ruimte op elke site instellen. Zorg daarom dat je tekst leesbaar blijft als een bezoeker die ruimte ruimer zet.

De tekst moet het uithouden bij deze vier waarden:

• Regelafstand 1,5 keer de tekstgrootte.
• Ruimte tussen alinea’s 2 keer de tekstgrootte.
• Letterafstand 0,12 keer de tekstgrootte.
• Woordafstand 0,16 keer de tekstgrootte.

Je hoeft die waarden niet zelf te gebruiken. De eis is dat de pagina eraan kan als een bezoeker ze instelt.

Open dit onderwerp op een eigen pagina

Tekst moet tot 200% vergroot kunnen worden zonder dat er inhoud of functies verdwijnen. Dat moet lukken zonder hulpmiddelen: een vergrotingsprogramma telt niet mee, het moet werken met wat de browser zelf biedt. Veel mensen vergroten tekst zonder zichzelf slechtziend te noemen.

Waar het misgaat:

• Tekst in een afbeelding. Die wordt wazig in plaats van groter; dat valt ook onder 1.4.5.
• Vaste hoogtes. De tekst groeit, de knop niet, en de onderste regel verdwijnt.
• Tekstgroottes in pixels die de browserinstelling negeren.
• Een menu dat op 200% over de inhoud valt of niet meer opengaat.

Open dit onderwerp op een eigen pagina