Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 1 addition & 33 deletions resources/flutter_skills.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -422,36 +422,4 @@
- https://docs.flutter.dev/cookbook/networking/send-data
- https://docs.flutter.dev/cookbook/networking/update-data
- https://docs.flutter.dev/data-and-backend/serialization
- https://docs.flutter.dev/data-and-backend/serialization/json
- name: flutter-accessibility-audit
description: Triggers an accessibility scan through the widget_inspector and
automatically adds Semantics widgets or missing labels to the source code.
instructions: |
1. **Understand Semantics and Accessibility**
* Semantic roles define the purpose of a UI element, helping screen readers and other assistive tools interpret and present your application to users.
* Flutter's standard widgets often provide semantics automatically.
* For custom components or when default semantics are insufficient, you can use the `Semantics` widget to define the role.
* The `Semantics` widget with the `SemanticsRole` enum allows developers to assign specific roles to their widgets.
* When a Flutter web app is rendered, Flutter-specific roles are translated into corresponding ARIA roles in the web page's HTML structure.
* Flutter needs a special layer to expose the UI's meaning and structure to web browsers because it renders its UI on a single canvas.
* For web accessibility, Flutter's web accessibility is not on by default for performance reasons. Users can turn it on by pressing an invisible button with `aria-label="Enable accessibility"`. Alternatively, you can enable accessibility in code by adding `SemanticsBinding.instance.ensureSemantics();` within your `main()` function if `kIsWeb` is true.

2. **Initiate an Accessibility Scan**
* **For Android:** Install the Accessibility Scanner for Android and enable it from Android Settings > Accessibility > Accessibility Scanner > On. Then, navigate to the Accessibility Scanner 'checkbox' icon button to initiate a scan.
* **For iOS:** Open the iOS folder of your Flutter app in Xcode. Select a Simulator as the target and click the Run button. In Xcode, select Xcode > Open Developer Tools > Accessibility Inspector. In the Accessibility Inspector, select Inspection > Enable Point to Inspect, and then select UI elements in your running Flutter app to inspect their accessibility attributes. To get a report of potential issues, select Audit in the toolbar and then Run Audit.
* **For Web:** Open Chrome DevTools (or similar tools in other browsers). Inspect the HTML tree under `semantics host`, which contains the ARIA attributes generated by Flutter. In Chrome, the "Elements" tab has an "Accessibility" sub-tab to inspect data exported to the semantics tree. You can also debug accessibility by visualizing semantic nodes for your web app using the command line flag `flutter run -d chrome --profile --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true` in profile and release modes. With this flag activated, semantic nodes appear on top of widgets, allowing you to verify their placement.
* **Using Flutter's Accessibility Guideline API:** Test your app using Flutter's Accessibility Guideline API, which checks if your app's UI meets Flutter's accessibility recommendations for text contrast, target size, and target labels. You can add Guideline API tests alongside other widget tests or in a separate file, such as `test/a11y_test.dart`.

3. **Identify and Address Accessibility Issues**
* The `Semantics` tree is presented to the system accessibility APIs.
* To obtain a dump of the `Semantics` tree, enable accessibility using a system accessibility tool or the `SemanticsDebugger`, and then use the `debugDumpSemanticsTree()` function.
* You can call `debugDumpSemanticsTree()` from a `GestureDetector`'s `onTap` callback, for example.
* If semantic nodes are incorrectly placed, you should file a bug report.

resources:
- https://docs.flutter.dev/ui/accessibility
- https://docs.flutter.dev/ui/accessibility/accessibility-testing
- https://docs.flutter.dev/ui/accessibility/assistive-technologies
- https://docs.flutter.dev/ui/accessibility/web-accessibility
- https://docs.flutter.dev/ui/accessibility/web-accessibility
- https://docs.flutter.dev/ui/widgets/accessibility
- https://docs.flutter.dev/data-and-backend/serialization/json
147 changes: 0 additions & 147 deletions skills/flutter-accessibility-audit/SKILL.md

This file was deleted.

Loading