Access Badge Content with Screen Reader Accessibility
Every Badge Widget includes a descriptive alt text string that conveys the badge name, its unlocked/locked state, and current progress for screen reader users (e.g. 'Activity Champion badge, locked, progress 7 of 15'). The Achievements screen uses semantic Flutter widget labels so VoiceOver and JAWS can navigate the badge catalogue in a logical reading order. Contrast ratios for badge illustrations and progress rings meet WCAG 2.2 AA requirements. Animations (AnimatedSwitcher transitions, progress ring fills) do not block or interrupt screen reader focus. This is particularly critical for Blindeforbundet users, where screen reader compatibility is an organisational requirement.
User Story
Acceptance Criteria
- Given a user navigates the Achievements screen with VoiceOver enabled, when focus moves to a badge, then the screen reader announces the badge name, its locked or unlocked state, and the progress value if applicable
- Given a badge has a progress ring, when a screen reader user focuses on it, then the accessible label includes both the current value and the target threshold (e.g. '7 of 15 assignments completed')
- Given the badge unlock animation plays, when it completes, then screen reader focus is not disrupted and the newly unlocked state is announced
- Given all badge illustrations are checked against WCAG 2.2 AA, when measured, then foreground-to-background contrast ratios meet or exceed 4.5:1 for normal text and 3:1 for graphical elements
- Given a locked badge is displayed, when a screen reader user focuses on it, then the label clearly states the badge is locked and the criteria are reachable via a single activation gesture
Business Value
Blindeforbundet serves visually impaired individuals, and many of their peer mentors may use screen readers themselves. Excluding visually impaired users from the recognition programme would undermine the organisation's mission and create a discriminatory product experience. WCAG 2.2 AA compliance is a contractual and ethical requirement across all three partner organisations, making accessibility implementation non-negotiable for any user-facing feature.