| [ Web Proxy ] |
| Viewing: https://docs.flutter.dev/ui/accessibility/accessibility-testing | [Back] [Original] |
docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic.
Information on Flutter's accessibility testing.
To ensure your app is accessible, check it against public standards like the Web Content Accessibility Guidelines (WCAG) 2, the EN 301 549, and use resources like the Voluntary Product Accessibility Template (VPAT) to self-assess your product. For more details on these regulations, check out the main accessibility page.
We recommend using automated accessibility scanners to test the following:
For Android:
For iOS:
iOS folder of your Flutter app in Xcode.For web:
Test your app using Flutter's Accessibility Guideline API. This API checks if your app's UI meets Flutter's accessibility recommendations. These cover recommendations for text contrast, target size, and target labels.
The following snippet shows how to use the Guideline API on
a sample widget named AccessibleApp:
import 'package:flutter_test/flutter_test.dart';
import 'package:your_accessible_app/main.dart';
void main() {
testWidgets('Follows a11y guidelines', (tester) async {
final SemanticsHandle handle = tester.ensureSemantics();
await tester.pumpWidget(const AccessibleApp());
// Checks that tappable nodes have a minimum size of 48 by 48 pixels
// for Android.
await expectLater(tester, meetsGuideline(androidTapTargetGuideline));
// Checks that tappable nodes have a minimum size of 44 by 44 pixels
// for iOS.
await expectLater(tester, meetsGuideline(iOSTapTargetGuideline));
// Checks that touch targets with a tap or long press action are labeled.
await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));
// Checks whether semantic nodes meet the minimum text contrast levels.
// The recommended text contrast is 3:1 for larger text
// (18 point and above regular).
await expectLater(tester, meetsGuideline(textContrastGuideline));
handle.dispose();
});
}
To try these tests out, run them on
a new app created with flutter create.
Each button on that app's main screen serves as a tappable target
with text rendered in an 18-point font.
You can add Guideline API tests alongside other widget tests,
or in a separate file, such as test/a11y_test.dart in this example.
You can debug accessibility by visualizing the semantic nodes created for your web app using the following command line flag in profile and release modes:
flutter run -d chrome --profile --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true
With the flag activated, the semantic nodes appear on top of the widgets; you can verify that the semantic elements are placed where they should be. If the semantic nodes are incorrectly placed, please file a bug report.
Unless stated otherwise, the documentation on this site reflects Flutter 3.44.7. Page last updated on 2026-05-05. View source or report an issue.
| Web Proxy Viewer | New URL | Original Page |