WCAG 2.2 AA audit and remediation for all five auth screens
epic-bankid-vipps-login-ui-task-013 — Conduct a structured WCAG 2.2 AA audit across all five authentication UI components: Auth Method Selector, Vipps Auth Screen, BankID Auth Screen, Biometric Auth Screen, and Personnummer Confirmation Widget. Audit criteria include: contrast ratios (4.5:1 text, 3:1 UI elements), touch target sizes (44x44 dp minimum), focus order correctness, screen reader label accuracy, error identification, and status message announcements. Document findings and apply all remediations. Produce a sign-off checklist per screen for partner organization review.
Acceptance Criteria
Technical Requirements
Execution Context
Tier 7 - 84 tasks
Can start after Tier 6 completes
Implementation Notes
Approach this as two parallel workstreams: (1) automated checks that can run in CI, and (2) a manual audit checklist. For automated contrast checks, build a small test utility: contrastRatioOf(AppColors.textPrimary, AppColors.backgroundSurface) >= 4.5 — this is deterministic because you control the design tokens. For touch target sizes, wrap all AppButton instances in a SizedBox(width: 44, height: 44) minimum — many Flutter themes already do this via MaterialTapTargetSize.padded but verify explicitly. Focus order is harder to automate — use SemanticsDebugger at runtime to visually inspect and then codify in widget tests by walking the semantics tree.
For the sign-off checklist, use the WCAG 2.2 quick reference as the template structure: 1.1.1, 1.3.1, 1.4.1, 1.4.3, 1.4.11, 2.1.1, 2.4.3, 2.5.8, 4.1.2, 4.1.3. Pay extra attention to the Personnummer widget since it contains sensitive data UI patterns that NHF specifically flagged as requiring screen reader warnings (from workshop summary: 'Varsling ved opplesning av sensitive felt'). The GDPR disclosure scroll gate must not trap keyboard/switch-access users — ensure the 'Read disclosure' toggle button is reachable without scrolling.
Testing Requirements
Automated: add flutter_test widget tests that assert minimum Size(44, 44) on all tappable widgets using tester.getSize(find.byType(AppButton)). Automated: assert design token color pairs against a minimum contrast ratio lookup table — implement a contrastRatio(Color fg, Color bg) utility in test helpers and assert >= 4.5 for all text-on-background pairs used in auth screens. Manual: enable SemanticsDebugger wrapper on each screen and record findings. Manual: test with VoiceOver (iOS) and TalkBack (Android) on physical devices or simulators, traversing all interactive elements and verifying announcements.
Produce docs/accessibility/auth-screens-wcag-audit.md with pass/fail per criterion per screen. All automated tests must pass in CI as part of the standard test suite.
BankID on mobile uses a WebView or external app redirect that has known compatibility issues with Flutter's WebView package on certain Android versions. BankID's JavaScript-heavy broker pages may also trigger CSP or mixed-content errors in a Flutter WebView, preventing the authentication flow from completing.
Mitigation & Contingency
Mitigation: Use the flutter_inappwebview package (more mature than webview_flutter for complex OAuth pages) and validate BankID WebView rendering on the broker's test environment before integrating with the service layer. Prefer external browser redirect where the broker supports it.
Contingency: If WebView approach fails for certain BankID brokers, implement the full external browser redirect + deep link callback pattern as the primary flow and treat WebView as a fallback only.
The OAuth redirect flows (both Vipps and BankID) temporarily move the user outside the Flutter app into an external browser or the Vipps/BankID app. Screen reader users may lose focus context during this transition and become disoriented when the app callback returns them to the loading state, failing the WCAG 2.2 AA mandate.
Mitigation & Contingency
Mitigation: Implement explicit accessibility announcements (live region announcements) at each transition point: when launching the external flow ('Opening Vipps'), during the loading wait state ('Waiting for Vipps confirmation'), and on return ('Login successful' or 'Login failed — please try again'). Test with VoiceOver on iOS and TalkBack on Android during development.
Contingency: If OAuth transition accessibility is unresolvable on a specific platform, add an explicit accessibility user guide in the onboarding flow explaining the external app redirect behavior to set user expectations.
Biometric UI varies significantly across devices — Face ID (iPhone), fingerprint sensor (most Android), front-facing camera biometrics (some Android), and devices with no biometrics at all. Flutter's local_auth handles the OS dialog but the surrounding UI must gracefully handle all these cases, and testing coverage for all permutations is difficult.
Mitigation & Contingency
Mitigation: Use local_auth's getAvailableBiometrics() to detect the exact biometric type and render appropriate iconography (Face ID icon vs. fingerprint icon). For devices with no biometrics, skip the biometric screen entirely and route directly to full re-authentication.
Contingency: If a specific device configuration produces unexpected local_auth behavior in production, implement a user-accessible toggle in Settings to disable biometric login entirely, routing those users to the standard BankID/Vipps flow without biometrics.