Skip to main content

prefer-semantics-header

effort: 2m
has IDE fix
has auto-fix
pro+

Warns when the AppBar title is not wrapped into Semantics widget.

Screen reader users frequently navigate mobile applications by heading landmarks (swiping up/down with rotor/heading gesture).

In Flutter, standard Text widgets—even when styled as large titles (Theme.of(context).textTheme.headlineLarge)—are not marked as headings in the Accessibility Tree unless explicitly wrapped in Semantics(header: true).

Without header metadata, users cannot skip past navigation elements to jump directly to page content.

Example

❌ Bad:

// LINT: Prefer adding header semantics to top-level screen titles.
// Try wrapping this widget with 'Semantics'.
AppBar(title: const Text('Account Settings'));

// LINT: Prefer adding header semantics to top-level screen titles.
// Try wrapping this widget with 'Semantics'.
AppBar(title: nullable ?? Text('Account Settings'));

// LINT: Prefer adding header semantics to top-level screen titles.
// Try wrapping this widget with 'Semantics'.
AppBar(title: title);

✅ Good:

AppBar(title: Semantics(header: true, child: const Text('Account Settings')));
AppBar(title: Semantics(header: true, child: title));

Additional Resources