Toegankelijkheid

Hoe we bouwen voor toetsenbord-, schermlezer-, slechtziende en gebruikers met beperkte technologie. Een eerlijke, gedateerde momentopname.

We schrijven deze pagina op dezelfde manier als de rest van de site: wat werkt, wat niet, en hoe je het zelf kunt verifiëren. Ze is gedateerd omdat toegankelijkheid een bewegend doel is. We hertesten na elke grote release.

Formele toegankelijkheidsverklaring

Nagestreefd standaard

WCAG 2.2 AA over de gehele ervaring. AAA-behandeling op focusweergave (dikke rings met hoog contrast, niet verborgen) en op formulieretiketten + foutherstel. Bijgehouden ten opzichte van de W3C-aanbeveling, niet een parafrase.

Laatste interne audit

2026-04-19. Handmatige controle door ons eigen team van de homepage, print-size, de /standards/ hub + 9 autoriteitspagina's en de 45 betalingsschema-landingspagina's.

Externe audit

Opgedragen, rapport in behandeling. Publicatie bij aankomst op /accessibility/audit/ met herstelnotities, tekortkomingen intact, geen selectieve presentatie.

Hertestfrequentie

Maandelijkse steekproef + volledige handmatige controle na elke grote UI-wijziging. Geautomatiseerde controles (contrastlinting, WCAG 2.2 nieuwe-criteria-scan) draaien bij elke deploy.

Contact + SLA

hello@abundera.ai, we bevestigen toegankelijkheidsrapporten binnen 2 werkdagen, triageren binnen 5, en behandelen toetsenbord- / schermlezer- / cognitieve blokkers als prioriteitsproblemen (worden vóór functiewerk verzonden).

WCAG 2.2 AA-conformiteit per succescriterium

De nieuwe-in-2.2-criteria die we actief volgen. Status weerspiegelt wat we intern hebben geverifieerd; de externe audit zal dit vervangen.

Ondersteuning voor beweging en geforceerde kleuren

• prefers-reduced-motion: reduce, omgevingsbol zweven en fade-in overgangen worden onderdrukt. Functionele overgangen blijven kort. Geverifieerd met macOS Reduce Motion en Windows "Animaties weergeven" uitgeschakeld.
• forced-colors: active (Windows Hoog contrast modus), focusringen gebruiken de systeem Highlight kleur; randen erven systeem CanvasText. Geverifieerd in Edge op Windows 11 High Contrast.

Bekende beperkingen

• JAWS nog niet getest. De volgende AT-ronde richt zich op JAWS in Edge op Windows 11.
• De Visitekaartjesontwerper is muis-first van ontwerp voor de sleeppreview. Elk besturingselement heeft een toetsenbordoptie, maar de live-feedbacklus is nog steeds visueel.
• Het externe auditrapport is in behandeling. De zelf-bevestigde status in de bovenstaande tabel wordt vervangen door de bevindingen van de auditor wanneer het rapport arriveert.
• Sommige hulptechnologieën van derden (Dragon NaturallySpeaking, spraak-naar-tekst op Android) zijn niet in onze regressiematrix; we accepteren gemeenschapsrapporten en lossen per ticket op.

Toegankelijkheids-changelog

• 2026-04-19 (PM), TalkBack live-regio dubbele activering opgelost: aria-live="polite" verwijderd uit de #qr-preview wrapper; aankondigingen komen nu alleen van de scanbaarheids-role="status" badge, eenmaal per generatie. BCD-modaal: kleurenkiezers kregen juiste <label for> bindingen; preset-grid-container kreeg role="group" + aria-label. Toegankelijkheidstabellen kregen <caption> + scope="col"/"row".
• 2026-04-19 (AM), Focusindicatoren opgewaardeerd (3 px + box-shadow backup). forced-colors + prefers-reduced-motion ondersteuning toegevoegd. Doelgrootte-audit: .saved-profile-delete, .type-search-clear, .compat-toggle-btn verhoogd naar ≥ 28 px. Kopniveausprong opgelost (vCard/MECARD subkoppen h4 → h3). Formele WCAG 2.2 AA-verklaring + AT-matrix gepubliceerd.
• 2026-04-18, Handmatige WCAG 2.2 AA basislijncontrole gedocumenteerd. Vier-pijler vertrouwensstrook samengevouwen voor schonere hiërarchie.
• 2026-03-08, Initiële /accessibility/ pagina gepubliceerd.

Onze toezeggingen

• Volledige toetsenbordnavigatie. Elk generatorbesturingselement, elk modaal en elke exportstroom is bereikbaar zonder muis.
• Zichtbare focusstatussen. Gefocuste invoervelden, knoppen en links tonen een duidelijke ring. We vertrouwen niet alleen op kleur.
• Labels op elk veld. Formulierinvoeren hebben bijbehorende <label> elementen of aria-label attributen. Plaatshoudertext wordt nooit als enige label gebruikt.
• ARIA live-regio's voor de QR-preview en toasts. Schermlezers horen "QR gegenereerd" en toastberichten wanneer ze worden geactiveerd, niet pas wanneer de focus er naartoe gaat.
• Tekstalternatieven voor pictogram-only knoppen. aria-label op elke SVG-only knop.
• Kleuronafhankelijke statusbetekenis. Scanbaarheids-badges en compatibiliteitschips koppelen kleur aan een glief en tekstlabel.
• Expliciete exportformatnamen. Downloadknoppen zeggen "PNG downloaden", "SVG downloaden" enz., niet alleen "Downloaden".
• Grote mobiele taptargets. Interactieve elementen zijn minimaal 44 × 44 CSS-pixels op grove aanwijzers, conform WCAG 2.5.8.
• Respect voor verminderde beweging. Overgangen zijn uitgeschakeld onder prefers-reduced-motion: reduce.

