Open nilsreichardt opened 1 year ago
I'm also unable to use the Ubunto (22.04) screen reader. It's working on the Firefox website (as shown in video) but on the Flutter gallery website.
Same for iOS on Flutter web. Twitter is working, but https://gallery.flutter.dev not.
Same for Android on Flutter web. Twitter is working, but https://gallery.flutter.dev/ not.
(Somehow the audio is not working. However, you can see in the Video that on the Flutter Gallery page there is never a green bordered box which indicates that this is the current focus of the screen reader).
Hi @nilsreichardt, thanks for filing the issue. I checked this issue with gallery sample code, I see differences between the two platforms, the behavior is also different from widgets such as Buttons, TextFields:
With macOS Flutter app: The VoiceOver doesn't work when hovering/clicking on Buttons, but works with pressing Tab
key on TextFields.
Also, instead of pressing Tab
key, please try using this key combination: Control + Option + Command + Up/Down
.
With Web Flutter app (desktop): The VoiceOver works when using mouse (hovering) on Buttons and TextFields, but using Tab
key doesn't work on Buttons.
Can you try again with mouse hovering/tab key/key combination to see if it's the same behavior? Maybe the issue is only caused by implementation in the Gallery source code or individual widgets.
Thanks for taking a look.
However, you can see in your recording (especially in web recording) that the screen reader does not read the content of the website (only when hovering with the mouse).
It should also read the things when using the TAB keys, like shown in this video by the Flutter team: https://youtu.be/A6Sx0lBP8PI. the author of the video says at the beginning that he uses the TAB key to navigate. However, using the TAB key does not result into the same behavior as shown in the video.
Also when we are putting the YouTube aside: How should a blind user navigate through the the Gallery app? The Gallery has accessibility support in the iOS and Android app. But when using the web, you can see the same behavior.
What you can also do: Compare this with non Flutter website / macOS apps. You will see that the TAB key is triggering the screen reader and a blind user would be able to use the app.
@nilsreichardt Thanks for more information. Labeling this issue for further insights from the team.
Our expectation is that when VoiceOver is on the user would use the VoiceOver shortcuts to navigate the UI. By default there the semantics tree is disabled, but the user has the option to click on an accessibility placeholder to enable it. You can also enable it programmatically like this:
void main() {
runApp(MyApp());
RendererBinding.instance.setSemanticsEnabled(true);
}
However, it seems in some video recordings you are having trouble finding the placeholder. We should investigate, so I'll keep this issue open.
Thanks, @yjbanov. For everyone coming to this ticket in 2024 or later, you need to use the following code snippet:
void main() {
runApp(MyApp());
if(kIsWeb) {
// Required on web/desktop to automatically enable accessibility features.
WidgetsFlutterBinding.ensureInitialized().ensureSemantics();
}
}
The RendererBinding
class doesn't exist anymore.
Description
Hey! 👋 I'm trying to get the macOS VoiceOver working for Flutter websites and Flutter macOS apps. However, it's not working. It's working for all other macOS apps or all other websites except that one created with Flutter.
https://user-images.githubusercontent.com/24459435/201398484-4aa5fc1b-02a8-4e08-86b5-482a783b035b.mp4
I tested the https://gallery.flutter.dev for web and pulled the https://github.com/flutter/gallery (11.11.2022) repository to build & test the macOS (with
v3.5.0-10.0.pre.121
).Steps to reproduce
What I would expect
I would expect that VoiceOver is working like it shown in this video by Flutter: https://www.youtube.com/watch?v=A6Sx0lBP8PI
Specs
macOS: 12.6 MacBook Pro M1