Toegankelijkheid en inclusief ontwerp - Patronen
Meer informatie over Goed Ontworpen eerlijkheid → Toegankelijkheid met Lightning en Experience Cloud
Patronen
| Waar te zoeken | Hoe goed eruitziet |
|---|---|
| Platform | Ontwerpstandaarden | ✅ WCAG 2.2 Niveau AA is de minimale toegankelijkheidsbalk voor op maat gemaakt werk (Experience Cloud, LWC’s, aangepaste thema’s), geverifieerd door het bouwteam |
| Platform | Ontwerpstandaarden | ✅ Waarneembaar principe: Er bestaan tekstalternatieven voor afbeeldingen en pictogrammen; bijschriften bij video’s |
| Platform | Ontwerpstandaarden | ✅ Opereerbaar principe: Alle functionaliteit kan alleen via het toetsenbord worden bediend, zonder dat er een muis of aanraking nodig is — spraakbesturing en ondersteunende technologieën voor schakelaartoegang vertrouwen op hetzelfde toetsenbord/focusmodel |
| Platform | LWC | ✅ Standaard Lightning webcomponenten worden gebruikt zoals ontworpen, waardoor baseline-toegankelijkheid automatisch wordt geboden |
| Platform | LWC | ✅ Aangepaste componenten implementeren expliciete toegankelijkheid gevalideerd door middel van testen met schermlezers |
| Platform | Testplannen | ✅ Toegankelijkheid testen is inbegrepen in alle testfasen (niet ad hoc of optioneel) |
Anti-patronen
| Waar te zoeken | Hoe slecht eruitziet |
|---|---|
| Platform | Ontwerpstandaarden | ⚠️ WCAG 2.2 Niveau AA wordt behandeld als optioneel of “nice to have” in plaats van minimale vereiste |
| Platform | Ontwerpstandaarden | ⚠️ Afbeeldingen en pictogrammen hebben geen tekstalternatieven; video’s hebben geen bijschriften |
| Platform | Ontwerpstandaarden | ⚠️ Functionaliteit vereist muis- of aanraakinteractie zonder toetsenbordalternatief |
| Platform | LWC | ⚠️ Aangepaste componenten worden samengesteld zonder implementatie of validatie van toegankelijkheid |
| Platform | LWC | ⚠️ Aangepaste invoercomponenten gebruiken div-elementen en CSS-stilering zonder semantische betekenis of toetsenbordtoegankelijkheid |
| Platform | Testplannen | ⚠️ Toegankelijkheidstests zijn ad hoc, optioneel of alleen uitgevoerd vóór de lancering (niet tijdens de gehele ontwikkeling) |
Patronen
| Waar te zoeken | Hoe goed eruitziet |
|---|---|
| Platform | LWC | ✅ Semantische HTML-elementen (koptekst, navigatie, hoofdtekst, opzij, voettekst, artikel, sectie) worden gebruikt in aangepaste Lightning webcomponenten |
| Platform | LWC | ✅ ARIA oriëntatiepunten, rollen en eigenschappen worden toegepast waar semantische HTML alleen kan interface-werking niet overbrengen |
| Platform | LWC | ✅ Dynamische inhoudsupdates gebruiken aria-live regio’s die wijzigingen aankondigen aan schermlezers |
| Platform | LWC | ✅ Aangepaste interactieve componenten hebben expliciete roldefinities die overeenkomen met hun werking |
| Platform | LWC | ✅ Formulierlabels worden expliciet gekoppeld aan alle formulierinvoer met behulp van de juiste labelelementen of aria-labelledby-kenmerken |
| Platform | LWC | ✅ Lightning invoercomponenten zijn geconfigureerd met vereiste labelkenmerken die ingebouwde labelkoppeling bieden |
| Platform | Testplannen | ✅ Testen wordt uitgevoerd met feitelijke schermlezers: JAWS en NVDA voor Windows, VoiceOver voor macOS en iOS, TalkBack voor Android |
| Platform | Testplannen | ✅ Handmatig testen met echte ondersteunende technologie wordt uitgevoerd door mensen die begrijpen hoe schermlezergebruikers navigeren |
| Platform | Ontwerpstandaarden | ✅ Plaatshouder tekst wordt nooit gebruikt als het enige label, omdat plaatshouders verdwijnen op de focus en bieden onvoldoende context voor schermlezers |
Anti-patronen
| Waar te zoeken | Hoe slecht eruitziet |
|---|---|
| Platform | LWC | ⚠️ Div-zware mark-up strips betekenen van inhoudshiërarchie dwingen schermlezers om lineair te navigeren |
| Platform | LWC | ⚠️ ARIA wordt niet gebruikt waar semantische HTML alleen geen interfacewerking kan overbrengen |
| Platform | LWC | ⚠️ Dynamische inhoudsupdates gebruiken geen aria-live regio’s; schermlezergebruikers missen belangrijke wijzigingen |
| Platform | LWC | ⚠️ Aangepaste interactieve componenten hebben geen expliciete roldefinities; schermlezers kondigen ze onjuist aan |
| Platform | LWC | ⚠️ Formulierinvoer heeft geen expliciete labelkoppeling; plaatshoudertekst wordt als enig label gebruikt |
| Platform | Testplannen | ⚠️ Er worden uitsluitend geautomatiseerde toegankelijkheidstools gebruikt; handmatige schermlezertests worden niet uitgevoerd |
| Platform | Testplannen | ⚠️ Testen wordt uitgevoerd door ziende gebruikers die niet bekend zijn met de manier waarop schermlezergebruikers feitelijk navigeren |
Patronen
| Waar te zoeken | Hoe goed eruitziet |
|---|---|
| Platform | Ontwerpstandaarden | ✅ Volledige functionaliteit is toegankelijk via het toetsenbord zonder muis of touch interactie op elk punt in de journeys van de gebruiker |
| Platform | LWC | ✅ Logische focusvolgorde volgt visuele lay-out en interactiestroom |
| Platform | LWC | ✅ Wanneer dynamische inhoud wordt geladen of modals worden geopend, wordt de focus programmatisch beheerd om toetsenbordgebruikers naar nieuwe inhoud te begeleiden |
| Platform | LWC | ✅ Modal en popover componenten verplaatsen focus naar modale titel of eerste interactieve element bij openen; focus terug naar triggerknop bij sluiten |
| Platform | Ontwerpstandaarden | ✅ Zichtbare focusindicatoren tonen duidelijk welk element altijd de toetsenbordfocus heeft |
| Platform | Ontwerpstandaarden | ✅ Focusindicatoren voldoen aan de 3:1 contrastvereiste ten opzichte van omliggende inhoud |
| Platform | LWC | ✅ Gebruikers kunnen navigeren in en uit alle componenten met behulp van het toetsenbord alleen zonder vast te zitten |
| Platform | LWC | ✅ Modale dialogen vallen focus binnen het modaal terwijl open (voorkomt toegang tot verborgen inhoud), maar release focus op sluiten |
| Platform | Ontwerpstandaarden | ✅ Sneltoetsen voor het toetsenbord voor frequente acties voorkomen conflicten met sneltoetsen voor de schermlezer en browsersneltoetsen |
| Platform | Ontwerpstandaarden | ✅ Sneltoetsen van één letter worden alleen geactiveerd wanneer specifieke componenten de focus hebben (niet globaal) om conflicten met navigatieopdrachten van de schermlezer te voorkomen |
| Platform | Documentatie | ✅ Alle aangepaste sneltoetsen zijn gedocumenteerd in toegankelijke Help-inhoud |
| Platform | Testplannen | ✅ Teststappen omvatten alleen toetsenbordnavigatie door alle gebruikersjourneys zonder muis of aanraking |
Anti-patronen
| Waar te zoeken | Hoe slecht eruitziet |
|---|---|
| Platform | Ontwerpstandaarden | ⚠️ Functionaliteit vereist muis- of aanraakinteractie; gebruikers met alleen een toetsenbord kunnen belangrijke taken niet voltooien |
| Platform | LWC | ⚠️ Focusvolgorde volgt geen logische visuele lay-out; gebruikers gaan met de Tab-toets door elementen in een onverwachte volgorde |
| Platform | LWC | ⚠️ Modals open zonder focusbeheer; toetsenbordgebruikers zijn vastgelopen op nu verborgen triggerknop |
| Platform | LWC | ⚠️ Modaal sluiten retourneert de focus niet naar de triggerknop; gebruikers moeten zoeken naar hun plaats op de pagina |
| Platform | Ontwerpstandaarden | ⚠️ Focusindicatoren worden om esthetische redenen onderdrukt; gebruikers kunnen niet zien welk element de focus heeft |
| Platform | Ontwerpstandaarden | ⚠️ Focusindicatoren hebben onvoldoende contrast (<3:1) |
| Platform | LWC | ⚠️ Gebruikers komen vast te zitten in interfacegebieden zonder escape-mechanisme (toetsenbordvallen) |
| Platform | LWC | ⚠️ Ingebedde inhoud (iframes, widgets van derden) legt permanent de toetsenbordfocus vast |
| Platform | Ontwerpstandaarden | ⚠️ Sneltoetsen van één letter activeren globaal conflicterend met navigatieopdrachten van één letter van de schermlezer |
| Platform | Documentatie | ⚠️ Aangepaste sneltoetsen zijn niet gedocumenteerd; gebruikers kunnen ze niet ontdekken |
Patronen
| Waar te zoeken | Hoe goed eruitziet |
|---|---|
| Platform | Ontwerpstandaarden | ✅ Minimale 4.5: 1 contrastverhouding voor normale tekst onder 18pt of 14pt vet |
| Platform | Ontwerpstandaarden | ✅ Minimale 3:1 contrastverhouding voor grote tekst en voor betekenisvolle UI-componenten en afbeeldingen (vormranden, informatieve pictogrammen); puur decoratieve en uitgeschakelde elementen zijn uitgesloten |
| Platform | Experience Cloud | ✅ Aangepaste thema’s en Experience Cloud-sites met “branding” omvatten expliciete contrastvalidatie met behulp van tools voor browserontwikkeling of geautomatiseerde controles |
| Platform | Ontwerpstandaarden | ✅ Tekst formaat wijzigen tot 200% wordt ondersteund zonder verlies van inhoud of functionaliteit (WCAG-vereiste) |
Anti-patronen
| Waar te zoeken | Hoe slecht eruitziet |
|---|---|
| Platform | Ontwerpstandaarden | ⚠️ Tekstcontrastverhoudingen vallen onder 4.5:1 (normale tekst) of 3:1 (grote tekst en UI-componenten) |
| Platform | Experience Cloud | ⚠️ Aangepaste thema’s worden geïmplementeerd zonder contrastvalidatie; slechtziende gebruikers kunnen geen inhoud lezen |
| Platform | Ontwerpstandaarden | ⚠️ Tekstgrootte wijzigen tot meer dan 200% breekt lay-outs die inhoud of functionaliteit verliezen |
Patronen
| Waar te zoeken | Hoe goed eruitziet |
|---|---|
| Platform | CI/CD | ✅ Axe-core of Lighthouse toegankelijkheid scannen is geïntegreerd in CI / CD-pijplijnen vangen structurele problemen op elke implementatie |
| Platform | CI/CD | ✅ Builds mislukken wanneer kritieke toegankelijkheidsproblemen worden gedetecteerd |
| Platform | Testplannen | ✅ Handmatig testen met schermlezers, toetsenbordnavigatie en browserzoom tot 200% wordt regelmatig uitgevoerd tijdens de ontwikkeling |
| Platform | Testplannen | ✅ Testen onthult interactieproblemen, waaronder verwarrende volgorde van aankondigingen, fouten in focusbeheer en toetsenbordvallen |
| Platform | Zakelijk | ✅ Gebruikers met een handicap worden opgenomen in bruikbaarheidstests gedurende het gehele ontwerpproces |
| Platform | Zakelijk | ✅ Usability testen onthult praktische belemmeringen die geautomatiseerde en handmatige expert testen missen |
| Platform | Testplannen | ✅ Geautomatiseerd testen (~ 57% van de problemen op volume), handmatig testen (interactieproblemen) en gebruikerstesten (real-world belemmeringen) worden allemaal uitgevoerd |
Anti-patronen
| Waar te zoeken | Hoe slecht eruitziet |
|---|---|
| Platform | CI/CD | ⚠️ Toegankelijkheid scannen is niet geïntegreerd in CI / CD-pijplijnen |
| Platform | CI/CD | ⚠️ Builds doorgaan ondanks kritieke toegankelijkheidsproblemen |
| Platform | Testplannen | ⚠️ Handmatig testen met ondersteunende technologie wordt niet uitgevoerd; alleen geautomatiseerd scannen wordt gebruikt |
| Platform | Zakelijk | ⚠️ Gebruikers met een handicap worden niet opgenomen in bruikbaarheidstests |
| Platform | Testplannen | ⚠️ De geautomatiseerde toegankelijkheidsscanner wordt één keer uitgevoerd vóór lancering en het testen van toegankelijkheid wordt als gedaan beschouwd |