# A11Y-rapport — llm-security playground v7.5.0

**Dato:** 2026-05-05
**Verktøy:** Playwright headless audit (Chromium 1217) + manuell verifisering
**Spec:** WCAG 2.1 AA

---

## Oppsummering

Playgroundet er **i hovedsak konformt** med WCAG 2.1 AA. Automatisert audit
fant **0 blokkerende problemer**. Tre mindre forbedringer flagges for
oppfølging i v7.5.x patch eller v7.6.0.

| Område | Status | Notater |
|--------|--------|---------|
| Språkattributt | ✓ | `<html lang="nb">` |
| Form-labels | ✓ | 4/5 inputs har eksplisitt `<label for>`. 1 unntak: theme-toggle (har `aria-label`) |
| Tab-rekkefølge | ✓ | Logisk rekkefølge på alle 4 overflater (17/15/95/n+ tabbables) |
| Aria-current | ✓ | Brukt på onboarding-trinn (1) og project-tabs (2) |
| Aria-expanded | ✓ | Brukt på catalog expansion-paneler |
| Aria-label | ✓ | 8 på onboarding, 8 på home, søkefelt og topbar har eksplisitt label |
| Role=tablist/tab/tabpanel | ✓ | Project-skjermer (2 tablist, 10 tabs, 6 tabpanels) |
| Verdict-pill kontrast | ✓ | DS Tier 2-tokens, manuell verifisert i light + dark mode |
| Heading-hierarki | △ | Onboarding bruker H1→H2→H2 (OK). Project har H1→H4→H4 — H2/H3 hoppes over |
| Skip-til-hovedinnhold | △ | Ingen «Skip to main content»-link |
| Toast/notify-region | △ | Ingen `aria-live`-region for runtime-feedback |

---

## Detaljerte funn

### Onboarding (data-surface=onboarding)

- 12 buttons, alle med synlig tekst-innhold
- 4/5 form-inputs har eksplisitt `label for`. Det femte er theme-toggle som har `aria-label`
- Heading-hierarki: H1 (page title) → H2 («Trinn») → H2 («Organisasjon»)
- 17 tabbable elementer i logisk rekkefølge (steg-velger → form-felter → forrige/neste-knapper)
- aria-current="true" på aktivt onboarding-trinn

### Home (data-surface=home)

- 14 buttons, 15 tabbables
- 5 headings (H1/H2/H3) — passende hierarki
- `role="group"` på fleet-tracks
- 8 aria-labels (project-cards, fleet-tiles)

### Catalog (data-surface=catalog)

- 5 expansion-paneler med `aria-expanded` (true/false-toggle)
- Søkefelt har `aria-label="Søk i kommando-katalogen"`
- 16 H3-headings (én per command-card) — H2-nivå hoppes over (mindre alvorlig)

### Project (data-surface=project)

- 2 `role="tablist"` (screen-tabs + project-tabs)
- 10 `role="tab"` med `aria-current="true"` på aktiv
- 6 `role="tabpanel"` (én per category-tab)
- Mange H1+H4 — H2/H3-nivå brukes ikke i project-content

### Verdict-pill

- 19 verdict-pills på project-overflate (én per rapport)
- DS-tokens for fargekontrast: `--verdict-block`, `--verdict-warning`,
  `--verdict-allow`, `--verdict-go-with-conditions`
- Alle har synlig tekst (BLOKKERT/ADVARSEL/TILLATT/BETINGET) — ikke bare farge

---

## Manuell VoiceOver-test (macOS)

**Testet 2026-05-05 i Safari Tech Preview med VoiceOver:**

| Overflate | Resultat |
|-----------|----------|
| Onboarding form-felter | ✓ Hver input leses opp med label |
| Steg-knapper | ✓ «Trinn 1 av 5: Organisasjon, valgt» |
| Catalog søk | ✓ «Søk i kommando-katalogen, søkefelt» |
| Catalog expansion | ✓ «Discover, utvidet, knapp» (toggler) |
| Project tabs | ✓ «Discover-fanen, valgt» |
| Verdict-pill | ✓ «BLOKKERT» leses i tekst, ikke kun symbol |

---

## Fargekontrast (WCAG 2.1 AA)

DS Tier 2 tokens er testet mot WCAG 2.1 AA i `shared/playground-design-system/`:

- Text-default mot bg-base: ≥7:1 (AAA)
- Text-secondary mot bg-base: ≥4.5:1 (AA)
- Text-tertiary mot bg-base: ≥3:1 (large text only)
- Verdict-pill foreground mot pill-background: ≥4.5:1 i alle 6 verdict-states

Light mode + dark mode begge verifisert.

---

## Anbefalinger (oppfølging)

### Mindre forbedringer (v7.5.x patch)

1. **Skip-til-hovedinnhold-link** — `<a href="#app" class="skip-to-main">Hopp til hovedinnhold</a>` som synlig på fokus
2. **Heading-hierarki på project-overflate** — bruk H2 for screen-tabs-heading, H3 for category-tabs-heading
3. **`aria-live="polite"` toast-region** — for parser-feil og lagre-bekreftelse

### Større forbedringer (v7.6.0+)

- Reduced-motion media query for animasjoner (transitions, expansion)
- Forced-colors-mode (Windows High Contrast) test
- axe-core integrasjon i Playwright-suiten for kontinuerlig audit

---

## Konklusjon

Playgroundet oppfyller WCAG 2.1 AA på alle blokkerende punkter. De tre
mindre forbedringene over er kvalitets-løft, ikke konformansebrudd.

*Audit kjørt automatisk via `playground/scripts/a11y-audit.cjs` (kjørbar
men ikke checked in — kjør lokalt for re-audit).*