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

**Dato:** 2026-05-06
**Verktøy:** Manuell verifisering + smoke-test mot demo-data + DS Tier 2/3-tokens
**Spec:** WCAG 2.1 AA

---

## Oppsummering

Playgroundet er **i hovedsak konformt** med WCAG 2.1 AA. v7.6.0 introduserer
8 nye Tier 3-komponenter (badge--scope-security, verdict-pill-lg, fp-step,
tfa-flow, mat-ladder, suppressed-group, codepoint-reveal, top-risks,
recommendation-card[data-severity], risk-meter, card--severity-{level}).
Alle bygger på DS-tokens som er WCAG-verifisert.

| 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 |
| 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 |
| **Tier 3 ARIA (NY i v7.6.0)** | ✓ | `role="group"` på tfa-flow, `aria-hidden="true"` på tfa-arrow, `aria-label` på tfa-leg buttons, `<ol>` semantisk for top-risks |
| **Severity-redundans (NY i v7.6.0)** | ✓ | `card--severity-` border + `findings__item-severity-dot` farge — fargekontrast er ikke eneste signal |
| 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 |

---

## Tier 3-komponenter (Sesjon 2-4 integrasjon)

### badge--scope-security (Sesjon 2)

Identitets-chip på prosjekt-cards, rapport-cards og app-header. Tekst-
innhold: "llm-security" — synlig tekst, ikke kun farge. WCAG 1.4.1
Use of Color OK.

### verdict-pill-lg (Sesjon 2)

Erstatter custom `.verdict-pill` på alle rapport-typer. Struktur:
`__verdict` (BLOKKERT/ADVARSEL/TILLATT/BETINGET) + `__sub` (kontekst).
DS-tokens for fargekontrast: `--verdict-block`, `--verdict-warning`,
`--verdict-allow`, `--verdict-go-with-conditions`. Synlig tekst,
ikke kun symbol.

### form-progress + fp-step (Sesjon 2)

Onboarding wizard. `aria-current="true"` på aktivt steg. `__bar` /
`__bar-fill` viser progresjon visuelt OG via `aria-valuenow` (WCAG 4.1.2).
`__num` har synlig stegnummer.

### tfa-flow + tfa-leg + tfa-arrow (Sesjon 3)

Lethal trifecta-kjede. Hver `tfa-leg` er et `<button>`-element med
`aria-label` som inkluderer leg-tittel + verktøyets navn.
`tfa-flow` har `role="group"` og `aria-label="Lethal trifecta-kjede"`.
`tfa-arrow` har `aria-hidden="true"` (dekorativ). `:focus-visible`
indikator beholdt fra DS.

### mat-ladder + mat-step (Sesjon 3)

Posture-modenhetsstige. `data-state="completed|current|future"` styrer
visuell tilstand. Aktivt steg har `aria-current="step"`. Progress-bar
under current-steg har `aria-valuenow`/`aria-valuemax`.

### suppressed-group (Sesjon 3)

Narrative-audit suppressed-counter. Strukturert tabell over kategorier
+ count. Ingen interaktive elementer — passiv informasjon.

### codepoint-reveal + cp-tag/cp-zw/cp-bidi (Sesjon 3)

Side-ved-side reveal for Unicode-steganografi. Synlig form (venstre)
og dekoded codepoints (høyre). Inline-spans med `cp-tag`/`cp-zw`/`cp-bidi`-
klasser har visuell tinting + textuell forklaring (WCAG 1.4.1 Use of
Color OK).

### top-risks + top-risk (Sesjon 4)

Rangert top-funn-listing. Semantisk `<ol>` med `<li>` per risk
(skjermleser kan navigere som ordnet liste). `data-severity` attributtet
styrer left-border-farge — supplert av severity-badge `__score` med
synlig tekst (CRITICAL/HIGH/etc). Ingen interaktive elementer på outer
`<li>` per design.

### recommendation-card[data-severity] (Sesjon 4)

Severity-tinted advisory-cards. Border-left + label-bakgrunn endres
basert på severity, men labelen har alltid synlig tekst (CRITICAL/HIGH/
MEDIUM/LOW). Body er semantisk avsnitt eller `<ol>`. WCAG 1.4.1 OK.

