![Rebel App Studio logo](https://private-user-images.githubusercontent.com/20989940/320500575-922ccd4c-858d-4d2b-8c3e-2a8adf5af4ba.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5OTA0NTEsIm5iZiI6MTcyMzk5MDE1MSwicGF0aCI6Ii8yMDk4OTk0MC8zMjA1MDA1NzUtOTIyY2NkNGMtODU4ZC00ZDJiLThjM2UtMmE4YWRmNWFmNGJhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE4VDE0MDkxMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTRhNTEzYTdjZmZmZTI5NjAwYTFjYTk5MzFlOGEzOTM2MDk4ZjhlMTBhMzMwYWM0MzU4OWZjZDQ5ODFiN2QyZjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.nNU17L6kPfW8Kgej41DwVvxc-LkSMfkBf43wWgUwCjQ)
Checkers and tools to ensure your app is accessible to all.
Creating an accessible app is incredibly important. But too often it's forgotten about, or left to later. This package ensures your app is accessible from day one, by checking your interface as you build it.
To show the issue tooltip, hover over the widget or long-press it.
Tap wrench icon to open testing tools panel:
![A screenshot of testing tools panel with a list of toggles that developers can use to check how their app works with various settings: text scale, localization, text direction, color mode simulation](https://private-user-images.githubusercontent.com/20989940/320498994-f21aef83-2ec3-4ab9-8ea7-bbfe17595ea6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5OTA0NTEsIm5iZiI6MTcyMzk5MDE1MSwicGF0aCI6Ii8yMDk4OTk0MC8zMjA0OTg5OTQtZjIxYWVmODMtMmVjMy00YWI5LThlYTctYmJmZTE3NTk1ZWE2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE4VDE0MDkxMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNkNTkyZmYxMDc2ZTc3MjJlYmVmMWFlNjM0Yjg3YzU2YTc5OTExYmQ1NGE1YmU2Yjc3ODljN2NiZmE0YzkzZDImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.E0G2qvkB8bdQOsuu987mVQTdIJWw2pAWqvgXVjjHXPo)
From Rebel App Studio
Add AccessibilityTools
to your app's builder
property:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// *** Add the line below ***
builder: (context, child) => AccessibilityTools(child: child),
home: HomePage(),
);
}
}
The tools only run in debug mode, and are compiled out of release builds.
Ensures buttons (and other tappable widgets) have an associated semantic label.
For example, this icon button is missing a label:
IconButton(
onPressed: () => login(),
icon: Icon(Icons.person),
)
Adding a semantic label would fix this: Icon(Icons.person, semanticLabel: 'Login')
.
Makes sure all tappable widgets are large enough to easily tap. Defaults to the Material Design minimum of 48x48 on mobile devices, and 44x44 on desktop devices.
Experimental: ensures that no flex widgets, such as Column
and Row
, overflow when a user is using larger font sizes. This checker is experimental, and disabled by default, and can be enabled via AccessibilityTools(checkFontOverflows: true)
.
Makes sure text fields (TextField
, TextFormField
, Autocomplete
etc) and inputs (Checkbox
, Radio
, Switch
etc) have semantic labels.
Makes sure images have semantic labels.
- Text scale. Changes text scale factor, range is 0.1 to 10.0. Does nothing if app ignores text scaling
- Localization. Overrides current selected locale of a
WidgetApp
- Text direction. Forces text to be displayed according to the selected values (right-to-left or left-to-right)
- Platform. Changes current
TargetPlatform
. This may change scrolling behavior, back button icon, gesture navigation etc - Density. Changes app's visual density. This may change padding of some widgets (e.g.
ListTile
) - Bold text. Simulates operating system's request to make text bolder
- Color mode simulation. Simulates a color mode. Supported modes: protanopia, deuteranopia, tritanopia, inverted colors, grayscale
- Screen reader mode. Enables semantics debugger to simulate how app is seen by screen readers
Checkers are enabled or disabled with properties on the AccessibilityTools
widget:
AccessibilityTools(
// Set to null to disable tap area checking
minimumTapAreas: MinimumTapAreas.material,
// Check for semantic labels
checkSemanticLabels: false,
// Check for flex overflows
checkFontOverflows: true,
// Check for image labels
checkImageLabels: true,
// Set how much info about issues is printed
logLevel: LogLevel.verbose,
// Set where the buttons are placed
buttonsAlignment: ButtonsAlignment.bottomRight,
// Enable or disable draging the buttons around
enableButtonsDrag: false,
child: child,
)