NVDA ignores progressbar elements with no text content

[adamsamec]

Steps to reproduce:

1. Visit this demo page.
2. Make sure that browsing mode of NvDA is enabled.
3. Press the "1" key to jump to the 'Accessibility tests of the "progressbar" ARIA role' heading.
4. Read through the page using the Down arrow key until you reach the "End of examples" button.

Actual behavior:

Below each of the <h2> heading, is an element with the "progressbar" role. However, NVDA reads only the progressbar in the first example, which has a textual content "Updating...". The progressbars in the second and third example, which are named using the "aria-label" attribute, are completely ignored by NVDA. In these last two examples the progressbar elements have no content.

The second problem is that even in the first example, NVDA does not narrate the accessible name of the progressbar element, which should be determined from the element's text content.

Expected behavior:

The second and third example progressbars should be recognized and narrated even as they have no text content, like JAWS or Narrator screen readers do.

Apart from identifying the element as a progressbar, NVDA should read the accessible name of the progressbar, which should be derived from its text content or from the "aria-label" or "aria-labelledby" attributes.

System configuration

NVDA installed/portable/running from source:

Installed.

NVDA version:

NVDA 2022.1.

Windows version:

Windows 11, version 21H2 (OS Build 22000.795)

Name and version of other software in use when reproducing the issue:

Google Chrome, version 103.0.5060.114

Other questions

Does the issue still occur after restarting your computer?

Yes.

Have you tried any other versions of NVDA? If so, please report their behaviors.

No.

If NVDA add-ons are disabled, is your problem still occurring?

Yes.

Does the issue still occur after you run the COM Registration Fixing Tool in NVDA's tools menu?

Yes.

[seanbudd]

Closing as a duplicate of recently discussed #13897

[feerrenrut]

You need to add something that sighted and low-vision users can see, so they also know there is a progress bar here. It might be an image or a pair of div elements with a background colors or something else entirely.

Essentially this come down to the question: "if it's not important enough to show to sighted users then why should it be important to Screen reader users?". Use aria-label when the presentation to sighted users requires an alternative "name" for AT users.

<h2>Example 2: Named using the "aria-label" attribute</h2>
  <div role="progressbar" aria-label="Updating..."><div role="presentation">Visible thing</div></div>

<h2>Example 3: With tabindex="0" and named using the "aria-label" attribute</h2>
<div role="progressbar" tabindex="0" aria-label="Updating..."><div role="presentation">Visible thing</div></div>