[a11y] VoiceOver does not announce form validation errors

If a form field fails validation, the error message is visually displayed but is not announced by VoiceOver.

Steps to Reproduce

Turn on VoiceOver.
Execute flutter run -d chrome on the code sample.
Tap "Submit" without entering a username.

Expected results:

The validation error message ("Please enter your username") is announced by VoiceOver.

Actual results:

The validation error message is displayed but is not read.

Workaround:

If the helperText is set to a space, the validation error message will be announced. 🤷🏾

          TextFormField(
            decoration: const InputDecoration(
              helperText: ' ', // Must be set to a space to announce validation errors.
              labelText: 'Username',
            ),
            validator: (String? value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your username';
              }
              return null;
            },
          ),

Code sample

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Auto-enable accessibility for our Blind and Low Vision customers (see
  // https://docs.flutter.dev/development/accessibility-and-localization/accessibility#screen-readers).
  RendererBinding.instance!.setSemanticsEnabled(true);

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  const MyCustomForm({Key? key}) : super(key: key);

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: const InputDecoration(
              labelText: 'Username',
            ),
            validator: (String? value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your username';
              }
              return null;
            },
          ),
          TextButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Submitting...')),
                );
              }
            },
            child: const Text('Submit'),
          ),
        ],
      ),
    );
  }
}

Logs

[✓] Flutter (Channel stable, 2.10.3, on macOS 11.6.2 20G314 darwin-x64, locale en-US)
    • Flutter version 2.10.3 at /Users/vsomayaji/Dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (5 days ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/vsomayaji/Library/Android/sdk
    • Platform android-31, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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-7281165)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.1.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • 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

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.109

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

• No issues found!

FormValidationDemo.mov

In case anyone tries the workaround mentioned in the issue, it should (🤞🏾) solve for the initial announcement of the errorText; however, on subsequent validations, if the errorText stays the same, it won't be announced. See the attached video for an example.

To workaround that issue, we are toggling appending a space to the errorText (full code sample below). If anyone's got a better solution, let us know!

return 'Please enter your username' + (_shouldAppendSpaceToErrorText ? ' ' : '');

Code sample

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Auto-enable accessibility for our Blind and Low Vision customers (see
  // https://docs.flutter.dev/development/accessibility-and-localization/accessibility#screen-readers).
  RendererBinding.instance!.setSemanticsEnabled(true);

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  const MyCustomForm({Key? key}) : super(key: key);

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  bool _shouldAppendSpaceToErrorText = false;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: const InputDecoration(
              helperText: ' ', // Required to announce errorText (https://github.com/flutter/flutter/issues/99715).
              labelText: 'Username',
            ),
            validator: (String? value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your username' + (_shouldAppendSpaceToErrorText ? ' ' : '');
              }
              return null;
            },
          ),
          TextButton(
            onPressed: () {
              // Ensure that the errorText changes so that it is announced.
              _shouldAppendSpaceToErrorText = !_shouldAppendSpaceToErrorText;

              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Submitting...')),
                );
              }
            },
            child: const Text('Submit'),
          ),
        ],
      ),
    );
  }
}

FormValidationDemo.mov

@vsomayaji

Thanks for the detailed report @vsomayaji. I believe this isn't specific to web, as on mobile as well the same behavior occurs.

stable, master flutter doctor -v


[✓] Flutter (Channel stable, 2.10.3, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 2.10.3 at /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (11 hours ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • DevTools version 2.9.2

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.


[✓] Flutter (Channel master, 2.11.0-0.0.pre.831, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 2.11.0-0.0.pre.831 at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3172065fba (3 hours ago), 2022-03-08 19:35:20 -0600
    • Engine revision 5c760759fe
    • Dart version 2.17.0 (build 2.17.0-182.0.dev)
    • DevTools version 2.11.1

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.62.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.

Labeling it as a framework issue.

Similar / related : #91472

Any updates on this issue ?

Any update on this?

I'm seeing the same issue. However, when building for macOS or Windows the workaround doesn't work and "Submitting..." isn't announced on success.

Synced with ChunHeng offline, it seems SemanticsService.announce is not implemented in macOS. We need to implement it using NSAccessibilityAnnouncementRequestedNotification.

@Hangyujin

@Hangyujin I verified your fix works on Windows, both NVDA and Narrator announced an alert for the example in the original post.

@yjbanov

@yjbanov if support for making semantics announcements is already supported in the web embedding, it may be worth re-testing to see if this now works for web.

We'll want to do the same for the Linux embedding.

Adjusted priority as this is fixed for the platforms that were a ship-blocker.

Can we close this now?

@yjbanov

@yjbanov If you can help confirm semantics announcement is supported for web, we can close this now.

Confirming that semantics announcement works on the web. However, I don't know if it working alone is sufficient to fix this issue. Is there a sample app we can test this with?

@yjbanov

@yjbanov I just use the "code sample" in this issue description to test.

The provided sample works in Chrome, Safari, and Firefox. I'm ok with considering this as fixed on the web.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

[a11y] VoiceOver does not announce form validation errors #99715

Steps to Reproduce

16 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[a11y] VoiceOver does not announce form validation errors #99715

Description

Steps to Reproduce

Activity

vsomayaji commented on Mar 8, 2022

darshankawar commented on Mar 9, 2022

fortinjoffrey commented on Jul 1, 2022

PoojaPatilCybage commented on Feb 3, 2023

bourdakos1 commented on Feb 15, 2023

16 remaining items

hannah-hyj commented on Mar 21, 2023

loic-sharma commented on Mar 30, 2023

cbracken commented on Mar 30, 2023

cbracken commented on Mar 30, 2023

yjbanov commented on Apr 10, 2023

hannah-hyj commented on Apr 10, 2023

yjbanov commented on Apr 10, 2023

hannah-hyj commented on Apr 10, 2023

yjbanov commented on Apr 11, 2023

github-actions commented on Apr 25, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions