Flutter WebMedium30 XP4 min read
How do you make Flutter Web apps accessible?
TL;DR: Use the Semantics widget to add ARIA-equivalent labels and roles. Flutter generates semantic trees automatically for standard widgets. Custom painted widgets need explicit Semantics. Ensure 44x44 touch targets and sufficient color contrast (WCAG AA: 4.5:1).
Full Answer
WCAG 2.1 AA compliance is legally required in many jurisdictions. Flutter Web in HTML renderer generates semantic DOM; CanvasKit requires explicit Semantics widgets for accessibility.
Key Practices
- ▸Semantics widget: add label, hint, button, onTap for custom interactive elements
- ▸ExcludeSemantics: wrap decorative elements to hide from accessibility tree
- ▸MergeSemantics: combine child semantics into one announcement
- ▸Minimum 44x44 touch targets for all interactive elements
- ▸Color contrast: 4.5:1 for text, 3:1 for large text and UI components
🎯
Press S in flutter run to toggle the semantics overlay — shows the accessibility tree without needing a real screen reader.
Code Examples
dartSemantics for accessible custom widgets
Output
// Screen reader: 'Mark question as learned, button' // Decorative icon: silent // Status update: announced automatically // Group: one announcement instead of two
Common Mistakes
- ✗Custom painted widgets with no Semantics — invisible to screen readers, fails WCAG
- ✗Touch targets smaller than 44x44px — fails WCAG 2.5.5 (Target Size)
Interview Tip
💡
WCAG 2.1 AA is legally required in the EU (EN 301 549) and US (Section 508). Show you know Semantics widget, liveRegion for dynamic content, and the semantics debug overlay.
#accessibility#a11y#WCAG#semantics#screen-reader