🏠 Overview › 👥 User Roles ›📖 Access Badge Shelf with Full Screen Reader Support

Access Badge Shelf with Full Screen Reader Support

All badge-related UI components must meet WCAG 2.2 AA standards and be fully operable via VoiceOver (iOS) and TalkBack (Android). Badge cards must have meaningful semantic labels announcing badge name, earned or locked status, and date earned. The badge detail modal must have a clearly labelled close button, logical focus order, and all decorative badge icons must have empty alt text to prevent screen reader noise. This is especially critical for Blindeforbundet users, for whom screen reader support is a non-negotiable baseline requirement.

HIGH story-achievement-badges-status-recognition-peer-mentor-007 3 pts
3
Story Points
High
Priority
Achievement Badges & Status Recognition
Feature

User Story

As a Peer Mentor (Likeperson)
I want to navigate and interact with the badge shelf and badge details using only a screen reader
So that I can benefit from the recognition system regardless of whether I have a visual impairment, ensuring the feature is fully inclusive

Acceptance Criteria

  • Given I navigate the badge shelf with VoiceOver enabled, When I focus on a badge card, Then the screen reader announces '[Badge Name], earned on [Date]' or '[Badge Name], locked — [progress description]'
  • Given I open the badge detail modal with a screen reader, When the modal appears, Then focus is automatically moved to the modal heading and the close button is reachable via a single swipe
  • Given I dismiss the badge detail modal, When the modal closes, Then focus returns to the badge card that triggered the modal open
  • Given decorative badge icon images are rendered, When a screen reader traverses the badge shelf, Then decorative icons are skipped and do not generate redundant announcements
  • Given the badge earned celebration overlay appears, When a screen reader is active, Then the badge name and award message are announced immediately via an accessibility live region without requiring user focus

Business Value

Blindeforbundet and NHF have users with visual impairments for whom screen reader support is mandatory, not optional. Building accessibility into the badge system from the start avoids expensive retrofitting and ensures that recognition features benefit all peer mentors equally, fulfilling the organisations' commitment to universal design as a core product principle.

Components

Dependencies

Achievement Badges & Status Recognition
Related Feature
Peer Mentor (Likeperson)
User Role