Limitations of screen reader on a web with flutter
Screen readers (TalkBack/VoiceOver) enable visually impaired users to get spoken feedback about the contents of the screen and interact with the UI via keyboard shortcuts.
If you are planning to implement a screen reader feature in your flutter web app consider all the known issues mentioned below.
1. Text Form Field
Text Form fields do not get a focus
On windows using NVDA, a user is not able to set focus or remove focus. Focus on actionable widgets can be set only using Tab button
Validation errors are only read the first time user clicks the submit button
2. Alert Dialog
The focus of alert dialog is not automatically set to title.
The user is not aware that dialog box is opened since it is not announced by the screen reader
Temporary solution: Used SemanticsService.announce to resolve #2 (Works only on Mac web browsers)
3. Date Picker
When screen reader is enabled on web, if the first 3 rows of dates are disabled, user cannot select any valid date.for e.g., user cannot select dates 23rd to 31st
4. Snack Bar
Snack bars are not read out by windows screen readers NVDA
5. Detecting if a screen reader is enabled
We are unable to detect if screen readers are enabled using mediaQueryData.accessibleNavigation. Value is always returned as enabled. The mediaQueryData.accessibleNavigation return the correct value on a mobile app
Temporary solution: Added FAB button from which the user has to enable Semantics (RendererBinding.instance.setSemanticsEnabled(FAB button status))
6. Auto Scrolling with Screen Readers On
When screen readers are activated, the pages do not always auto-scroll to the elements beyond the visible area of the browser. This happens even when the reader announces the semantics for the element that is outside the currently visible area
7. Focus Issue when we navigate to the next screen
When screen readers are activated and a user tries to navigate from a list to it’s detail screen or it’s child screen, the focus doesn’t come onto screen
8. Tab Bar — Tab Navigation Issue when navigating via VO keyboard commands/gestures
When screen readers are activated and a user tries to navigate between the content of tabs inside Tab View, the tabs get automatically switched without even clicking on them. This issue is reproducible when the browser zoom level is 90% or below.
Please refer sample app GitHub — mfdcoder/flutter-form-voiceover at staging. to check all the issues mentioned in the blog