Flutter Web & Desktop do not set language for screen readers

Steps to Reproduce

To reproduce as in the attached video you have to have Swedish as your locale in Windows 10. However, the test contains texts of 3 different locales and as web fails to communicate any of them, you should be able to reproduce it in some way regardless of the locale/language of your system. It very likely is possible to reproduce on Mac and Linux as well. I can reproduce it on iPad+Safari with VoiceOver.

flutter create bug_locale
replace lib/main.dart with code sample
flutter run -d chrome
Turn on the screen reader. On windows 10 the shortcut is Win+Ctrl+Enter. If you use iPad/iOS you can ask Siri to turn on VoiceOver.
Press Narrator key + W to have it read out the contents of the window (Narrator key on my system is Caps Lock and I don't think I've changed the default). If you use an iPad/iOS swipe down with two fingers for it to read out the content.

Expected results:
I expect that the screen reader is using the corresponding voice for the different texts. The texts them self try to convey this and in the sample code there are comments that state the expected language of each text. It is fine for the screen reader to use the system locale for annotations like window, button, link etc.

If I visit other websites like https://flutter.dev Windows Narrator is using an English voice to read out the content. (it uses the system default voice - Swedish - to announce annotations like "link", "image" etc., but content like "Flutter", "Multi-platform", "Development etc. is read out in English. )

On a technical side I expect the rendered dom tree to set lang attribute on the html or a high up node in body to the locale defined by MaterialApp and then leaf-content to have lang set based on the locale overrides I have made in the code. BBC has a short but useful article that explains this - see the HTML sub-heading.

Actual results:
Windows Narrator uses Swedish voice all through the video. In the beginning it says "fönsterruta" which is swedish for window and that is expected and possible also using Swedish to announce the tab title "Flutter Demo". But the content starting with Hello World should be according to what is defined in dart.
https://user-images.githubusercontent.com/4630670/155220124-4fa13ead-caf8-4bea-bf7a-c2803babfa6a.mp4

For reference, here is Flutter.dev where it uses English for content:
https://user-images.githubusercontent.com/4630670/155220504-c67ce585-9ac1-4bf7-8910-ffa9221104ee.mp4

Code sample - lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      supportedLocales: const [
        Locale('en', 'UK'),
      ],
      locale: const Locale('en', 'UK'),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello World!'), // should be voiced with UK Engilsh voice (app default)
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Regular text without locale override. Should use UK voice.'), // should be vocied with UK English vocie (app default)
            Container(height: 20.0),
            const Text.rich(
              TextSpan(children: [
                TextSpan(text: 'UK text (no override). '), // should be vocied with UK English vocie (app default)
                TextSpan(text: 'UK text (using override). ', locale: Locale('en', 'UK')), // should be voiced with UK English vocie
                TextSpan(text: 'American text. ', locale: Locale('en', 'US')), // should be voiced with US English voice
                TextSpan(text: 'Dansk text. ', locale: Locale('da', 'DK')), // should be voiced with Danish vocie
              ]),
            ),
            Container(height: 20.0),
            Localizations.override(context: context,
              locale: const Locale('da', 'DK'),
              child: const Text('Localizations.override på dansk.'), // should be voiced with Danish voice
            ),
          ],
        ),
      ),
    );
  }
}

Logs

flutter analyze
Analyzing bug_locale...
No issues found! (ran in 4.6s)

 flutter doctor -v
[✓] Flutter (Channel stable, 2.10.2, on Microsoft Windows [Version 10.0.19044.1526], locale sv-SE)
    • Flutter version 2.10.2 at C:\Users\Leif\Programmering\Libraries\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 097d3313d8 (4 days ago), 2022-02-18 19:33:08 -0600
    • Engine revision a83ed0e5e3
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at K:\Android\android-sdks
    • 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.11+9-b60-7590822)
    • 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 Community 2022 17.0.6)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.0.32126.317
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 2021.1)
    • 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.11+9-b60-7590822)

[✓] VS Code, 32-bit edition (version 1.64.2)
    • VS Code at C:\Program Files (x86)\Microsoft VS Code
    • Flutter extension version 3.34.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19044.1526]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 98.0.4758.82
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 98.0.1108.50

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

• No issues found!

Sidenote

I have on my todo to also report that the same sample app when built for iOS will also not set the locale for the app using setAccessibilityLanguage. So the system language is used for texts that have no override. Also the Localizations.override part doesn't work on iOS. The TextSpan override do work on iOS meaning that it is a Flutter Web bug that none of the locale is communicated to the browser. But there can be also framework wide bugs connected to some ways of communicating locale to screen readers.

I am able to reproduce the same results in Flutter Windows - no part is using correct voice by Windows Narrator.

flutter.windows.mp4

Since I expect many readers to have en-US or en-UK as their system locale I provide also a demo code where app language is set to Swedish so you can hear that the screen reader uses the English system voice to read out the text and not the Swedish voice. If you know a bigger second language like French or so, maybe re-write to that to avoid the pitfall that Swedish voice is not installed on your system. Also it is easier for you to hear when it is right or wrong if you pick a language you know at least a little bit of that is different from your system language.

lib/main.dart - Swedish app language verison for developers with English system language

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      supportedLocales: const [
        Locale('sv', 'SE'),
      ],
      locale: const Locale('sv', 'SE'),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hej världen!'), // should be voiced with Swedish voice (app default)
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Normal text utan tvingande språk'), // should be vocied with Swedish vocie (app default)
            Container(height: 20.0),
            const Text.rich(
              TextSpan(children: [
                TextSpan(text: 'Svensk text (utan tvingande regel). '), // should be vocied with Swedish vocie (app default)
                TextSpan(text: 'Svensk text (med tvingande regel). ', locale: Locale('sv', 'SE')), // should be voiced with Swedish vocie (due to override)
                TextSpan(text: 'Dansk text. ', locale: Locale('da', 'DK')), // should be voiced with Danish vocie
              ]),
            ),
            Container(height: 20.0),
            Localizations.override(context: context,
              locale: const Locale('sv', 'SE'),
              child: const Text('Localizations.override på svenska.'), // should be voiced with Swedish voice
            ),
          ],
        ),
      ),
    );
  }
}

@Leffe108

Hi @Leffe108, thanks for filing the issue, I am able to reproduce the issue, The narrator uses the default voice to read texts with different locales. I did also try using flutter_localizations package but the output was same on both stable and the master channel on desktop and web.

narrator.demo.mp4

code sample

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [GlobalMaterialLocalizations.delegate],
      restorationScopeId: 'app',
      title: 'Flutter Demo',
      supportedLocales: const [
        Locale('en', 'UK'),
      ],
      locale: const Locale('en', 'UK'),
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello World!'), // should be voiced with UK Engilsh voice (app default)
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Regular text without locale override. Should use UK voice.'), // should be vocied with UK English vocie (app default)
            Container(height: 20.0),
            const Text.rich(
              TextSpan(children: [
                TextSpan(text: 'UK text (no override). '), // should be vocied with UK English vocie (app default)
                TextSpan(text: 'UK text (using override). ', locale: Locale('en', 'UK')), // should be voiced with UK English vocie
                TextSpan(text: 'American text. ', locale: Locale('en', 'US')), // should be voiced with US English voice
                TextSpan(text: 'Dansk text. ', locale: Locale('da', 'DK')), // should be voiced with Danish vocie
              ]),
            ),
            Container(height: 20.0),
            Localizations.override(context: context,
              locale: const Locale('da', 'DK'),
              child: const Text('Localizations.override på dansk.'), // should be voiced with Danish voice
            ),
          ],
        ),
      ),
    );
  }
}

flutter doctor -v

[√] Flutter (Channel stable, 2.10.2, on Microsoft Windows [Version 10.0.19044.1526], locale en-US)    • Flutter version 2.10.2 at C:\flutter_sdk\stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 097d3313d8 (4 days ago), 2022-02-18 19:33:08 -0600
    • Engine revision a83ed0e5e3
    • Dart version 2.16.1
    • 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 version 3.34.0

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

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

• No issues found!

[√] Flutter (Channel master, 2.11.0-0.0.pre.554, on Microsoft Windows [Version 10.0.19044.1526],
    locale en-US)
    • Flutter version 2.11.0-0.0.pre.554 at C:\flutter_sdk\master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 894ef49c7c (8 days ago), 2022-02-14 22:15:17 -0500
    • Engine revision 8714a2448f
    • Dart version 2.17.0 (build 2.17.0-105.0.dev)
    • DevTools version 2.10.0

[√] 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.34.0

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

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

• No issues found!

iOS video with Italian as system language (also posted in #99018 - both issues uses exact same code)

iOS share the bug that texts without any override and texts with Localization.override uses wrong voice. iOS does however correctly support TextSpan locale with screen readers.

flutter.ios.mp4

I hadn't noticed this, I'm haven't looked into it. The linked PR didn't change anything in this regard.

Adds semantics locale support for web (#171196)

@chunhtai

Is there any update on this? I see @chunhtai landed a PR recently, but by reading the code it is not clear wether this would make it possible to update the lang attribute of the page.

@chunhtai are you planning to cover that use-case as well?

Adds semantics locale support for web (flutter#171196)

This is not done yet, and is the last item remaining

wires up set application locale to web engine (#177284)

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.

wires up set application locale to web engine (flutter#177284)

wires up set application locale to web engine (#177284)

Navigation Menu

Repository navigation

Flutter Web & Desktop do not set language for screen readers #98948

Steps to Reproduce

Sidenote

59 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Flutter Web & Desktop do not set language for screen readers #98948

Description

Steps to Reproduce

Sidenote

Activity

Leffe108 commented on Feb 22, 2022

Leffe108 commented on Feb 22, 2022

maheshj01 commented on Feb 23, 2022

Leffe108 commented on Feb 23, 2022

59 remaining items

robert-ancell commented on Mar 1, 2024

pedromassango commented on Jul 10, 2025

chunhtai commented on Oct 16, 2025

github-actions commented on Nov 17, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions