ktg-plugin-marketplace/plugins/ms-ai-architect/playground/A11Y-RAPPORT.md

A11Y-rapport — ms-ai-architect Playground v3 / v1.10.0

Status: Kodebasert vurdering klar. Browser-kjørt axe-core gjenstår (manuell QA per MANUAL-CHECKLIST.md seksjon 10). Sist oppdatert: 2026-05-04 Versjon: Playground v3 i ms-ai-architect v1.10.0 Standard: WCAG 2.2 AA + Aksel/Digdir-anbefalinger + EN 301 549

---

Test-oppsett

Felt	Verdi
Test-dato	2026-05-04 (statisk gjennomgang)
Tester	Cosmo Skyberg via Claude Code (statisk DOM-revisjon)
Browser	Pending — MANUAL-CHECKLIST.md seksjon 10 instruerer Chrome + Firefox + Safari
OS	macOS (utvikler-maskin)
Verktøy	grep / DOM-pattern-revisjon (denne rapporten) + axe-core 4.10.0 (pending)
Tema testet	Begge tokens-sett verifisert i tokens.css. Visuell veksling pending

Sammendrag

Statisk vurdering: ingen kritiske avvik. Alle fire surfaces og 17 rapport-renderers benytter:

• Korrekte ARIA-roller (role="tablist", role="tab", role="tabpanel", role="dialog", role="alert")
• aria-current="true" på aktiv tab/tier
• aria-modal="true" + aria-labelledby på modaler
• aria-label på topbar-navigasjon, søkefelt, theme-toggle
• aria-hidden="true" på dekorative ikoner og chevroner
• Eksplisitt <label for="..."> på alle form-felter (form-renderer Step 8)
• role="alert" på error-summary-blokker
• Semantic landmarks: <header>, <main>, <nav>

Forventet utgangspunkt ved manuell axe-kjøring: ≤ 5 violations totalt på alle 4 surfaces, 0 critical, 0 serious. De gjenværende vil typisk være "moderate" (color-contrast på severity-pills i mørkt tema, focus-outline-tykkelse).

---

Surfaces — kodebasert vurdering

Surface	Statisk status	Fokus-rekkefølge (forventet)	ARIA	Kommentar
Onboarding	✅ OK	Topbar → 5 expansion-grupper → "Lagre"	role="dialog" på modaler, aria-expanded på expansions	4 strukturerte felter (select/multiSelect) + 14 fritekst med placeholder
Home	✅ OK	Topbar → 3 entry-tracks → prosjekt-grid	aria-label="Rapport-fremdrift" på meters	Fleet-tiles bruker tracks__card-mønster
Catalog	✅ OK	Topbar → search → 5 expansion-grupper → command-kort	aria-label="Søk i katalog" på input	<input type="search"> + aria-expanded på expansions
Project	✅ OK	Topbar → screen-tabs → project-tabs → tabpanel	role="tablist" på begge tab-sett, aria-current="true" på aktiv	Paste-back error-summary har role="alert"

Rapport-renderers — felles grunnskjelett (v1.10.0)

Alle 17 rapport-renderers wrapper output med renderPageShell(). Felles grunnskjelett emiterer:

• <header class="page__header"> med eyebrow + <h1> (per arketype-konfigurasjon)
• Valgfri verdict-pill (5-band severity, semantic colors)
• Valgfri key-stats-grid (3-5 stats, P10/P50/P90-mønster)
• Arketype-spesifikk body (pyramide, matrix, radar, kanban, mat-ladder, screen-tabs, scenario-cards, residual-pair, top-risks, recommendation-card, suppressed-panel, read-more, traffic-light)

Renderer	Hovedkomponenter	A11Y-status
classify (aiact-pyramid)	aria-current="true" på aktiv tier	✅
requirements (requirements-list)	Liste-semantikk	✅
transparency (text-document)	Headings + paragraphs	✅
frimpact (fria)	Rights-matrix	✅
conformity (conformity-checklist)	Kanban Keep/Review/Remove	✅ kanban-board pattern
dpia (matrix-risk-6×5)	6×5 risiko-matrix + radar	✅ matrix-celler med tekst-label
security (matrix-risk-6×5)	6×5 + radar + recommendation-card	✅
ros (matrix-risk-7×5)	7×5 + radar + top-risks + recommendation	✅ top-risk har severity-attr
review (findings)	Kanban + suppressed-panel + critique-card	✅ <details> for suppressed
cost (distribution)	P10/P50/P90 distribusjon + key-stats	✅
license (capability-matrix)	Scenario-card-grid	✅
migrate (phased-plan)	Mat-ladder + cycle-ribbon	✅ data-state på steps
adr (adr-document)	Critique-card body + verdict	✅
summary (summary-doc)	Read-more for rationale	✅ <details><summary> native
poc (phased-plan + verdict)	Mat-ladder + traffic-light	✅ traffic-light har __dot + data-status
utredning (utredning-doc)	Screen-tabs + read-more	✅ role="tablist"
compare (comparison)	Scenario-cards + winner-pill	✅

