🏠 Overview › 👥 User Roles ›📖 Access Contact Detail Screen with Full Accessibili...

Access Contact Detail Screen with Full Accessibility Support

All interactive elements on the contact detail and edit screens must conform to WCAG 2.2 AA accessibility standards, which all four partner organizations have identified as a non-negotiable requirement. The semantics wrapper widget provides semantic labels for every interactive element. Touch targets meet the minimum 44×44pt size as enforced by the accessible touch target wrapper. The accessible modal sheet is used for any overlays. Live region announcements are triggered for dynamic content changes such as validation errors appearing. The contrast ratio validator ensures all text meets minimum contrast ratios against the dark background. The cognitive load rule engine ensures the edit form does not present more than 7 fields per screen section.

CRITICAL story-contact-detail-edit-screen-organization-admin-007 5 pts
5
Story Points
Critical
Priority
Contact Detail & Edit Screen
Feature

User Story

As a Organization Administrator
I want to use the contact detail and edit screens with full screen reader support, adequate touch targets, and plain-language labels on all interactive elements
So that coordinators with visual or motor impairments can fully use the contact management features without barriers, in compliance with the WCAG 2.2 AA requirements mandated by all partner organizations

Acceptance Criteria

  • Given a coordinator uses VoiceOver (iOS) or TalkBack (Android), When they navigate the contact detail screen, Then every interactive element is announced with a meaningful semantic label including the contact's name, field values, and action buttons
  • Given a coordinator uses the edit contact screen with a screen reader, When a validation error appears on a field, Then a live region announcement is triggered informing the user of the specific error without requiring them to refocus
  • Given any button or tappable element on the contact detail or edit screens, When I inspect its rendered size, Then it meets the minimum 44×44 points touch target requirement
  • Given the edit screen renders field labels and values against the dark background, When the contrast ratio is measured, Then all text meets the minimum 4.5:1 contrast ratio for normal text and 3:1 for large text
  • Given the edit form contains more than 7 fields, When it is rendered, Then fields are grouped into labelled sections with a maximum of 7 fields per section to reduce cognitive load
  • Given I navigate the contact detail screen using keyboard-only navigation (accessibility mode), When I tab through interactive elements, Then focus order follows a logical top-to-bottom, left-to-right sequence matching the visual layout

Business Value

All four partner organizations — NHF, Blindeforbundet, HLF, and Barnekreftforeningen — explicitly identified universal accessibility as a MUST HAVE requirement, with Blindeforbundet specifically requiring screen reader support as their primary access modality. Failing to build accessibility into the contact detail and edit screens from the start would require expensive retrofitting, exclude a significant portion of the coordinator user base with disabilities, and potentially expose the development team to legal liability under Norwegian universal design legislation (Likestillings- og diskrimineringsloven). Accessibility is architecture, not a feature add-on.

Components

Contact Detail & Edit Screen
Related Feature
Organization Administrator
User Role