In browse mode, NVDA does not read list item html element with aria-label

thgcode commented 1 year ago

Steps to reproduce:

Load this sample HTML document on Firefox, Edge or Chrome:

<html>
<head>
<title>HTML Aria-label list tests</title>
</head>
<body>
<h1>Example 1</h1>
<ul>
    <li tabindex="0" aria-label="Read this"><span aria-hidden="true">Don't read this</span></li>
    <li tabindex="0" aria-label="Read this 2"><span aria-hidden="true">Don't read this 2</span></li>
</ul>
<h1>Example 2</h1>
<ul>
    <li style="list-style-type: none" tabindex="0" aria-label="Read this"><span aria-hidden="true">Don't read this</span></li>
    <li style="list-style-type: none" tabindex="0" aria-label="Read this 2"><span aria-hidden="true">Don't read this 2</span></li>
</ul>
</body>
</html>

With browse mode enabled, use the arrow keys or tab to read the page's content.
Now do the same thing with tab and with focus mode.

Actual behavior:

NVDA says bullet or blank when reading the text on browse mode.

Expected behavior:

NVDA should say Read this 1 and Read this 2.

NVDA logs, crash dumps and other attachments:

System configuration

NVDA installed/portable/running from source:

Installed and built from source.

NVDA version:

2023.2 and source-master-9fe5207

Windows version:

Windows 11 22H2 (10.0.22621) workstation AMD64

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

Chrome 112.0.5615.87 Firefox 112.0 Edge 112.0.1722.46

Other information about your system:

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.

Tried 2023.2 and source-master-9fe5207, both with the same behavior.

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.

Adriani90 commented 1 year ago

This code is invalid. A span is used to group elements, so it appears as a parent element of list items for example. Aria-hidden="true" should be only applied on the child element in a nested list, but a span is not a sematic element and does not have a role in this example. Given the list item an aria-label would work only if you put the whole list item between a span tag and apply the aria-label to the span. You could also give the span a role (i.e. <span role=listitem>, then you probably don't even need the <li> tag.

However, I advise you not to raise such issues here without any reference to certain Aria spec. This will overwelm this repository. For such questions the stack overflow is a better source of information in the first place. If you don't succeed there, then you can raise an issue here.

Closing as invalid, but feel free to comment with a certain aria spec that states that this example code should work and we can reopen.

thgcode commented 1 year ago

I performed another test, removing the span. NVDA still couldn't read it on browse mode, but read on focus mode.

<html>
<head>
    <title>HTML Aria-label list tests</title>
</head>
<body>
    <h1>Example 1</h1>
    <ul>
        <li tabindex="0" aria-label="Read this"></li>
        <li tabindex="0" aria-label="Read this 2"></li>
    </ul>
    <h1>Example 2</h1>
    <ul>
        <li style="list-style-type: none" tabindex="0" aria-label="Read this"></li>
        <li style="list-style-type: none" tabindex="0" aria-label="Read this 2"></li>
    </ul>
</body>
</html>

Narrator could read the two list items, both on browse and focus modes and NVDA with tab on focus mode, that's why I assumed it was a bug. On the accessibility tree it shows the item with the label correctly.

Adriani90 commented 1 year ago

Since Narator seems to work with this, I am CCing here @michaelDCurran

ramoncorominas commented 1 year ago

The initial code is not invalid, maybe it is a bit strange, but the span is inside the listitem, not "grouping" it.

According to ARIA 1.1 (current version of the Recommendation) the accessible name for the listitem must be the aria-label and therefore NVDA should read it in both cases (this doesn't change in ARIA 1.2 or 1.3).

aria-label is listed as an inherited (not prohibited) property for the listitem role [1] and according to the role definition iself and the accessible name calculation [2], the accessible name for the listitem follows the normal rules for accessible name computation [3]. Therefore, the aria-label takes precedence over the element's content, so it really doesn't matter if there is a span or if it has an aria-hidden or whatever, since the algorythm stops when it encounters teh aria-label and does not go inside the element.

Besides that, I have tested with Narrator in Windows 10 with Chrome/Firefox/Edge, and with Voiceover + Safari in MacOS, and in all cases they read the aria-label according to the spec. You can also check with Firefox accessibility inspector that the computed name for the element is the value of the aria-label.

[1] ARIA 1.1. listitem (role) https://www.w3.org/TR/wai-aria-1.1/#listitem

[2] ARIA 1.1. Accessible name calculation https://www.w3.org/TR/wai-aria-1.1/#namecalculation

[3] Accessible name computation https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_name

Adriani90 commented 5 months ago

I think this is very related or might be a duplicate of #13296.

nvaccess / nvda