### risk-meter (Sesjon 4 utvidelse)

Band-visualisering 0-100 med fargede bands. `__readout` har synlig
score som tekst (`X / 100 · BAND`). `__pointer` er visuelt — score
leses opp uavhengig av peker-posisjon. Bands har `data-band`-attributt
+ synlig label.

### card--severity-{level} (Sesjon 4)

Border-modifier på `.findings__item`. Farge-redundans: dot-fill +
border-color signaliserer samme severity, og finding-id/title leses
alltid som tekst. WCAG 1.4.1 OK.

---

## Fargekontrast (WCAG 2.1 AA)

DS Tier 2 + Tier 3 tokens er testet:

- 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
- **Severity-soft + on-on-soft fargepar (NY i v7.6.0):**
  `--color-severity-critical-soft` mot `--color-severity-critical-on` ≥4.5:1
  `--color-severity-high-soft` mot `--color-severity-high-on` ≥4.5:1
  `--color-severity-medium-soft` mot `--color-severity-medium-on` ≥4.5:1
  `--color-severity-low-soft` mot `--color-severity-low-on` ≥4.5:1
  `--color-state-success` på recommendation-card[data-severity="positive"]
  ≥4.5:1 mot tekst-on-success

Light mode + dark mode begge verifisert via DS-token-definisjoner.

---

## Manuell VoiceOver-test (macOS)

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

| Overflate / komponent | Resultat |
|-----------------------|----------|
| Onboarding form-felter | ✓ Hver input leses opp med label |
| Steg-knapper (fp-step) | ✓ «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-lg | ✓ «BLOKKERT» leses som tekst, ikke kun symbol |
| **tfa-leg button** | ✓ «Untrusted input: WebFetch, knapp» |
| **top-risks `<ol>`** | ✓ «Liste, 5 elementer. 1 av 5: Hardcoded API key, CRITICAL» |
| **recommendation-card label** | ✓ «CRITICAL — Lethal trifecta» |
| **codepoint-reveal** | ✓ Synlig form + dekoded codepoints leses sekvensielt |

---

## Smoke-test mot demo-data (regresjon)

Alle 18 renderere på `dft-komplett-demo` produserer ikke-tom HTML
med forventede DS-klasser (kjørt 2026-05-06):

- 18/18 renderere passerte alle forventede markører
- 0 throws, 0 manglende markører
- HTML-output spenner fra 3998 bytes (`dashboard`) til 15158 bytes (`scan`)

**Kjent begrensning:** `parsed.findings` er tom array for `deep-scan` og
`audit` i demo-fixturer — parser ekstraherer ikke findings fra raw_markdown
for disse to. Helperne `renderTopRisks` og `renderFindingsBlock` returnerer
defensivt tom HTML for tomme findings (korrekt design). Visuell konsekvens:
top-risks/card--severity-{level} på findings vises ikke for disse to
demo-rapportene. Påvirker ikke A11Y, kun showcase-verdi. Sporet for
v7.6.x patch eller framtidig parser-utvidelse.

---

## Anbefalinger (oppfølging)

### Mindre forbedringer (v7.6.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
4. **Parser-utvidelse for deep-scan/audit findings** — så top-risks rendrer i demo-fixturen

### Større forbedringer (v7.7.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
- ARIA-live-region for trifecta-advarsler i toxic-flow-rapport

---

## Konklusjon

Playgroundet oppfyller WCAG 2.1 AA på alle blokkerende punkter, også
etter v7.6.0 Tier 3-integrasjonen. Severity-signalisering bruker både
farge OG tekst (WCAG 1.4.1 Use of Color), og semantiske elementer
(`<ol>`, `<button>`, `<section>`) erstatter generiske `<div>`-er der
det gir tilgjengelig struktur. De fire mindre forbedringene over er
kvalitets-løft, ikke konformansebrudd.

*Audit kjørt manuelt + via smoke-test-script (`/tmp/smoke-test-v76.mjs`,
ikke checked in — kjørbar mot demo-state).*