# Accessibility testing

> Information on Flutter's accessibility testing.



## Accessibility regulations

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](/ui/accessibility).


[Web Content Accessibility Guidelines (WCAG) 2]: https://www.w3.org/WAI/standards-guidelines/wcag/
[EN 301 549]: https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf
[Voluntary Product Accessibility Template (VPAT)]: https://www.itic.org/policy/accessibility/vpat

## Inspecting accessibility support

We recommend using automated accessibility scanners to test the following:

* For Android:
    1. Install the [Accessibility Scanner][] for Android
    1. Enable the Accessibility Scanner from
       **Android Settings > Accessibility >
       Accessibility Scanner > On**.
    1. 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.
    1. Select a Simulator as the target, and click the **Run** button.
    1. In Xcode, select
       **Xcode > Open Developer Tools > Accessibility Inspector**.
    1. In the Accessibility Inspector,
       select **Inspection > Enable Point to Inspect**,
       and then select the various user interface elements in your running
       Flutter app to inspect their accessibility attributes.
    1. 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 an "Accessibility" sub-tab
       that can be used to inspect the data exported to semantics tree.


## Testing accessibility on mobile

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`:

<?code-excerpt "accessibility/test/a11y_test.dart"?>
```dart title="test/a11y_test.dart"
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`][create-new-app].
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.

[Accessibility Guideline API]: https://api.flutter.dev/flutter/flutter_test/AccessibilityGuideline-class.html
[create-new-app]: /reference/create-new-app
[widget tests]: /testing/overview#widget-tests

## Testing accessibility on the web

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:

```console
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][].

[Accessibility Scanner]: https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en
[file a bug report]: https://goo.gle/flutter_web_issue