Graviteit6 tips voor een toegankelijke website & grafisch ontwerp
Lichtgrijze tekst op een witte achtergrond. Een verplicht veld dat alleen rood kleurt. Een foto zonder beschrijving. Voor jou zijn het details, voor een deel van je bezoekers zijn het drempels waar ze niet over raken. Denk aan wie slechtziend of kleurenblind is, wie met een schermlezer werkt, of wie gewoon in fel zonlicht naar zijn gsm tuurt. Met deze zes tips haal je de grootste drempels weg, zonder je hele website om te gooien.
Zorg voor voldoende contrast
Contrast is het verschil tussen de kleur van je tekst en die van de achtergrond. Je drukt het uit als een verhouding van 1:1 (geen verschil) tot 21:1 (zwart op wit). Voor gewone tekst heb je minstens 4,5:1 nodig. Grote tekst, zoals titels, mag met 3:1. Die 3:1 geldt ook voor knoppen, invulvelden en iconen: iemand moet kunnen zien waar hij moet klikken.
Zo ziet dat er in de praktijk uit, op de website van Bouwwerken Cours: het menu haalt 17,73:1, het groene accent 4,64:1. Dat is net genoeg voor gewone tekst. Meten doe je in een paar seconden met coolors.co/contrast-checker, webaim.org of colourcontrast.cc.
Vertrouw niet alleen op kleur
Ongeveer één op de twaalf mannen ziet kleuren anders. Een foutmelding die alleen rood kleurt, of een link die alleen door zijn kleur opvalt, missen zij dus makkelijk. Geef kleur daarom altijd een maatje mee: een icoon, een woord of een onderstreping. De Boever Verzekeringen doet het goed: elk icoon krijgt een label, zodat niemand moet raden wat “Gezin” of “Voertuigen” betekent.
Schrijf alt-teksten bij je afbeeldingen
Een alt-tekst is een korte beschrijving die een schermlezer voorleest in plaats van de afbeelding. Beschrijf wat de foto vertelt: “Team Graviteit proost op een nieuwe klant” zegt meer dan “Afbeelding van vijf mensen”. Begin ook niet met “Afbeelding van”, dat zegt de schermlezer al. Is een beeld puur decoratief? Laat de alt-tekst dan leeg, dan slaat de schermlezer het over. Leidt een afbeelding naar een andere pagina? Beschrijf dan waar de link naartoe gaat.
Ook op Instagram kan je een alt-tekst toevoegen, de video hiernaast toont hoe. En voorzie je video’s van ondertitels: handig voor wie doof of slechthorend is, en voor iedereen die op de trein zonder geluid scrolt.
Bouw je pagina met de juiste koppen
Een schermlezer springt van kop naar kop, zoals jij met je ogen een pagina scant. Geef elke pagina dus één H1, gebruik H2 en H3 in een logische volgorde, en kies een kop op basis van zijn plaats in de structuur. Hoe groot hij eruitziet, regel je in de opmaak. Zet ook lijstjes als echte lijst en knoppen als echte knop. Dan weet een schermlezer wat hij voorleest, en helpt het meteen je SEO.
Maak alles bedienbaar met het toetsenbord
Leg je muis eens weg en druk op Tab. Kom je bij elke link, knop en elk formulierveld, in een logische volgorde? En zie je altijd waar je bent? Die zichtbare focusrand is geen schoonheidsfout, laat hem dus staan. Sinds WCAG 2.2 mag hij ook niet meer verdwijnen onder een vaste menubalk. Een link “Spring naar de inhoud” bovenaan bespaart toetsenbordgebruikers heel wat tabwerk.
Zorg dat je site meegroeit
Je website moet werken op een smal gsm-scherm en blijven werken als iemand inzoomt tot 200 %. Tekst mag dan niet overlappen of van het scherm schuiven. Blokkeer het inzoomen op gsm nooit. Maak knoppen en links ook groot genoeg om met een duim te raken: WCAG 2.2 vraagt minstens 24 × 24 pixels.
Hoe test je of het werkt?
Een automatische scan, zoals WAVE of Lighthouse in Chrome, vindt snel ontbrekende alt-teksten en te zwak contrast. Maar hij ziet niet of iemand echt een formulier kan versturen. Test dus ook zelf: tab door je site en luister eens met een schermlezer. VoiceOver zit gratis op elke Mac en iPhone, NVDA is gratis voor Windows. En het beste van al: vraag feedback aan mensen die er elke dag mee werken.
Een toegankelijke website is een betere website. Voor iedereen.
Heb je ook brochures of formulieren als pdf op je site staan? Die moeten net zo goed toegankelijk zijn.
Een creatief Oost-Vlaams communicatiebureau uit Gent. We gaan aan de slag met je visuele, verbale en virtuele content om te zorgen dat je merk gezien, begrepen, herkend en gevoeld wordt.
Twijfel je of jouw website de toets doorstaat? We lopen hem met je door, met toetsenbord en schermlezer, en vertellen je eerlijk wat eerst moet.
