Toegankelijkheid

Doel: WCAG 2.2 AA voor alle kernflows van de server-rendered Stitch-cockpit.

Productiecontract

Skiplink, aside/nav, header, één main en één h1 per pagina.
Headingniveaus volgen de visuele hiërarchie; tabulaire data gebruikt echte headers.
Formulieren hebben expliciete labels, hints, gekoppelde errors en servervalidatie.
Status gebruikt tekst naast kleur; score en datakwaliteit zijn afzonderlijk benoemd.
Icon-only controls hebben een toegankelijke naam; lokale decoratieve SVG's zijn verborgen.
Externe vacaturetekst is gesanitized; links gebruiken veilige attributen en geen verborgen automatische actie.

Toetsenbord en progressive enhancement

Alle routes, filters, feedback, dossiers, statuswijzigingen en profiel-/bronforms werken zonder JavaScript. JavaScript verbetert uitsluitend drawer, disclosure, viewtoggle, zoekfocus en thema. De mobiele drawer beheert aria-expanded, focus en sluitactie. Focus is zichtbaar; er zijn geen tijdslimieten of keyboard traps. prefers-reduced-motion reduceert alle transities.

Contrast, zoom en reflow

De donkere en lichte tokensets bewaren tekst-, focus- en componentcontrast. Metadata is gedempt maar niet de enige informatiedrager. Content heeft geen vaste teksthoogte. Op 360 px en bij 200% zoom blijft het document binnen het viewport; alleen intrinsiek brede pipeline-/tabeldata gebruikt een gelabelde interne scroller.

Browservalidatie VR-213

Op 22 juli 2026 zijn de negen hoofdervaringen met echte lokale data gecontroleerd:

viewports: 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800;
aanvullende widescreencontrole: 1920×1080 en 2560×1440;
op iedere gecontroleerde route: één h1, skiplink, hoofdlandmark, geen kapotte images en geen documentbrede overflow;
mobiele sidebar is gesloten buiten gebruik, opent met aria-expanded=true en sluit terug naar false;
dark/light wisselt met de correcte actienaam; de initiële naam volgt nu ook een opgeslagen voorkeur;
pipeline en automationtabellen scrollen lokaal zonder de pagina te verbreden;
browserconsole bevatte geen errors of warnings.

De elf bewijsscreenshots staan onder artifacts/visual-validation/. De optionele pytest-Playwrightvariant blijft lokaal overgeslagen wanneer Playwright niet geïnstalleerd is; de HTML/a11y-probe en de geïntegreerde Codex-browseraudit vormen samen het uitgevoerde bewijs.

Handmatige reviewchecklist

Tabvolgorde en zichtbare focus op dashboard, detail, profiel en pipeline.
Screenreader-smoke voor shelllandmarks, scorelabels en formuliererrors.
Dark/light contrast en status zonder kleur.
200% zoom, lange titels, lege/unknown states en 360 px reflow.
Fout/success na POST en terugkeer naar een logisch heading- of messagepunt.

2.7 KiB Raw Permalink Blame History Unescape Escape