Semantics, Screen Readers, and Accessible Widgets

Millions of people rely on screen readers to use mobile apps. On Android the screen reader is TalkBack; on iOS it is VoiceOver. When enabled, the user swipes between elements and the phone speaks a description of each one out loud.

Flutter does not draw native widgets, so the OS cannot inspect your UI directly. Instead, Flutter builds a parallel semantics tree describing each element (its label, role, and state) and hands it to the platform's accessibility services.

• Good news: many built-in widgets (Text, ElevatedButton, Checkbox) already populate this tree automatically.
• Your job: fix the cases where the automatic description is missing, wrong, or confusing.

Every visible widget can contribute a SemanticsNode to a tree that mirrors your widget tree. Each node carries properties such as label, value, hint, and flags like isButton or isChecked.

You rarely build this tree by hand. Instead you annotate widgets using the Semantics widget or the convenience properties exposed by existing widgets (for example Image's semanticLabel).

• The screen reader reads nodes in roughly top-to-bottom, left-to-right order.
• You can merge several widgets into one spoken node, or exclude purely decorative widgets entirely.