flutter-accessibility-and-adaptive-design

Goal

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.

Decision Logic

When implementing UI components, follow this decision tree to determine the required accessibility and adaptive design implementations:

1. Is the app targeting Flutter Web?
   • Yes: Ensure SemanticsBinding.instance.ensureSemantics(); is called at startup. Explicitly map custom widgets to SemanticsRole to generate correct ARIA tags.
   • No: Proceed to standard mobile/desktop semantics.
2. Is the widget interactive?
   • Yes: Wrap in Semantics with button: true or appropriate role. Ensure tap target is $\ge$ 48x48 logical pixels.
   • No: Ensure text contrast meets WCAG standards (4.5:1 for small text, 3.0:1 for large text).
3. Does the layout need to change based on screen size?
   • Yes: Use LayoutBuilder or MediaQuery.sizeOf(context). Do NOT use MediaQuery.orientation or hardware type checks (e.g., isTablet).
   • No: Use standard flexible widgets (Expanded, Flexible) to fill available space.
4. Does the app support desktop/web input?
   • Yes: Implement FocusableActionDetector, Shortcuts, and MouseRegion for hover states and keyboard traversal.