accessibility 1.0.0

An all-in-one solution to enhance your project with accessibility features.

Flutter Accessibility Package

An all-in-one solution to enhance your project with accessibility features.

This package implements accessibility features according to the WCAG 2.1 AA guidelines, focusing on:

• 1.4.3 Contrast (Minimum)
• 1.4.4 Resize Text
• 1.4.12 Text Spacing

Check out the Live web demo.

Features

• Text Settings

  • Text scale factor
  • Line height
  • Letter spacing
  • Word spacing
  • Font weight
  • Text alignment

• Color Settings

  • Text color customization
  • Background color customization
  • Color profiles for different user needs

• Theme Settings

  • Light/dark mode
  • High contrast themes
  • Complex effect mode toggle
  • Accessibility-enhanced theme presets

• Persistence Support

  • Settings are saved between sessions
  • Easy restoration of default settings

• Internationalization Support

  • Multiple language support
  • Localized accessibility settings

Usage

Wrap your app with AccessibilityInitializer and pass down your AppThemes instance:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final sharedPreferencesWithCache = await createSharedPreferencesWithCache();
  final sharedPreferencesService = SharedPreferencesServiceWithCache(
    sharedPreferencesWithCache,
  ); // or else if you use legacy SharedPreferences
  // const sharedPreferencesService = SharedPreferencesServiceLegacy();
  final accessibilitySettings =
      await sharedPreferencesService.getLocalStorageAccessibilitySettings();

  final appThemes = AppThemes.fromColorSchemes(
    lightColorScheme:               // your light color scheme
    darkColorScheme:                // your dark color scheme
    highContrastLightColorScheme:   // your high contrast light color scheme
    highContrastDarkColorScheme:    // your high contrast dark color scheme
    textTheme:                      // your text theme
  ); // or use AppThemes() default constructor for finer control

  runApp(
    AccessibilityInitializer(
      sharedPreferencesService: sharedPreferencesService,
      accessibilitySettingsCollection: accessibilitySettings,
      child: MyApp(appThemes: appThemes),
    ),
  );
}

Replace your MaterialApp or MaterialApp.router with AccessibleMaterialApp or AccessibleMaterialApp.router:

  @override
  Widget build(BuildContext context) => AccessibleMaterialApp.router(
    title: 'Accessibility Example',
    routerConfig: _router,
    // [appThemes] is the [AppThemes] class provided in the main function
    theme: appThemes.lightTheme,
    highContrastTheme: appThemes.lightHighContrastTheme,
    darkTheme: appThemes.darkTheme,
    highContrastDarkTheme: appThemes.darkHighContrastTheme,
    // ... other MaterialApp properties
  );

Adding accessibility features

You can add a complete accessibility settings panel wherever you like using the AccessibilitySettings Widget:

const AccessibilitySettings()

[Accessibility settings section - top view]

[Accessibility settings section - middle view]

[Accessibility settings section - bottom view]

If you have a subtree with complex animations, consider adding a Widget that reacts to the effects allowed setting, to manage whether or not use the animations:

const EffectsSettingListenableBuilder(
  builder: (context, effectsEnabled, child) => // your widget based on the effectsEnabled value
)

By default all pages transitions of the application will listen to the current effects setting, removing the transition animations if the effects are disabled.

Custom behavior

This section is intended only for users who want to have more control over the package.

App initialization

For more granular control of the app initialization you can use ThemeSettingsBuilder instead of the premade AccessibleMaterialApp.

  @override
  Widget build(BuildContext context) => ThemeSettingsBuilder(
    builder: (
      context,
      themeMode,
      colorSettings,
      textSettings, {
      required effectsEnabled,
    }) {
      // your custom logic...
      return MaterialApp(),
    },
  );

Custom UI of the accessibility settings

To add your custom UI of the accessibility settings use only the following providers:

• AccessibilitySettingsInherited to access and modify the current state of the accessibility settings
• SharedPreferencesInherited to access and modify the current state of local storage settings

You can add a button to restore initial settings using:

const RestoreSettingsButton()

Customizing the accessibility settings

The AccessibilitySettings Widget uses the recommended configuration by default. You can customise it by passing a custom AccessibilitySettingsConfiguration, but be aware that all Text Widgets of your application will NOT be affected by the TextAlign setting. If you want to use the TextAlign settings you should use the AccessibleText Widget instead.

// Instead of const Text('Hello World')
const AccessibleText('Hello World')

Example

Check the /example folder for a complete implementation example showing how to integrate accessibility features into your Flutter application.