Accessible Search Input Field
Component Detail
Description
A semantically labeled TextField for entering search queries, supporting screen readers (VoiceOver/JAWS) via Semantics widget and voice-to-text as a progressive enhancement for Blindeforbundet. Provides a clear button and announces result count changes to accessibility services.
search-input-field
Summaries
This component ensures that coordinators who are blind or have low vision — a population that Blindeforbundet specifically serves — can use the search functionality independently and without assistance. By implementing full screen reader support via VoiceOver and JAWS compatibility and providing voice-to-text input as a progressive enhancement, this field removes a significant accessibility barrier that would otherwise exclude a portion of the intended user base. Accessibility compliance is not only an ethical obligation for an organization serving people with visual impairments, but increasingly a legal and funding requirement in Norway. Delivering a genuinely accessible search experience strengthens the organization's credibility and demonstrates that its own tools reflect the values it promotes.
This is a low-complexity UI component but with non-trivial accessibility requirements that extend testing scope beyond standard functional testing. Development requires a Flutter developer with hands-on experience using the Semantics widget and testing with VoiceOver on iOS and JAWS on desktop — if this expertise is not available on the team, plan time for research or a specialist review. Voice-to-text is specified as a progressive enhancement, meaning the component must degrade gracefully on devices or configurations where it is unavailable. The announceResultCount interface requires coordination with the parent search screen to ensure result counts are passed in correctly as queries resolve.
This component has no dependencies and can be developed and tested in isolation early in the sprint, unblocking the search screen composition work.
This Flutter widget wraps a TextField with a Semantics node to ensure screen reader compatibility on both iOS (VoiceOver) and Android/desktop (JAWS via TalkBack or Windows accessibility APIs). The setAccessibilityLabel interface allows the parent to inject a context-appropriate label at runtime. announceResultCount should use Flutter's SemanticsService.announce() or a live region equivalent to push count updates to the accessibility tree without requiring focus change. Voice-to-text support is a progressive enhancement — use the speech_to_text package or equivalent, gated behind a platform capability check, and surface it as an optional microphone icon within the field.
The onCleared interface triggers both text field reset and a semantics announcement confirming the clear action. The component has no dependencies, making it fully unit-testable in isolation. Ensure the clear button meets minimum 44x44pt touch target size per accessibility guidelines.
Responsibilities
- Render accessible text field with aria/Semantics label
- Support voice-to-text input (progressive enhancement)
- Announce live search result count to screen readers
- Provide clear/reset button
Interfaces
build(BuildContext)
onChanged(String value)
onCleared()
setAccessibilityLabel(String label)
announceResultCount(int count)
enableVoiceToText(bool enabled)