Repository: flutter
Issue: [web] Not possible to navigate flutter apps using vimium-c keyboard labels
Labels: c: new feature,a: accessibility,platform-web,c: proposal,P3,team-web,triaged-web

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

This is a mix of bug/feature-request for improved accessibility especially for users with limited use of their hands but are not using a screen reader. I have provided both steps to reproduce and more explanation in the end.

## Steps to Reproduce

0. Install Vimium-C plugin to Chrome or Firefox.
1. Run `flutter create bug`.
2. `flutter run -d web-server`
3. Open Chrome or Firefox to the address printed by flutter web server.
4. Let the flutter starter app load
5. Press F on the keyboard

**Expected results:** 
I expect a keyboard navigation label to be placed on the `+` FAB button so I can click on it using keyboard or with speech using speech recognition software like Talon or Caster. 

What I expect to see:
![bild](https://user-images.githubusercontent.com/4630670/110018871-10dcc600-7d28-11eb-921a-ea119e199891.png)

Then I expect that if I press "S" key vimum will activate that link/button and the counter increments by 1.

**Actual results:** <!-- what did you see? -->
No label is placed and vimium does not find any links:
![bild](https://user-images.githubusercontent.com/4630670/110019091-53060780-7d28-11eb-8aca-6df890ec5426.png)

<details>
  <summary>Logs</summary>

<!--
      Run your application with `flutter run --verbose` and attach all the
      log output below between the lines with the backticks. If there is an
      exception, please see if the error message includes enough information
      to explain how to solve the issue.
-->

```
```

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->

```
```

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
[✓] Flutter (Channel master, 2.1.0-11.0.pre.100, on Microsoft Windows [Version 10.0.19041.804], locale sv-SE)
    • Flutter version 2.1.0-11.0.pre.100 at C:\Users\Leif\Programmering\Libraries\flutter-master
    • Framework revision 7b251f5f37 (3 hours ago), 2021-03-04 08:59:17 -0800
    • Engine revision 99d9429e96
    • Dart version 2.13.0 (build 2.13.0-101.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Leif\Programmering\Android\android-sdks
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[✓] Android Studio (version 4.1.0)
    • 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 1.8.0_242-release-1644-b01)

[✓] VS Code, 32-bit edition (version 1.53.2)
    • VS Code at C:\Program Files (x86)\Microsoft VS Code
    • Flutter extension version 3.20.0

[✓] Connected device (3 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 88.0.4324.182
    • Edge (web)              • edge          • web-javascript • Microsoft Edge 88.0.705.81

```

</details>

## Use case - why is this important (accessibility)
Consider users with limited use of their hands.

A user with limited use of hand can use voice recognition software to say commands to control their computer using effectively what is available to a keyboard-only user. There can also be voice commands to move the mouse, but it is slow and requires knowledge of more voice commands compared to the keyboard label navigation method which only relies on the alphabet.

On the web (not Flutter) a user can use vimium-c browser extension and speak/press "F" and it will place labels with unique letter combinations on each visible button/link. User can then type/speak those letters to activate the button.

This method allows a much higher speed of usage than having to say "tab tab tab tab tab tab tab tab space" to click on some link. Of course some Flutter developers will be helpful and provide hotkeys for everything a user may want to do, but I think it is safe to assume many app developers will neglect to think of this aspect of accessibility.

## Proposal
Flutter Web need to have location correct DOM-nodes for widgets visible on the screen so that extensions such as vimium-C can "see" what is a button and where on the screen they are located. Note that vimum-c is not a screen reader and therefore from what I understand it will not activate the screen reader support in Flutter.

Of course one solution would be to contribute to vimium-c to make it appear as a screen reader to Flutter. But the problem with that is that we don't know what other accessibility tools there are out there that our current and future users will use. But if Flutter expose location correct DOM nodes for buttons/links by default it increases the chance of supporting more accessibility tools and as a result more users can access their digital life trough flutter powered apps. 
 
### Alternative solution - emulate vimuim-c key/speech navigation in Flutter
An alternative solution to in DOM expose information so existing tools like vimuim-c can access where clickable buttons/links are located, it would be possible to implement a package or builtin that globally hook to F key and display letter labels when tapped and then collect key input to decide which button the user pressed to activate a button. If this is just a package, then most Flutter apps won't have it and most developers will not know which disabilities their current and future users have. If it is included in the framework it adds extra weight to everyone and it cannot be customized or the user who need the feature to the same extent they can customize eg. vimum-c for their needs. One handed? just change the letters it will use to only include one side of the keyboard.

### Alternative solution - Flutter-native speech control
Not sure exactly how this would work, but some flutter-native way for users that use speech as input (no mouse, keyboard or touch) to control Flutter apps.

Drawback: this problem should probably not be solved in a UI framework but rather at OS level or with speech recognition software that produces emulated key strokes. But I could be wrong on this one if speech control of visual apps becomes big and more mainstream some day in the future.