🏠 Overview › 🎯 Features ›🎯 WCAG 2.2 AA Compliance

WCAG 2.2 AA Compliance

Feature Detail

high complexity extracted Accessibility Confidence: 100%
0
Components
18
Shared
0
User Stories
Yes
Analyzed

Description

WCAG 2.2 AA Compliance is the cross-cutting accessibility foundation for the entire Meander Mobile App. The requirement covers screen reader support (VoiceOver/TalkBack), cognitive accessibility for users with stroke or cognitive impairments, 4.5:1 text contrast and 3:1 for large text and UI components, minimum 24x24 CSS-pixel touch targets, typography scalable to 200%, keyboard navigation with visible focus indicators, and non-gesture alternatives for all drag interactions. It applies to every screen and interaction from day one without exception - no organization is exempt and no compliance is deferred to a later release.

Sources & reasoning

Lines 28 and 30 declare WCAG 2.2 AA a hard MVP requirement with no exceptions and no deferrals across all organizations. Lines 31-38 enumerate specific sub-requirements (screen reader, contrast, touch targets, keyboard, drag alternatives). Blueprint marks this feature [MVP]. Source doc phase matrix (§4) lists WCAG as Fase 1, confirming MVP target_release.

  • Appen SKAL oppfylle **WCAG 2.2 nivĂĄ AA** som minimumskrav for alle skjermer og interaksjoner - fra dag Ă©n, for alle organisasjoner. Ingen organisasjon er unntatt eller utsatt til senere fase.
  • **WCAG 2.2 AA compliance** er et absolutt krav for MVP - ikke noe som fikses etterpĂĄ.

Analysis

Business Value

All four partner organizations serve users with diverse physical, cognitive, and sensory needs: blind users at Blindeforbundet, deaf users at HLF, users with stroke and cognitive impairments at NHF, and families in medical crisis at Barnekreftforeningen. Accessibility is a prerequisite for the platform's mission of peer support, not an optional enhancement. WCAG 2.2 AA compliance from day one prevents expensive post-launch retrofitting, satisfies Norwegian public-sector digital service requirements, and ensures the app functions correctly with assistive technology on both iOS and Android without maintaining separate accessible code paths for each organization or screen.

Implementation Notes

Flutter accessibility is implemented via the Semantics widget hierarchy on all interactive elements, with MergeSemantics and ExcludeSemantics applied to control screen reader noise. AccessibilityDesignTokens centralizes color, spacing, and typography constants enforcing contrast ratios and 24dp touch targets globally across the design system. SemanticLabelHelper provides reusable utilities for labeling icon-only and dynamically generated content. FocusManagementService enforces logical focus traversal order and visible focus rings via Flutter's FocusNode API. All animations respect MediaQuery.disableAnimations and all drag interactions expose non-gesture alternatives per WCAG 2.2 criterion 2.5.7.

Quality Assurance

Peer Mentor (primary) · Coordinator (same flow)
1
Scenarios
6
UAT Steps
21
A11y Annotations
2
Role Boundaries
Peer Mentor

Peer Mentor

Quick UAT

  1. Ă…pne appen. Kontroller at skjermleseren (VoiceOver/TalkBack) annonserer 'Logg inn' som sidetittel og at alle felt er korrekt merket ('E-postadresse', 'Passord', 'Logg inn'-knapp).
  2. Trykk på 'E-postadresse'-feltet. Kontroller at berøringsflaten er minst 24x24 CSS-piksler og at tastaturet åpnes automatisk med synlig fokusring rundt feltet.
  3. Fyll inn gyldig e-post og passord. Trykk 'Logg inn'. Kontroller at feilmelding ved feil legitimasjon leses opp av skjermleser og vises i tekst – ikke kun fargebasert varsel.
  4. Etter innlogging: aktiver systemets store tekst (200 %). Naviger til Hjem-fanen. Kontroller at all tekst, knapper og kort er fullt lesbare uten overlapping eller avskjæring.
  5. Åpne 'Legg til aktivitet'-flyt via sentralknappen i bunnnavigasjonen. Naviger gjennom alle steg kun med tastatur (Tab / piltaster). Kontroller at fokusrekkefølgen er logisk og at synlig fokusindikator alltid er til stede.
  6. Fullfør og send inn aktiviteten. Kontroller at en 'polite' live-region annonserer bekreftelsen ('Aktivitet lagret') uten at skjermleser mister fokus.

