Accessibility

Accessible apps can be used by more people. This includes users with visual, motor, cognitive or temporary limitations. Accessibility is not something you add at the end; it should be part of every UI decision.

Basic checklist

• Text has enough contrast with the background.
• Buttons and tappable elements are at least 48 by 48 logical pixels.
• The app works with large system font sizes.
• Controls have clear labels.
• Errors explain what went wrong and how to fix it.
• Important actions can be undone or confirmed.
• The app can be tested with TalkBack on Android and VoiceOver on iOS.

Use standard widgets

Flutter's standard Material widgets already include a lot of accessibility information. Prefer widgets such as ElevatedButton, IconButton, TextField, Checkbox, Switch, NavigationBar and ListTile over custom gesture areas.

If you build a custom tappable widget, make sure it has a clear semantic label.

Semantics(
  button: true,
  label: "Delete user",
  child: GestureDetector(
    onTap: deleteUser,
    child: const Icon(Icons.delete),
  ),
)

Icon buttons need tooltips

An icon can be obvious to you and unclear to someone else. Add tooltips.

IconButton(
  tooltip: "Log out",
  onPressed: signOut,
  icon: const Icon(Icons.logout),
)

Text scaling

Users can increase the system font size. Your layout should keep working.

Avoid placing important text inside widgets with fixed heights. Prefer flexible layouts:

Row(
  children: [
    const Icon(Icons.person),
    const SizedBox(width: 8),
    Expanded(
      child: Text(
        user.email,
        overflow: TextOverflow.ellipsis,
      ),
    ),
  ],
)

Color is not enough

Do not communicate state with color alone.

Bad:

• red means wrong
• green means correct

Better:

• red color
• error icon
• clear text message

const Text(
  "Password must contain at least 6 characters",
  style: TextStyle(color: Colors.red),
)

Testing accessibility

Test your app with:

• Android Accessibility Scanner
• TalkBack on Android
• VoiceOver on iOS
• large font settings
• high contrast or grayscale mode

Exercise

Review the login page:

• Add tooltip values to icon buttons.
• Check if every error message is understandable.
• Test the page with a large font size.
• Make sure the submit button is still easy to tap.