Repository navigation
[Windows] Accessibility of dialogs #101289
Description
Hi,
When using the pushDialog function with an instance of AlertDialog (and probably other Dialog instances too), the accessibility leaves a lot to be desired.
Code
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter(final BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
setState(() {
_counter++;
});
},
child: const Text('OK'),
)
],
content: Text('Counter: $_counter.'),
));
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => _incrementCounter(context),
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}Under Windows, using NVDA, when I press the button nothing is even spoken until I use the tab key. Same when running with Chrome, also using NVDA.
Flutter Doctor
[] Flutter (Channel master, 2.13.0-0.0.pre.366, on Microsoft Windows [Version 10.0.22000.556], locale en-GB)
ÔÇó Flutter version 2.13.0-0.0.pre.366 at C:\Users\chris\flutter
ÔÇó Upstream repository https://github.com/flutter/flutter.git
ÔÇó Framework revision 0b97874895 (2 days ago), 2022-04-01 21:20:01 -0400
ÔÇó Engine revision 801d8c530f
ÔÇó Dart version 2.17.0 (build 2.17.0-265.0.dev)
ÔÇó DevTools version 2.12.1
[] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc2)
ÔÇó Android SDK at C:\Users\chris\AppData\Local\Android\sdk
ÔÇó Platform android-31, build-tools 31.0.0-rc2
ÔÇó Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
ÔÇó Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
ÔÇó All Android licenses accepted.
[] Chrome - develop for the web
ÔÇó Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
[] Visual Studio - develop for Windows (Visual Studio Enterprise 2022 17.1.0)
ÔÇó Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Enterprise
ÔÇó Visual Studio Enterprise 2022 version 17.1.32210.238
ÔÇó Windows 10 SDK version 10.0.22000.0
[] Android Studio (version 2020.3)
ÔÇó Android Studio at C:\Program Files\Android\Android Studio
ÔÇó Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
ÔÇó Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
ÔÇó Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
[] VS Code, 64-bit edition (version 1.66.0)
ÔÇó VS Code at C:\Program Files\Microsoft VS Code
ÔÇó Flutter extension version 3.27.0
[] Connected device (4 available)
ÔÇó Windows (desktop) ÔÇó windows ÔÇó windows-x64 ÔÇó Microsoft Windows [Version 10.0.22000.556]
ÔÇó Windows (UWP) (desktop) ÔÇó winuwp ÔÇó windows-uwp-x64 ÔÇó
ÔÇó Chrome (web) ÔÇó chrome ÔÇó web-javascript ÔÇó Google Chrome 99.0.4844.84
ÔÇó Edge (web) ÔÇó edge ÔÇó web-javascript ÔÇó Microsoft Edge 98.0.1108.56
[] HTTP Host Availability
ÔÇó All required HTTP hosts are available
ÔÇó No issues found!Thanks in advance.
Activity
maheshj01 commentedon Apr 4, 2022
Hi @chrisnorman7, thanks for filing the issue. When running on windows Desktop I see that widgets are being read when they are hovered with the pointer. Could you please share what is the expected behavior?
Note to unmute the video for audio visual output
Windows Desktop
crash_repro.2022-04-04.14-02-04_Trim.mp4
While on the web nothing is read neither on hover nor on click
Web
Flutter.Demo.-.Google.Chrome.2022-04-04.14-07-00_Trim.mp4
flutter doctor -v (windows)
[-]Accessibility of dialogs[/-][+][Windows] Accessibility of dialogs[/+]chrisnorman7 commentedon Apr 4, 2022
@maheshmnj Thank you for checking this out.
For an example of a "normal" error box, enable NVDA (or similar screen reader) and type
fffinto your Run box (windows + r). You will hear both the title and the content of the dialog.chrisnorman7 commentedon Apr 4, 2022
If we autofocus the
TextButton, things improve a little. Now I hear "Alert grouping", followed by the button designation.Code
maheshj01 commentedon Apr 5, 2022
Thanks for the info @chrisnorman7, I am able to reproduce the issue on stable and the master channel on both Desktop and the web.
The video shows the difference between native dialog vs the flutter dialog when screen readers are enabled (NVDA screen reader in this case)
Note to unmute the video for audiovisual output
2022-04-05.04-24-16_Trim.mp4
The screen readers read the native dialog content as soon as they show up on the screen, while the flutter dialog content isn't read unless they are hovered with a pointer.
flutter doctor -v (windows)
3 remaining items
chrisnorman7 commentedon Apr 5, 2022
Thanks for confirming.
As a semi aside, it sounds like you're using a mouse for navigation. Screen reader users tend to only use the keyboard. As you move the mouse, the screen reader may stop talking, and that'll skew your results.
Elleo commentedon Oct 23, 2023
I've figured out a work-around for this (but obviously it would be best to have this fixed by default). The AlertDialog can be wrapped in a Semantics widget with the Semantics label also containing the text of the dialog. Then by also autofocusing a button within the dialog the Semantics label gets read immediately when the dialog pops up. I've documented this with an example here: https://blog.mikeasoft.com/2023/10/23/how-to-make-flutters-alertdialog-screen-reader-friendly/
flutter-triage-bot commentedon Jun 6, 2024
The
triaged-desktoplabel is irrelevant if there is noteam-desktoplabel orfyi-desktoplabel.martin-robert-fink commentedon Sep 15, 2026
Still the case on 3.47.3 (engine 06a2e2a), and this is one concrete cause.
Dialog'ssemanticsRoledefaults toSemanticsRole.dialog(material/dialog.dart), but the desktop bridge never maps it.AccessibilityBridge::SetRoleFromFlutterUpdateinshell/platform/common/accessibility_bridge.ccderives the role only from flags: button, text field, header, image, link, radio button, check box, switch, slider. Anything else falls back tokGroup, orkStaticTextif the node has no children. Nothing producesax::mojom::Role::kDialog, so on Windows a dialog is a plain grouping and NVDA has no dialog to announce when focus moves into it.We confirmed this with NVDA 2026.1: opening a Material
Dialogwith nothing autofocused produced no announcement until Tab was pressed.App-side, we now autofocus a control inside the dialog and put a labelled
Semantics(container: true)around the content. With that, NVDA announces "<title> grouping" on entry. A native dialog role would make that unnecessary.