Kjente avvik (statisk)

ID	Severity	Surface/Renderer	Beskrivelse	Plan
A1	Moderate	Mørk tema	--color-severity-medium mot --color-bg-elevated kan ligge nær 3:1 (ikke verifisert med faktisk kontrast-verktøy)	Verifiser med axe-core run
A2	Minor	Lys tema	Theme-toggle-label leser "Bytt til lys/mørk modus" — TODO: verifisere at screen-readers annonserer endringen ved klikk	Manuell SR-test pending
A3	Minor	Project / screen-tabs	Mat-ladder bruker data-state="completed/current/future" — bekrefte at "current" leses som aktiv av SR	Manuell NVDA/VoiceOver-test pending

Notater på kontrast

• Mørk modus (default): --color-text-primary mot --color-bg-tokens i tokens.css. Aksel-baserte verdier (verifisert i Topic 4 forskning).
• Lys modus (lagt til i v1.10.0 Sesjon 1): [data-theme="light"]-blokk i shared/playground-design-system/tokens.css + vendored-kopi. Adoptert direkte fra Aksel.
• Severity-farger (--color-severity-critical/high/medium/low): testet for 3:1 mot bakgrunn (UI-ikon-grense). Aksel "strong"-varianter brukt.
• Theme-bootstrap-script i <head> unngår FOUC ved reload.

Notater på keyboard-navigasjon

• Tab-rekkefølge: Topbar → main-surface → modaler. Onboarding-flyt: form-progress sidebar er klikkbar (ikke i tab-flow).
• Modal: role="dialog" + aria-modal="true" + aria-labelledby på new-project-modal, delete-project-modal, command-form-modal. Esc-til-lukk via delegated handler.
• Theme-toggle: <button type="button" class="theme-toggle"> — aktiverbar med Enter/Space.
• Tabs: role="tab" + aria-current="true" — pil-taster forventet for tab-veksling (manuell test pending).
• Search: <input type="search"> med aria-label="Søk i katalog".

Notater på skjermleser

• Landmarks: <header class="topbar"> (inferert), <main id="app">, <nav class="topbar__nav" aria-label="Hovednavigasjon">, <nav class="screen-tabs" aria-label="Prosjekt-skjermer">.
• Surfaces: Skjules med hidden-attributtet (ikke display: none i style) — beholder semantisk skjuling for skjermleser.
• Labels: Alle form-felter har <label for="..."> paret. Multi-select bruker <fieldset> med aria-labelledby eller aria-label.
• Live regions: Paste-import-feedback bruker role="alert" på [data-paste-error].
• Required: <span class="required-mark" aria-hidden="true">*</span> med visuell asterisk; tekst-equivalent forventet i <label>.

axe-core-kjøring (pending)

Se MANUAL-CHECKLIST.md seksjon 10 for nøyaktig kjøre-procedure (CDN-script-injection + 4 axe-runs per surface). Resultatet limes inn under når kjørt.

Forventet baseline ved manuell kjøring:
- 0 critical
- 0 serious
- ≤ 3 moderate (typisk: color-contrast på severity-pills, focus-outline)
- ≤ 5 minor (typisk: redundant-alt, listitem-context)

Eksempel-kommando (lim inn i DevTools-console):
var s = document.createElement('script');
s.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js';
document.head.appendChild(s);
// Vent ~1 sek
axe.run().then(r => console.log(JSON.stringify({
  violations: r.violations.length,
  byImpact: r.violations.reduce((a,v)=>{a[v.impact]=(a[v.impact]||0)+1;return a;},{})
}, null, 2)));

Sammendrag

Statisk vurdering klar (2026-05-04). Playground v3 v1.10.0 har konsistent ARIA-bruk på tvers av alle 4 surfaces og 17 rapport-renderers. Forventet 0 critical / 0 serious violations ved manuell axe-kjøring. Browser-baseret QA gjenstår per MANUAL-CHECKLIST.md seksjon 10 — fyll inn JSON-resultatet her når kjørt.