Digitale toegankelijkheid bij Active Collective
Onze richtlijnen
Zorg voor duidelijke en goed gestructureerde content
Gebruik altijd een logische en semantische structuur voor je content.
Let erop dat headings in de juiste volgorde staan (H1 > H2 > H3, etc). Gebruik waar mogelijk een gepaste tag voor elementen in plaats van <div> elementen.
WCAG 1.3.1 Info en relaties
WCAG 1.3.2 Betekenisvolle volgorde
Zorg voor goed kleurgebruik en voldoende contrast
Let erop dat teksten voldoende contrast hebben ten opzichte van de achtergrond. Gebruik hiervoor bij twijfel de contrast-checker. Zorg ervoor dat de verhouding minimaal 4,5:1 is voor kleine tekst en minimaal 3:1 voor koppen.
Zorg er daarnaast dat instructies, informatie of relaties, die belangrijk zijn om de content te begrijpen of te bedienen, niet afhankelijk zijn van kleur of andere esthetische eigenschappen.
WCAG 1.3.3 Zintuigelijke eigenschappen
WCAG 1.4.1 Gebruik van kleur
WCAG 1.4.3 Contrast
WCAG 1.4.11 Contrast van niet-tekstuele content
Geef interactieve elementen goede context en beschrijvingen
Geef links, knoppen en verdere interactieve elementen duidelijke namen of ARIA-labels zodat gebruikers weten wat de functie is, ook als ze de website niet visueel gebruiken. Vermijd vage knoppen of linkteksten zoals “klik hier”.
Gebruik labels, foutmeldingen en suggesties in formulieren
Zorg dat alle formuliervelden voorzien zijn van een label. Geef duidelijke foutmeldingen als er iets misgaat, en geef waar mogelijk suggesties om fouten op te lossen.
WCAG 3.3.1 Fout identificatie
WCAG 3.3.2 Labels of instructies
WCAG 3.3.3 Foutsuggestie
Maak het ontwerp responsief en houd rekening met het herschalen van tekst
Zorg dat je interface werkt op verschillende schermformaten zonder dat er horizontaal gescrold hoeft te worden. Let hier vooral goed op componenten zoals sliders en grid layouts.
Zorg er ook voor dat tekst zonder verlies van content of functie geschaald kan worden tot 200%. Denk hierbij eraan dat dit invloed kan hebben op de layout van verschillende componenten.
Zorg dat alle functies met toetsenbord te bedienen zijn
Test losse componenten, maar ook gehele pagina’s, regelmatig met alleen het toetsenbord. De volgorde van de focus moet logisch zijn en de focus zelf moet altijd goed zichtbaar zijn en niet bedekt zijn door andere componenten.
WCAG 2.1.1 Toetsenbord
WCAG 2.1.2 Geen toetsenbordval
WCAG 2.4.7 Focus zichtbaar
WCAG 2.4.11 Focus niet bedekt
Ervaar het zelf
Ervaar hoeveel impact het toepassen van digitale toegankelijkheid heeft op gebruikers met verschillende ervaringen. Simuleer een beperking en zie het verschil tussen een standaard component en een component waar aan alle toegankelijkheidsrichtlijnen van Active Collective is voldaan.
De nieuwste innovatie van Active Collective
Active Collective komt met iets nieuws; QuickStackWP. De perfecte oplossing voor al jouw workflow problemen! Geen efficiëntie? Geen toegankelijkheid? Geen probleem! QuickStackWP helpt jouw om je websites sneller, consistenter en toegankelijker te bouwen! Abonneer nu voor €49 of €99!
QuickStack Extra
- Toegang tot 10 componenten
- Toegang tot 3 checklists
- Bewerking componenten
- Toegankelijkheidsondersteuning
QuickStack Pro
- Toegang tot alle componenten
- Onbeperkte toegang tot checklists
- Bewerking componenten
- Toegankelijkheidsondersteuning
De nieuwste innovatie van Active Collective
Active Collective komt met iets nieuws; QuickStackWP. De perfecte oplossing voor al jouw workflow problemen! Geen efficiëntie? Geen toegankelijkheid? Geen probleem! QuickStackWP helpt jouw om je websites sneller, consistenter en toegankelijker te bouwen!
QuickStack Extra
- Toegang tot 10 componenten
- Toegang tot 3 checklists
- Geen bewerking componenten
- Geen toegankelijkheidsondersteuning
QuickStack Pro
- Toegang tot alle componenten
- Onbeperkte toegang tot checklists
- Bewerking componenten
- Toegankelijkheidsondersteuning
€99
Toelichting
Je ziet de verschillen tussen de twee componenten, maar beide zijn begrijpelijk en bruikbaar voor jou. Voor iemand met een beperking is dit echter niet het geval.
Gebruik de bovenstaande knoppen en ervaar hoe het is om verschillende beperkingen te hebben. Let hierbij op het verschil tussen de twee componenten en ervaar de impact die het toepassen van digitale toegankelijkheid heeft.
Toelichting
Slecht contrast zorgt voor slechte leesbaarheid bij mensen met beperkt zicht.
Deze gebruikers kunnen de lettergrootte van hun apparaat vergroten om de leesbaarheid te verbeteren.
Je kunt nu zelf ervaren hoe veel beter leesbaar de tekst is als deze groter is.
Hier moet echter wel rekening mee zijn gehouden door de developers, anders kan het zijn dat de tekst gaat overlappen met andere elementen.
Toelichting
Sommige mensen hebben helemaal geen zicht en zijn daardoor genoodzaakt een schermlezer te gebruiken. Probeer het zelf uit bij beide componenten.
Op MacOS schakel je de schermlezer in met Command + F5. Dubbelklik eerst met je muis bovenin het component om je focus hierheen te verplaatsten. Navigeer vervolgens met CAPS LOCK ingedrukt door de pijltjestoetsen (links, rechts) te gebruiken.
In het slecht toegankelijke voorbeeld worden visuele elementen, zoals kleur en iconen, gebruikt om informatie over te brengen. Daarnaast hebben knoppen vage beschrijvingen, zonder ARIA-label te verduidelijking. Hierdoor is de content lastig te begrijpen met een schermlezer.
Toelichting
Er bestaan verschillende vormen van kleurenblindheid. Gebruik de knoppen hieronder om andere vormen van kleurenblindheid uit te proberen.
Kun jij het verschil zien tussen blauw en roze bij al deze typen kleurenblindheid? En is het contrast tussen de tekst en de achtergrond nog steeds altijd even goed?
Toelichting
De meeste motorische beperkingen zorgen ervoor dat het bedienen van een computermuis lastig of pijnlijk is. Daarom gebruiken veel van deze mensen graag een toetsenbord om te navigeren.
Gebruik de TAB toets om naar het volgende element te navigeren en SHIFT + TAB om terug te gaan. Gebruik ENTER om een knop in te klikken.
Als developer is het belangrijk ervoor te zorgen dat een gebruiker met toetsenbord naar alle interactieve elementen kan navigeren in een logische volgorde en dat de focus duidelijk zichtbaar is.
Handige tools & plugins
ARIA-label plugin voor Elementor
Met gebruik van ARIA-labels kan je extra informatie over de functie of het doel van knoppen en links. Dit helpt bezoekers die gebruik maken van schermlezers bij het begrijpen van de functie van deze elementen.
Binnen Elementor is de ondersteuning voor het toevoegen van ARIA-labels echter slecht en worden labels die je toevoegt via het ‘attributes’ veld toegevoegd aan de parent container en niet de knop of link zelf. Deze plugin voegt een extra sectie toe aan de bewerkingsopties bij knoppen en links, waarin een ARIA-label ingevuld kan worden wat op de correcte manier aan het <button> of <a> element toegevoegd wordt.
Genereer je eigen focus styling
:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
}
@supports selector(:focus-visible) {
:focus:not(:focus-visible) {
outline: none;
}
}
Toelichting
Gebruik deze handige tool om snel en gemakkelijk de CSS code te genereren voor de focus outline. Preview je aangepaste focus styling met gebruik van de preview knop. Tevreden met het resultaat? Kopieer de code en gebruik het in je eigen project.
Wat is focus?
Als een gebruiker naar een element navigeert met het toetsenbord krijgt dit element de pseudo-class :focus. Het bewerken van de focus styling om deze gepast te maken voor het kleurenpalet van een website wordt vaak overgeslagen. Standaard krijgt een element bij focus een donkerblauwe outline, deze is werkt niet altijd even goed. Op een website met een donker thema kan een donkerblauwe outline slecht te zien zijn. Houdt rekening met de achtergrond kleuren die worden gebruikt op jouw website en kies voor de outline een kleur die hier goed contrast op heeft voor maximale zichtbaarheid.
