2d-inc / Flare-Flutter

Load and get full control of your Rive files in a Flutter project using this library.
https://rive.app/
MIT License
2.55k stars 470 forks source link

No accessibility support (screen readers) #266

Open nilsreichardt opened 4 years ago

nilsreichardt commented 4 years ago

Description

At the moment flares can't be detected by screen readers...

Demo

You can see that Talkback (Android screen reader) can't focus the flare widget.

FlareScreenReader

Steps to reproduce

Code to reproduce ``` import 'package:flare_flutter/flare_actor.dart'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Demo', home: Scaffold( appBar: AppBar( title: Text("Flare"), ), body: Center( child: Container( height: 200, child: FlareActor( "assets/privacy.flr", // You can use any flare file animation: "Lock", fit: BoxFit.fitHeight, ), ), ), ), ); } } ```
  1. Copy code to reproduce
  2. Run app
  3. Enable a screen reader (like Talkback on Android)
  4. Try to focus the flare widget with a screen reader --> impossible

How it should be

The Flare package should use Semantics. Every flare has a default value like 'unknown animation'. With the parameter semanticLabel developers can set a description of the flare animation.

You can see this behavior for images:

child: Image.asset(
  'assets/logo.png',
  semanticLabel: 'Company logo',
),

Docs (image):

/// A Semantic description of the image.
///
/// Used to provide a description of the image to TalkBack on Android, and
/// VoiceOver on iOS.
final String semanticLabel;