メニュー
Configure your Flutter app to support assistive technologies like Screen Readers
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/xuelongqy/flutter_easy_refresh --skill flutter-accessibilityコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | flutter-accessibility |
| description | Configure your Flutter app to support assistive technologies like Screen Readers |
| metadata | {"model":"models/gemini-3.1-pro-preview","last_modified":"Tue, 03 Mar 2026 19:03:49 GMT"} |
Implements, audits, and enforces accessibility (a11y) and adaptive design standards in Flutter applications. Ensures compliance with WCAG 2 and EN 301 549 by applying proper semantic roles, contrast ratios, tap target sizes, and assistive technology integrations. Constructs adaptive layouts that respond to available screen space and input modalities (touch, mouse, keyboard) without relying on hardware-specific checks or locked orientations.
When implementing UI components, follow this decision tree to determine the required accessibility and adaptive design implementations:
SemanticsBinding.instance.ensureSemantics(); is called at startup. Explicitly map custom widgets to SemanticsRole to generate correct ARIA tags.Semantics with button: true or appropriate role. Ensure tap target is $\ge$ 48x48 logical pixels.LayoutBuilder or MediaQuery.sizeOf(context). Do NOT use MediaQuery.orientation or hardware type checks (e.g., isTablet).Expanded, Flexible) to fill available space.FocusableActionDetector, Shortcuts, and MouseRegion for hover states and keyboard traversal.Initialize Web Accessibility (If Applicable) For web targets, accessibility is disabled by default for performance. Force enable it at the entry point.
import 'package:flutter/foundation.dart';
import 'package:flutter/semantics.dart';
void main() {
runApp(const MyApp());
if (kIsWeb) {
SemanticsBinding.instance.ensureSemantics();
}
}
Apply Semantic Annotations
Use Semantics, MergeSemantics, and ExcludeSemantics to build a clean accessibility tree. For custom web components, explicitly define the SemanticsRole.
Semantics(
role: SemanticsRole.button,
label: 'Submit Form',
hint: 'Press to send your application',
button: true,
child: GestureDetector(
onTap: _submit,
child: const CustomButtonUI(),
),
)
Enforce Tap Target and Contrast Standards Ensure all interactive elements meet the 48x48 dp minimum (Android) or 44x44 pt minimum (iOS/Web).
// Example of enforcing minimum tap target size
ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 48.0,
minHeight: 48.0,
),
child: IconButton(
icon: const Icon(Icons.info),
onPressed: () {},
tooltip: 'Information', // Tooltip.message follows Tooltip.child in semantics tree
),
)
Implement Adaptive Layouts
Use LayoutBuilder to respond to available space rather than device type.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) {
return const WideDesktopLayout();
} else {
return const NarrowMobileLayout();
}
},
)
Implement Keyboard and Mouse Support
Use FocusableActionDetector for custom controls to handle focus, hover, and keyboard shortcuts simultaneously.
FocusableActionDetector(
onFocusChange: (hasFocus) => setState(() => _hasFocus = hasFocus),
onShowHoverHighlight: (hasHover) => setState(() => _hasHover = hasHover),
actions: <Type, Action<Intent>>{
ActivateIntent: CallbackAction<Intent>(
onInvoke: (intent) {
_performAction();
return null;
},
),
},
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: CustomWidget(isHovered: _hasHover, isFocused: _hasFocus),
),
)
Manage Focus Traversal
Group related widgets using FocusTraversalGroup to ensure logical tab order for keyboard users.
FocusTraversalGroup(
policy: OrderedTraversalPolicy(),
child: Column(
children: [
FocusTraversalOrder(
order: const NumericFocusOrder(1.0),
child: TextField(),
),
FocusTraversalOrder(
order: const NumericFocusOrder(2.0),
child: ElevatedButton(onPressed: () {}, child: Text('Submit')),
),
],
),
)
Validate Accessibility via Automated Tests
STOP AND ASK THE USER: "Would you like me to generate widget tests to validate accessibility guidelines (contrast, tap targets) for your UI?"
If yes, implement the AccessibilityGuideline API in the test suite:
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Validates a11y guidelines', (WidgetTester tester) async {
final SemanticsHandle handle = tester.ensureSemantics();
await tester.pumpWidget(const MyApp());
await expectLater(tester, meetsGuideline(androidTapTargetGuideline));
await expectLater(tester, meetsGuideline(iOSTapTargetGuideline));
await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));
await expectLater(tester, meetsGuideline(textContrastGuideline));
handle.dispose();
});
}
MediaQuery.sizeOf or LayoutBuilder.MediaQuery.orientation near the top of the widget tree to switch layouts. Rely on available width/height breakpoints.Semantics labels for custom interactive widgets or images that convey meaning.PageStorageKey on scrollable lists that do not change layout during orientation shifts to preserve scroll state.Tooltip.message is visited immediately after Tooltip.child in the semantics tree. Update tests accordingly.