Accessibility: Toast, Loading, Alert

I’m trying to improve the accessibility of my app but I’m running into a bit of a problem regarding the use of Toasts, Loading overlays, and Alerts. For example, I have a button in the app that will update the current location. If that is tapped, a loading overlay appears to indicate that geolocation is in progress, once the location has been retrieved, a Toast is shown, indicating success. I don’t seem to be able to set things up in a way that these elements are automatically read so that a screenreader-user knows that something is actually happening. The elements all have role=“dialog” out of the box, which I thought would mean that they are automatically read, but it doesn’t seem to work. Does anyone know how I can fix this? There does seem to be some focus switching going on, because as soon as the loading overlay disappears, the title tag of the app is read (which I would also prefer not to happen).

1 Like

Interesting topic I know nothing about. How do you activate the “reading” of interface?

So in general you can swipe through all focus-able items on the page and it will read each one as it is selected. Alternatively, you can tap an item directly and it will be read (though that of course won’t always be an option for users of screen readers).

1 Like

I may have sort of found a workaround now where I have an invisible div with aria-live=“assertive” and change its contents when displaying one of the elements, but I’m still having the issue that the reading is then interrupted when focus automatically shifts back to the app container and it reads out the title of the app. Does anyone have an idea how I may be able to prevent this? Specifically it seems that all of these elements will cause focus to switch to app container on present() and/or dismiss().