a11y: fix WCAG 2.2 AA and Uutilsynet audit findings

Tag autocomplete combobox pattern (WCAG 2.1.1, 4.1.2, 4.1.3):
- Add role="combobox", aria-expanded, aria-haspopup to tag input
- Implement arrow key navigation (up/down) through suggestions
- Add Space key support alongside Enter for selecting tags
- Manage aria-activedescendant to track highlighted option
- Add Escape to close suggestions
- Add aria-live="polite" status region announcing suggestion count
- Add aria-selected state on options
- Tag suggestions now have stable IDs for activedescendant

Focus visibility (WCAG 2.4.7):
- Remove outline:none on tag suggestions, replace with visible
  2px solid outline on :focus-visible

Contrast (WCAG 1.4.3):
- Replace opacity:0.5 on disabled rows with muted text color
  and strikethrough on username (maintains 4.5:1 ratio)

Structure and semantics (WCAG 1.3.1):
- Fix heading hierarchy H1→H3 skip in import.html (now H2)
- Replace <nav> misuse for fave actions with div[role="group"]
- Add aria-label="Administrasjonsmeny" to admin dashboard nav
- Wrap admin users table in responsive scrollable region
- Remove redundant "Bilde for:" prefix from image alt text
- Make error page H1 descriptive: "Feil 404: Ikke funnet"
- Add .sr-only utility class for screen-reader-only content
- Add hreflang="en" to English-language external link

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-03-29 17:54:24 +02:00
commit a9d84a4de8
14 changed files with 171 additions and 41 deletions

View file

@ -55,17 +55,21 @@
value="{{.Tags}}"
placeholder="film, sci-fi, favoritt"
autocomplete="off"
role="combobox"
aria-expanded="false"
aria-haspopup="listbox"
aria-autocomplete="list"
aria-controls="tag-suggestions"
aria-describedby="tags-help"
hx-get="{{basePath}}/tags/search"
hx-trigger="keyup changed delay:300ms"
hx-target="#tag-suggestions"
hx-params="*"
hx-vals='{"q": ""}'
aria-describedby="tags-help"
aria-autocomplete="list"
aria-controls="tag-suggestions">
<small id="tags-help">Skriv for å søke i eksisterende merkelapper. Maks {{maxTags}} stk.</small>
hx-vals='{"q": ""}'>
<small id="tags-help">Skriv for å søke i eksisterende merkelapper. Maks {{maxTags}} stk. Bruk piltaster for å velge.</small>
</label>
<ul id="tag-suggestions" role="listbox" class="tag-suggestions" aria-label="Merkelappforslag"></ul>
<div id="tag-status" class="sr-only" aria-live="polite"></div>
<fieldset>
<legend>Synlighet</legend>