Quick UAT — Accessibility

  1. Ă…pne appen. Kontroller at skjermleseren (VoiceOver/TalkBack) annonserer 'Logg inn' som sidetittel og at alle felt er korrekt merket ('E-postadresse', 'Passord', 'Logg inn'-knapp).
    • Screen reader VoiceOver/TalkBack annonserer: 'Logg inn, skjermbilde'. Deretter: 'E-postadresse, tekstfelt' → 'Passord, sikret tekstfelt' → 'Logg inn, knapp'.
    • Keyboard / focus Tab-rekkefølge: sidetittel → e-postfelt → passordfelt → Logg inn-knapp. Ingen fokusfeller.
    • Focus visibility Synlig fokusring (≥ 2px, kontrastforhold ≥ 3:1 mot bakgrunn) vises pĂĄ aktivt felt.
    • Contrast Label-tekst og plassholdertekst: 4.5:1 mot bakgrunn. Logg inn-knapp bakgrunnsfarge: 3:1 mot tilstøtende overflate.
  2. Trykk på 'E-postadresse'-feltet. Kontroller at berøringsflaten er minst 24x24 CSS-piksler og at tastaturet åpnes automatisk med synlig fokusring rundt feltet.
    • Focus visibility Fokusring vises umiddelbart ved tap; bevares under tastaturinntasting.
    • Touch target Tekstfelt har minimum 48dp tappbar høyde (≥ 24 CSS px). Tappbar sone strekker seg til full bredde av input-beholderen.
    • Zoom Ved 200 % skriftstørrelse beholder feltet full bredde; label krymper ikke under minimum lesbar størrelse.
  3. Fyll inn gyldig e-post og passord. Trykk 'Logg inn'. Kontroller at feilmelding ved feil legitimasjon leses opp av skjermleser og vises i tekst – ikke kun fargebasert varsel.
    • Screen reader Ved feil: TalkBack annonserer feilmeldingen inline ('Feil e-post eller passord. Prøv igjen.') uten at bruker mĂĄ navigere manuelt til meldingen.
    • Focus visibility Fokus flyttes automatisk til første felt med feil etter mislykket innsending.
    • Live region 'Feil e-post eller passord. Prøv igjen.' injiseres i en polite live-region knyttet til skjemaet.
    • Contrast Feilmelding vises i tekst OG med ikon; ikke utelukkende som rød fargeendring. Feilmeldingstekst: 4.5:1.
  4. Etter innlogging: aktiver systemets store tekst (200 %). Naviger til Hjem-fanen. Kontroller at all tekst, knapper og kort er fullt lesbare uten overlapping eller avskjæring.
    • Keyboard / focus Bunnnavigasjonsknapper forblir separate fokusbare elementer ved 200 % – ingen knapper smelter visuelt sammen.
    • Zoom Ved 200 % systemskrift: kortinnhold scrolles vertikalt, ingen tekst avskjæres av overflow:hidden, ingen knappetekst trunkes uten tooltip-alternativ.
    • Contrast Alle tekstnivĂĄer (overskrift, brødtekst, sekundær metadata) opprettholder 4.5:1 ved skalert skrift.
  5. Åpne 'Legg til aktivitet'-flyt via sentralknappen i bunnnavigasjonen. Naviger gjennom alle steg kun med tastatur (Tab / piltaster). Kontroller at fokusrekkefølgen er logisk og at synlig fokusindikator alltid er til stede.
    • Screen reader Stegnummer annonseres: 'Steg 2 av 5, Velg kontakt'. Obligatoriske felt merket 'pĂĄkrevd'.
    • Keyboard / focus Hvert skjemasteg: Tab beveger fremover, Shift+Tab bakover. Nedtrekkslister navigeres med piltaster. Ingen steg krever drag-gestus; alternativ knapp tilgjengelig for alle drag-interaksjoner.
    • Focus visibility Fokusindikator er aldri skjult bak sticky header eller modal-overlegg. FocusManagementService plasserer fokus øverst pĂĄ nytt steg ved overgang.
    • Touch target Alle valgknapper, radioknapper og avmerkingsbokser: ≥ 24Ă—24 CSS px tappbar flate.
  6. Fullfør og send inn aktiviteten. Kontroller at en 'polite' live-region annonserer bekreftelsen ('Aktivitet lagret') uten at skjermleser mister fokus.
    • Screen reader Etter innsending: fokus returnerer til Hjem-skjermen. TalkBack annonserer: 'Aktivitet lagret. Du er nĂĄ pĂĄ Hjem-skjermen.'
    • Focus visibility Fokus flyttes eksplisitt av FocusManagementService til Hjem-overskriften etter vellykket innsending – ikke til tilfeldige element.
    • Live region 'Aktivitet lagret.' sendes til en aria-live='polite'-region. Melding leses opp etter pĂĄgĂĄende annonsering, ikke midt i.

Role Boundaries

2 role(s) must NOT access this feature
  • Global Administrator

    Etter innlogging vises en 'Ingen tilgang'-skjerm med lenke til Admin-portalen. Mobilappen har ingen navigasjonsflater for Global Admin. Deep-link til enhver app-skjerm returnerer 403.

  • Prospective Organization Representative

    Rollen finnes ikke i mobilappens brukermodell. Innloggingsforsøk avvises med 'Ingen konto funnet'. Ingen app-skjermer er tilgjengelige.

Expected End State

Alle seks verifiseringspunkter er bestått: skjermleser-annonsering korrekt på innlogging og aktivitetsinnsending, berøringsflater ≥ 24×24 CSS px, feilmeldinger i tekst og ikke kun farge, layout intakt ved 200 % skrift, logisk tastatur-fokusrekkefølge gjennom hele aktivitetsflyten, og live-region bekrefter innsending uten fokustap.

Components (18)

Shared Components

These components are reused across multiple features

User Stories

No user stories have been generated for this feature yet.