Skip to content

Notification of Loading/Busy: Question about the initial wait to load a new page #4789

@kimamula

Description

@kimamula

Hi,

I have a question regarding this document: https://www.w3.org/WAI/GL/wiki/Notification_of_Loading/Busy

It says that: "This is not about the initial wait to load a new page. Those are announced to screen readers."

Does this mean that screen readers are responsible for announcing the loading state during the initial page load, and web pages shouldn't need to implement programmatic notifications for that?

We have a web page that takes time to load (especially for mobile devices). When a user visits this page, they first see a loading spinner that is included in the HTML returned from the server for like several seconds, and then see the actual page after the page completes loading the required JS and CSS resources. The accessibility team at my organization pointed out that it is an accessibility violation that screen readers do not announce the loading state when the loading spinner is displayed, referring to https://www.w3.org/WAI/GL/wiki/Notification_of_Loading/Busy.

I investigated this issue with VoiceOver and found that:

  • aria-live doesn't work until the window's load event (i.e., VoiceOver doesn't announce anything when the content of a live region is updated before the load event). Since the majority of the time the loading spinner is displayed is before the load event, aria-live doesn't help here.
  • Focusing programmatically on a visually hidden text "Loading" immediately after the HTML load lets VoiceOver announce it. However, I'm not confident that this is a proper solution because I can't find anyone mentioning such a solution on the internet. (Also, I'm unsure if this works for all screen readers.)

Could you please guide me on how web pages are supposed to be implemented in this case?

Thank you!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions