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