[Windows] Accessibility of dialogs

[chrisnorman7]

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.

[maheshj01]

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)

[√] Flutter (Channel stable, 2.10.4, on Microsoft Windows [Version 10.0.19044.1586],
    locale en-US)
    • Flutter version 2.10.4 at C:\flutter_sdk\stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c860cba910 (5 days ago), 2022-03-25 00:23:12 -0500
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Users\mahesh\AppData\Local\Android\sdk
    • Platform android-31, build-tools 31.0.0
    • 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\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.4)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.11.31727.386
    • Windows 10 SDK version 10.0.19041.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 (version 1.64.2)
    • VS Code at C:\Users\mahesh\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version
      10.0.19044.1586]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 99.0.4844.82      
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 99.0.1150.30     

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[√] Flutter (Channel master, 2.13.0-0.0.pre.311, on Microsoft Windows [Version
    10.0.19044.1586], locale en-US)
    • Flutter version 2.13.0-0.0.pre.311 at C:\flutter_sdk\master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3a4bf257bc (5 days ago), 2022-03-30 07:40:51 +0200
    • Engine revision 0e7773bcca
    • Dart version 2.17.0 (build 2.17.0-249.0.dev)
    • DevTools version 2.11.4

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Users\mahesh\AppData\Local\Android\sdk
    • Platform android-31, build-tools 31.0.0
    • 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\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.4)      
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.11.31727.386
    • Windows 10 SDK version 10.0.19041.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 (version 1.64.2)
    • VS Code at C:\Users\mahesh\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.36.0

[√] Connected device (4 available)
    • Windows (desktop)       • windows • windows-x64     • Microsoft Windows        
      [Version 10.0.19044.1586]
    • Windows (UWP) (desktop) • winuwp  • windows-uwp-x64 • 
    • Chrome (web)            • chrome  • web-javascript  • Google Chrome
      100.0.4896.60
    • Edge (web)              • edge    • web-javascript  • Microsoft Edge
      99.0.1150.30

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[chrisnorman7]

@maheshmnj Thank you for checking this out.

For an example of a "normal" error box, enable NVDA (or similar screen reader) and type fff into your Run box (windows + r). You will hear both the title and the content of the dialog.

[chrisnorman7]

If we autofocus the TextButton, things improve a little. Now I hear "Alert grouping", followed by the button designation.

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(
            autofocus: true,
            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.
    );
  }
}

[maheshj01]

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)

[√] Flutter (Channel stable, 2.10.4, on Microsoft Windows [Version 10.0.19044.1586],
    locale en-US)
    • Flutter version 2.10.4 at C:\flutter_sdk\stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c860cba910 (5 days ago), 2022-03-25 00:23:12 -0500
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Users\mahesh\AppData\Local\Android\sdk
    • Platform android-31, build-tools 31.0.0
    • 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\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.4)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.11.31727.386
    • Windows 10 SDK version 10.0.19041.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 (version 1.64.2)
    • VS Code at C:\Users\mahesh\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version
      10.0.19044.1586]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 99.0.4844.82      
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 99.0.1150.30     

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[√] Flutter (Channel master, 2.13.0-0.0.pre.311, on Microsoft Windows [Version
    10.0.19044.1586], locale en-US)
    • Flutter version 2.13.0-0.0.pre.311 at C:\flutter_sdk\master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3a4bf257bc (5 days ago), 2022-03-30 07:40:51 +0200
    • Engine revision 0e7773bcca
    • Dart version 2.17.0 (build 2.17.0-249.0.dev)
    • DevTools version 2.11.4

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Users\mahesh\AppData\Local\Android\sdk
    • Platform android-31, build-tools 31.0.0
    • 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\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.4)      
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.11.31727.386
    • Windows 10 SDK version 10.0.19041.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 (version 1.64.2)
    • VS Code at C:\Users\mahesh\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.36.0

[√] Connected device (4 available)
    • Windows (desktop)       • windows • windows-x64     • Microsoft Windows        
      [Version 10.0.19044.1586]
    • Windows (UWP) (desktop) • winuwp  • windows-uwp-x64 • 
    • Chrome (web)            • chrome  • web-javascript  • Google Chrome
      100.0.4896.60
    • Edge (web)              • edge    • web-javascript  • Microsoft Edge
      99.0.1150.30

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!```
</details>