A Flutter app that demonstrates every WCAG 2.2 Level A success criterion relevant to mobile apps — as interactive bad vs. good widget pairs with code snippets and explanations.
Each WCAG rule is shown as a live, side-by-side demo: the inaccessible pattern on the left and the accessible fix on the right. Tap any rule to see the widgets in action, read the code diff, and understand why the accessible version passes the criterion.
Perceivable → Operable → Understandable → Robust
1.1.1 2.1.1 3.1.1 4.1.2
1.3.x 2.1.2 3.2.x
1.4.1 2.1.4 3.3.x
2.2.x
2.3.1
2.4.x
2.5.x
flutter pub get
flutter runflutter test148 tests covering demo scenario structure, data wiring, screens, and widgets.
lib/
data/ # WCAG data model + registry (wcag_data.dart)
demos/ # One file per rule — bad/good widget pairs + code + explanation
screens/ # Dashboard → Principle → Section → Rule Detail
widgets/ # Shared UI components
test/
data/ # Registry structure tests
demos/ # Per-rule demo list tests
screens/ # Navigation and rendering tests
widgets/ # Widget unit tests
- Create
lib/demos/{rule_name}_demos.dartwith aList<DemoScenario>export. - Wire it into
lib/data/wcag_data.dart— import + add to the relevantSection. - Add a test file at
test/demos/{rule_name}_demos_test.dart.