Widget TreeIntermediate30 XP4 min read
How does Flutter handle accessibility and the Semantics widget?
TL;DR: Flutter builds a semantic tree in parallel with the widget tree. The Semantics widget annotates nodes with labels, hints, and actions for screen readers (TalkBack on Android, VoiceOver on iOS).
Full Answer
Flutter sends accessibility information to the platform via a semantic tree. Most built-in widgets (Text, ElevatedButton, TextField) automatically populate semantics. Use the Semantics widget to add or override annotations.
- ▸Semantics(label: '...') — provides a text label for screen readers
- ▸Semantics(hint: '...') — describes what happens when interacted with
- ▸Semantics(button: true) — marks as a button role
- ▸ExcludeSemantics — removes a widget from the semantic tree (decorative icons)
- ▸MergeSemantics — combines child semantics into one node
- ▸SemanticsDebugger — overlay to visualize the semantic tree during testing
🎯
Use SemanticsDebugger(child: MyApp()) in main() during development to inspect what screen readers see. Or run: flutter test --enable-accessibility-checks.
Code Examples
dartAdding semantics to a custom widget
Output
Screen reader announces 'Add to favorites, button' for the first; skips the decorative star entirely
Common Mistakes
- ✗Using icon-only buttons without Semantics labels — screen readers can't describe them
- ✗Not testing with actual TalkBack/VoiceOver — the semantic tree can look correct but feel wrong in practice
Interview Tip
💡
Accessibility questions are increasingly common at top companies. Mentioning SemanticsDebugger and actual device testing shows you take a11y seriously.
#accessibility#Semantics#screen-reader#a11y#TalkBack#VoiceOver