Wat is digitale toegankelijkheid?
Digitale toegankelijkheid (of accessibility in het Engels) betekent dat een digitaal product of dienst op meerdere manieren en voor alle bevolkingsgroepen te gebruiken is. Denk maar eens aan een ingang van een groot gebouw. Soms zie je een trap met daarnaast een helling, de helling maakt het gebouw toegankelijk voor mensen die gebruik maken van een rolstoel.
Zo is dat ook met digitale producten als websites. Je staat er niet altijd bij stil, maar een website navigeren met muis en toetsenbord is niet voor iedereen zo vanzelfsprekend. Daarom wil je de digitale toegankelijkheid van een website op zoveel mogelijk manieren vergroten.
Wanneer is digitale toegankelijkheid voor een website nodig?
Natuurlijk zou je altijd een voor iedereen toegankelijke website moeten ontwerpen. Toch is dat in de praktijk (helaas) nog vaak niet het geval. Bij sommige websites ligt de prioriteit voor digitale toegankelijkheid hoger, denk aan websites voor (semi-) overheidsinstanties zoals Rijksoverheid, ziekenhuizen en gemeenten. Maar ook scholen, vervoersbedrijven en wooncorporaties moeten een hoge mate van digitale toegankelijkheid hebben.
Voor een kledingwebshop lijkt het misschien minder noodzakelijk, maar wees je er wel van bewust dat je mogelijk een grote groep uitsluit die anders maar al te graag je dienst of product zouden gebruiken.
De mate waarin je de digitale toegankelijkheid van een website vergroot kent ook grote verschillen Zo is het voor (semi-) overheidsinstanties tegenwoordig verplicht volledig aan de WCAG 2.2 regels te voldoen. In de WCAG (Web Content Accessibility Guidelines) zie je in een oogopslag aan welke digitale toegankelijkheidsrichtlijnen een bepaalde website moet voldoen.
In het volgende hoofdstuk leggen we uit welke elementen bijdragen aan het vergroten van de digitale toegankelijkheid van je website.
Elementen voor een digitaal toegankelijke website
Het visuele gedeelte lijkt erg belangrijk tijdens het ontwerpen van je website, maar dit is slechts het puntje van de ijsberg voor de digitale toegankelijkheid! Hieronder beschrijven we met welke visuele en codeaanpassingen je een website digitaal toegankelijk maakt.
We nemen je mee door de volgende elementen:
Visuele feedback – interacties
Voorleesfunctie – screenreader
Contrast
Voor mensen met een visuele beperking is het contrast op een beeldscherm heel belangrijk. Ze moeten kunnen zien wat ze selecteren en de tekst moet duidelijk en leesbaar zijn. Met de WebAIM Contrast Checker controleer je of het kleurencontrast op jouw website afdoende is voor mensen met bijvoorbeeld kleurenblindheid. Tevens controleert het programma ook op andere punten zoals de tekstgrootte.
Diapositief of dark mode
Dark mode op je website werkt minder vermoeiend voor de ogen. Anno 2022 gebruiken mensen steeds vaker deze modes. Hebben ze de voorkeur voor dark mode aangegeven in hun browser, dan verwachten ze ook dat websites hierin voorzien.
Je zet dit eenvoudig op door een functie op je website te implementeren waarbij het switcht tussen light en dark mode. Dan heb je ook zelf het design en het effect op je huisstijl ervan in eigen handen. Een extern programma maakt alle kleuren namelijk diapositief. Blauw wordt dan oranje en rood wordt lichtblauw.
Door middel van een CSS media query pas je op een vrij eenvoudige manier de stijl aan van een website met de ‘light of dark mode’ voorkeur van de bezoeker.
Voorbeeld CSS only code:
body{
color: #282828;
background: #FFF;
}
a {
color: #0033cc;
}
@media (prefers-color-scheme: dark) {
body {
color: #FFF
background: #282828;
}
body a {
color: #FFF;
}
}
Layout
Veel mensen met een hogere mate van visuele beperking gebruiken een screenreader. Deze software leest een website voor aan de bezoeker. Je kunt je voorstellen dat de volgorde waarin het de content voorleest dus heel belangrijk is. Je houdt hier dan ook al rekening mee tijdens de ontwerpfase van je website wil je digitale toegankelijkheid nastreven.
Cards
Cards zijn elementen op een website die content onderdelen die bij elkaar horen bundelt. Denk aan een nieuwsitem met een titel, foto, datum en link naar het nieuwsbericht. Het beste is om een card zo te ontwerpen de link, of call-to-action, een duidelijk element vormt. Dit is herkenbaar en maakt het voor screenreaders makkelijker voor te lezen. Is de gehele kaart aanklikbaar, dan komt de screenreader daarmee in de problemen met als gevolg dat een bezoeker de link erachter voorgelezen krijgt. En daar wordt niemand veel wijzer van!
Menu
Alleen icoontjes als menu staat misschien mooi, maar het voegt weinig toe aan de digitale toegankelijkheid van je website. Gebruik dus nooit alleen iconen (zoals een hamburger, schoen of kalender), maar onderbouw ze altijd met tekst. Daarmee maak je het voor iedereen begrijpelijk en dus toegankelijk.
Ook wil je dat gebruikers duidelijk zien waar in het menu ze zich bevinden ten opzichte van de andere menu-items. Voor een screenreadergebruikers is het handig dat het menu eerst wordt voorgelezen. Dus plaats het menu bij voorkeur bovenaan.
Buttons
Een button (knop) moet eruit zien als een button, en een link als een link. Klinkt simpel, toch? Het zal je verbazen hoe vaak websites hiermee de mist in gaan. In de basis is een button een knop waarmee je een bepaalde actie uitvoert op een website. Denk aan een login button, verzend button of (de soms alles behalve gebruiksvriendelijke) pop-ups. Deze acties onderscheiden zich van buttons met ‘Ga naar onze blog’ of ‘Bekijk item’, die brengen je namelijk naar een andere plek op de website.
Het verschil is soms lastig te bepalen. Belangrijkste is dat je door de gehele website consistent bent met je buttons en links. In zowel kleur, design en bewoording.
Lettertypes (fonts)
Het ene lettertype (of font op z’n Engels) is beter leesbaar dan het andere. Voor het vergroten van de digitale toegankelijkheid van je website let je zowel op de vorm en doorsnede, als op de hoogte, breedte en afstand tot de volgende letter. Een dun (light) lettertype is over het algemeen minder goed leesbaar dan een vettere.
Kies geen lettertypes die zeer contrasterende vormen hebben, zoals Bodoni. De lezer moet zo min mogelijk moeite hebben om letters te herkennen. En hoe meer karakter er in een lettertype zit, des te slechter deze vaak te lezen is.
Voor mensen met dyslexie is veel contrast tussen de letters dan juist wel weer belangrijk. Een ‘o’ mag bijvoorbeeld niet teveel op een ‘a’ lijken. Sommige lettertypes gebruiken een ronde ‘a’ zoals Comfortaa. Hierbij lijkt de letter teveel op een ‘o’ en wat de digitale toegankelijkheid flink onderuithaalt voor mensen met dyslexie.
De ‘o’ en de ‘a’ van Comfortaa
Visuele feedback – interacties
Om zoveel mogelijk rekening te houden met alle gebruikers, moet je ook de groep bedienen die tussen goedziendheid en blindheid in zit. De mate van slechtziendheid kan namelijk sterk wisselen. Dat kan het maken van een digitaal toegankelijke website uitdagender maken, maar met de elementen uit dit artikel ben je al goed op weg!
We hebben het al gehad over contrast en lettertypes, maar voor deze groep is de visuele feedback essentieel voor de digitale toegankelijkheid. De locatie van je muis of tab (Tabs worden in het hoofdstuk Tab functie) moet duidelijk naar voren komen. De feedback met het gebruik van tabs noemen we ‘Focus state’. Met het gebruik van een muis noemen we het ‘Hover state’. Wanneer je met de tab of muis over een element gaat wil je dat een klikbaar element zichzelf bij wijze van aankondigt. Een praktische methode laten oplichten van een element door middel van een andere kleur (die uiteraard voldoende contrasteert).
Extra hulpmiddelen
Leeslijn
Sommige gebruikers hebben baat bij een soort liniaal om teksten makkelijker te lezen. Zie het als een boekenlegger die je van boven naar beneden over een bladzijde schuift. Je realiseert zo’n hulpmiddel met een klein beetje JavaScript, HTML en CSS.
Hierbij een voorbeeld:
HTML
<button class="active_liniaal" aria-label="open liniaal">Activeer een liniaal</button>
CSS
body{
#liniaal {
position: absolute;
height: 10px;
width: 100vw;
left: 0px!important;
border-radius: 50%;
border: 2px solid black;
border-radius: 0px;
background: black;
box-sizing: border-box;
z-index: 9;
pointer-events: none;
transition: opacity 0.3 ease-in-out;
}
#liniaal.inactive{
opacity: 0; /* state before activating the liniaal */
}
#liniaal.active{
opacity: 1; /* state after activating the liniaal */
}
JS
$( document ).ready(function() {
// button onclick toggleClass .active to make the liniaal visible
$(".active_liniaal").click(function(){
$(".inactive").toggleClass("active");
});
// liniaal div follows mouse movement
let liniaal = document.getElementById('liniaal');
const onMouseMove = (e) =>{
liniaal.style.top = e.pageY + 'px';
}
document.addEventListener('mousemove', onMouseMove);
});
Voorleesfunctie – screenreader
Bij het vergroten van de digitale toegankelijkheid van je website wil je in je code al rekening houden met screenreaders. De manier waarop je de HTML opbouwt kan hierin een groot verschil maken. Het volledig programmeren van een screenreader die werkt voor iedere bezoeker is veel werk, gelukkig zijn hiervoor ook externe libraries beschikbaar.
Vaak is het echter zo dat deze mensen al beschikken over een eigen software. Implementeer in ieder geval de volgende HTML punten voor een digitaal toegankelijke website voor screenreaders:
De Title Tag
Gebruik een duidelijke <title>Hier komt unieke en informatieve titel</title> tag. Dit is het eerste wat gebruikers te horen krijgen wanneer ze op een pagina landen.
De titel komt in de <head> van de HTML te staan.
Landmarks
Niet alleen voor een nette code, maar ook voor de digitale toegankelijkheid wil je duidelijke HTML5-structuur gebruiken. Hier zijn wel voorbeelden van te vinden die je kunt combineren met ARIA landmark. Bijvoorbeeld bij het gebruiken van een <nav> sectie vertelt de screenreader de gebruiker dat dit een navigatie-element betreft.
Met een ARIA label licht je dit nog verder uit zodat de gebruiker weet dat het om een hoofdnavigatie gaat. Daarnaast is het met de ARIA landmarks mogelijk om een screenreader iets meer over een Div te vertellen. Een Div kan normaal gesproken niet door een screenreader worden uitgelezen, nu wel.
Voorbeeldcode:
<nav aria-label="hoofd navigatie">
<ul>
<li>Homepagina</li>
<li>Over ons</li>
<li>Contact</li>
</ul>
</nav>
<footer>
<div class="adresgegevens" aria-label="Adresgegevens">
<span>Plaats</span>
<span>Straat</span>
</div>
</footer>
(Bron)
Roles
Soms komt het voor dat een link op een website niet gedefinieerd is als een <button> met HTML, maar inline staat met een <a> tag. Om de screenreader toch duidelijk te maken dat dit een button betreft, kun je er een ‘role’ aan toevoegen. Dit kan overigens ook met navigaties, enzovoort.
Voorbeeldcode:
<a href="#" role="button">button link</a>
<div role="navigation" aria-label="hoofd"></div>
(Bron)
Afbeeldingen leesbaar maken
Title en alt tags worden vaak vergeten of niet serieus genomen bij het uploaden van afbeeldingen op een website. Een screenreader gebruikt de alt tags om een gebruiker iets te vertellen over een afbeelding. Sla je deze over, dan kan er soms flink wat context ontbreken voor de screenreadergebruikers.
Vul dus altijd netjes je tags in en omschrijf de afbeelding zo duidelijk mogelijk. En sta dan even stil bij de digitale toegankelijkheid voor álle gebruikers. Bonus: het invullen van de title en alt tags draagt bij aan de Image Search Optimization voor Google. Win-win, dus!
De title tag wordt alleen weergeven als een tooltip wanneer je met je muis over het element gaat. Deze gebruik je in principe alleen wanneer het logisch is en goed uitkomt.
Je alt tags zijn dus onmisbaar voor screenreaders. Tevens gebruikt Google deze tags om de afbeelding beter te begrijpen, en deze vervolgens op de juiste plekken voor te schotelen aan potentiële gebruikers. Zie de alt tag als een alternatief stukje tekst. Mocht de afbeelding niet voor iedereen goed zichtbaar zijn, dan is het extra fijn voor deze gebruiker als er een duidelijke alt tag achter staat.
Voorbeeldcode:
<img src="oranje-voetbal.jpg" title="" alt="Oranje voetbal op een groen voetbalveld"/>
Navigatie
Soms wordt er gebruik gemaakt van zo’n mooi megamenu, supertof! Alleen zijn deze vaak slecht toegankelijk voor screenreaders. Deze groep zal dus hoogstwaarschijnlijk de website op een van de volgende manier doorlopen:
Headings
Correct gebruik van een hiërarchie in de headings <h1> t/m <h6> maakt voor iemand met een screenreader duidelijk waar een pagina over gaat.
<h1>Je titel of belangrijkste onderwerp</h1>, zie het als de titel van een boek waarna een introductie volgt.
<h2>Een Subkop van de H1 waar je verder op het onderwerp ingaat</h2> zoals de hoofdstukken in een boek.
<h3>Een Subkop van de H2 wanneer je nog iets wilt toevoegen</h3> bijvoorbeeld een samenvatting, opsommingen, enzovoort.
Dit kan tot de H6 doorgaan, zolang je geen levels overslaat. Bovendien helpt deze hiërarchie Google bij het indexeren van de pagina’s wat de autoriteit en SEO van een website ten goede komt.
Tevens is het handig om op basis van de tussenkoppen een inhoudsopgave aan de bovenkant van de pagina te plaatsen. Deze maak je op de volgende manier scrolbaar:
Voorbeeldcode:
<h1>hoofd onderwerp</h1>
<div class="table_of_content" aria-label="inhoudsopgave">
<h2>Inhoudsopgave</h2>
<ol>
<li><a href="#onderwerp">Sub heading h2</a></li>
<ol>
<li><a href="#sub-onderwerp">Sub heading h3</a></li>
<ol>
<li><a href="#sub-sub-onderwerp">Sub heading h4</a></li>
</ol>
</ol>
<li><a href="#onderwerp2">Sub heading h2</a></li>
</ol>
<h2 id="onderwerp">Sub heading h2</h2>
<p>content</p>
<h3 id="sub-onderwerp">Sub heading h3</h3>
<p>content</p>
<h4 id="sub-sub-onderwerp">Sub heading h4</h4>
<p>content</p>
<h2 id="onderwerp2">Sub heading h2</h2>
Tab functie
Aangezien niet iedereen een muis gebruikt, is het noodzakelijk om ze te kunnen laten ‘tabben’ met de tab-key op het toetsenbord. Dit is in de basis vaak zonder een visuele feedback zoals een border rondom de link. Met een klein stukje CSS vergroot je dan al vrij snel de digitale toegankelijkheid.
Voorbeeldcode:
:root {
--webkit-focus-ring-color: 011E41;
}
a:-webkit-any-link:focus-visible {
outline-offset: 1px;
}
:focus-visible {
outline: -webkit-focus-ring-color auto 1px;
}
Skip to content
De tab functie is super, maar als je veel links hebt op je website dan duurt het een eeuwigheid voor deze bezoekers om bij je ‘main’ content te komen. Je kunt ze hier een handje bij helpen door een skip to content button te implementeren. Je voegt dan een tabindex=”-1” toe aan het HTML element voor extra digitale toegankelijkheid.
Voorbeeldcode:
HTML
<a class="skip-to-content" href="#main "aria-label="skip content">Skip to content</a>
<p id="main " tabindex="-1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
CSS
.skip-to-content {
background: #e91e63;
left: 50%;
padding: 8px;
border-radius: 5px;
position: absolute;
transform: translateY(-100vh);
transition: transform 0.3s;
color: #FFF;
text-decoration: unset;
font-family: arial;
box-shadow: 0px 10px 20px #e91e63;
}
.skip-to-content:focus {
transform: translateY(0%);
}
Content
Ook je schrijftechniek draagt bij aan de digitale toegankelijkheid van je website. Je wilt dat de teksten op je website prettig leesbaar zijn voor iedere bezoeker. Met de volgende richtlijnen vergroot je de toegankelijkheid van je tekst:
- Schrijf actief.
Dus niet: Dit zou je kunnen doen om je digitale toegankelijkheid te vergroten.
Maar wel: Doe dit om je digitale toegankelijkheid te vergroten.
Maak zinnen nooit onnodig lang. Heb je wel een lange zin in je tekst staan? Wissel deze dan altijd af met een korte zin. Bovendien helpt dit Google je tekst te indexeren als een makkelijk leesbare tekst wat bijdraagt aan de SEO-ranking.
- Maak je alinea’s niet te lang.
Bezoekers verdwalen snel in grote lappen teksten. Ze haken af en missen misschien wel de belangrijkste content. Plaats dus regelmatig een witregel om overzicht te creëren voor digitale toegankelijkheid.
- Vermijd vakjargon en moeilijk taalgebruik.
Moeilijke of lange woorden en complexe termen gaan ten koste van de leesbaarheid van je tekst. Een toegankelijke tekst is begrijpbaar voor iedereen. Ook veel formele en ouderwetse woorden kunnen flink afbreuk doen aan je content. Kun je even niet op een alternatief komen? Voer het woord eens in op Synoniemen.net voor inspiratie. Zo schrijf je in plaats van ‘desalniettemin’ gewoon ‘toch’. Waarom moeilijk doen als het makkelijk kan?
- Maak teksten scanbaar.
Dit kan al vrij eenvoudig: door duidelijk gebruik van kopteksten, witregels op de juiste plek, hier en daar een opsomming, en belangrijke delen vetgedrukt.
- Een prettige regelafstand.
Niet alleen de afstand tussen de letters, ook de regelafstand kan de digitale toegankelijkheid van je content maken of breken. Een te grote regelafstand geeft het idee dat er steeds een witregel staat, maar een te korte regelafstand werkt vermoeiend op de ogen.
The takeaway
Probeer niet het wiel opnieuw uit te vinden wanneer je werkt aan digitale toegankelijkheid. Veel gebruikers houden van het gebruik van conventies. Zoals een ‘save’ button een afbeelding is van een ouderwetse diskette (wie gebruikt die nog tegenwoordig?), weet iedereen wel wat het betekent.
Accessibility wordt steeds belangrijker, dus maak ook jouw website voor iedereen digitaal toegankelijk.
Hulp nodig?
Weet je niet waar je moet beginnen? Neem gerust contact met ons op! Make it Max neemt je stap voor stap mee door de digitale toegankelijkheid van je website. Samen kijken we waar nog kansen liggen waarmee jij straks je deuren opent voor een hele nieuwe doelgroep! Natuurlijk onder het genot van onze signature cocktail. 😊
0 reacties