Waar we nog tekortkomingen hebben

• JAWS nog niet getest. JAWS-licentie verworven, testslot gereserveerd voor de volgende AT-ronde. Alle andere hoofdproducten (VoiceOver macOS + iOS, NVDA, Narrator, TalkBack) hebben de recentste regressie doorstaan.
• De Visitekaartjesontwerper is qua ontwerp muis-intensief (slepen, canvas-preview). Toetsenbordopties bestaan voor elk besturingselement maar de live-preview feedbacklus is nog steeds visueel-first. Kleurbesturingselementen gebruiken nu juiste <label for> bindingen + role="group" op de preset-kiezer (2026-04-19).
• Complexe generatorstromen (batch-CSV, meerstappenwizard) kunnen een betere sla-linkstructuur gebruiken. Gepland.
• Beschrijvende tabelsamenvatingen. Toegankelijkheids- + compatibiliteitstabellen hebben nu <caption> + scope attributen (2026-04-19). Langere rij-niveau narratieve samenvattingen voor elke rij zijn nog gepland.

Ondersteuningsmatrix hulptechnologie

Ingenieursbijdrage, geen PR-verklaring. Elke rij is een echte browser + AT + platformcombinatie die we fysiek in handen hebben gehad. Status weerspiegelt de meest recente handmatige controle; kanttekeningen registreren alles wat nog een volledige controle blokkeert.

Releasecyclus: matrix opnieuw uitgevoerd bij elke grote UI-wijziging. "Geslaagd" = geen blokker; kanttekeningen zijn cosmetische of smalschalige regressies in de wachtrij voor de volgende release. "Niet getest" = we hebben de combinatie nog niet fysiek uitgevoerd, we zeggen het in plaats van weg te laten.

Toetsenbordkaart

• Tab / Shift+Tab: vooruit / achteruit door focusbare elementen.
• Enter / Spatie: knoppen en schakelaars activeren.
• Pijltoetsen: tussen opties bewegen in een radiogroep (typeselect, sjabloonkiezer, tabbalk).
• Escape: modalen sluiten (Visitekaartjesontwerper, preflight, printdiensten, afbeelding bijsnijden).
• Home / End in een overloopmenu naar het eerste / laatste item springen.

Interne audit, 2026-04-19

Handmatige WCAG 2.2 AA-controle van de homepage, /print-size/, de nieuwe /standards/ hub + 9 autoriteitspagina's en de 45 betalingsschema-landingspagina's (die het gedeelde sjabloon erven). Wat we geverifieerd hebben, wat we opgelost hebben en wat open staat:

Geverifieerd als geslaagd

• Sla-linkdoel bestaat, de sla-link (href="#generator") verwijst naar een zichtbaar element op elke paginavariant.
• Focus-zichtbare stijlen, :focus-visible globaal gedeclareerd met een 2px-omtrek, plus per-invoer-overrides met een gekleurde rand + schaduw. Bevestigd via CSS-audit op regels 34 en 88 van site/css/style.c17bfd85.css.
• Alle formulierinvoeren hebben labels, elk <input> / <select> / <textarea> in de generator heeft een expliciete <label for="..."> of een omringende <label>. Plaatshouder-als-label wordt nergens gebruikt.
• Knoppen hebben toegankelijke namen, elke <button> heeft tekstinhoud of een aria-label. SVG-only knoppen (hamburger, delen, installeren) dragen allemaal aria-label.
• Decoratieve SVG's als verborgen gemarkeerd, aria-hidden="true" op elk decoratief pictogram zodat schermlezers ze overslaan in plaats van hun geometrie aan te kondigen.
• Correcte ARIA-rollen, role="radiogroup" op de typeselect met role="radio" + aria-checked op elke optie; role="tablist" / role="tab" + aria-selected op de paneeltabs.
• Tekstcontrast, primaire tekst is #f5f5f5 op #08090a (≈ 17:1, WCAG AAA). Gedempte tekst #a3a3a3 op dezelfde achtergrond is ≈ 8:1 (boven AAA 7:1).
• Taalwisselaar heeft aria-label="Language" ook al is het zichtbare label impliciet.

Opgelost in deze controle

• Kopniveausprong, drie subkoppen in de vCard / MECARD extra-velden-secties waren <h4> onder een <h2> zonder tussenliggend <h3>. Schermlezer-overzichtstools markeerden dit als "overgeslagen niveau". Gewijzigd naar <h3> zodat het overzicht h1 → h2 → h3 → h3 schoon leest.

Bekende beperkingen

• Volledige Axe / NVDA / VoiceOver-sweep vereist een browser + AT die we niet vanuit de bouwpijplijn kunnen uitvoeren. Maandelijkse handmatige browsergebaseerde controle gepland.
• Onafhankelijke audit door derden is opgedragen (zie tijdelijke aanduiding /accessibility/audit/). Rapport wordt bij aankomst gepubliceerd ook als het bevindingen bevat.
• Het "/" toetsenbordsnelkoppeling voor het opdrachtenpalet is een gering botsingsrisico op pagina's met zoekvelden. We gebruiken preventDefault() alleen wanneer de focus buiten een invoer is; gedocumenteerd maar nog niet geauditeerd met AT.

Een probleem melden

Als iets niet bereikbaar is met het toetsenbord, verkeerd is gelabeld of anderszins onbruikbaar is met uw opstelling, stuur dan een e-mail naar hello@abundera.ai. Vermeld uw browser, besturingssysteem, AT en de specifieke stroom. We behandelen toegankelijkheidsbugs als prioriteitsproblemen.

Laatst beoordeeld: 2026-04-19. Volgende beoordeling: na de volgende grote UI-wijziging.