Flutter Accessibility — Semantics, Screen Readers, and WCAG Compliance

Accessibility is foundational to user experience. Here's how to use Flutter's Semantics widget to support screen readers, high contrast mode, and WCAG standards.

Semantics Widget Basics

// Add screen reader label to a button Semantics ( label: 'Submit button' , hint: 'Submits the form' , button: true , child: ElevatedButton ( onPressed: _submit , child: const Text ( 'Submit' ), ), )

// Alt text for images Semantics ( label: 'User avatar image' , image: true , child: CircleAvatar ( backgroundImage: NetworkImage ( avatarUrl )), )

// Exclude decorative elements from TalkBack/VoiceOver ExcludeSemantics ( child: Icon ( Icons . star , color: Colors . amber ), )

Enter fullscreen mode

Exit fullscreen mode

Custom Actions (Swipe Gestures)

Semantics ( customSemanticsActions: { CustomSemanticsAction ( label: 'Delete' ) : () = > _deleteItem ( item . id ), CustomSemanticsAction ( label: 'Archive' ) : () = > _archiveItem ( item .…