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:

  1. Install the Accessibility Scanner for Android
  2. Enable the Accessibility Scanner from Android Settings > Accessibility > Accessibility Scanner > On.
  3. Navigate to the Accessibility Scanner 'checkbox' icon button to initiate a scan.

• For iOS:

  1. Open the iOS folder of your Flutter app in Xcode.
  2. Select a Simulator as the target, and click Run button.
  3. In Xcode, select Xcode > Open Developer Tools > Accessibility Inspector.
  4. In the Accessibility Inspector, select Inspection > Enable Point to Inspect, and then select the various user interface elements in running Flutter app to inspect their accessibility attributes.
  5. In the Accessibility Inspector, select Audit in the toolbar, and then select Run Audit to get a report of potential issues.

• For web:

  1. Open Chrome DevTools (or similar tools in other browsers).
  2. Inspect the HTML tree under semantics host, containing the ARIA attributes generated by Flutter.
  3. In Chrome, the "Elements" tab has a "Accessibility" sub-tab that can be used to inspect the data exported to semantics tree

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 the app you create in the Write your first Flutter app codelab. 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.