Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Let NVDA read aria-label of th #17213

Closed
venlahy opened this issue Sep 24, 2024 · 2 comments
Closed

Let NVDA read aria-label of th #17213

venlahy opened this issue Sep 24, 2024 · 2 comments

Comments

@venlahy
Copy link

venlahy commented Sep 24, 2024

Is your feature request related to a problem? Please describe.

I have a table like this:

<table>
    <thead>
        <tr>
            <th>First header</th>
            <th>
                Second header
                <button>Open additional info to second header</button>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
    </tbody>
</table>

That table has an accessibility problem with the button. When I use a screen reader and step to the "Value 2" cell, I hear the screen reader saying also the text "Open additional info to second header" which I do not need to hear in the "Value 2" field. The screen reader says:
"Second header and Open additional info to second header Value 2, column 2 of 2".
but I would like the screen reader to say:
"Second header Value 2, column 2 of 2".

With VoiceOver, this problem can be fixed by adding an aria-label to the th. But to prevent VoiceOver from reading the "Second header" twice when stepping to the header cell, an aria-hidden attribute can be added. Like this:

<table>
    <thead>
        <tr>
            <th>First header</th>
            <th aria-label="Second header">
                <span aria-hidden="true">Second header</span>
                <button>Open additional info to second header</button>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
    </tbody>
</table>

However, this solution does not work with NVDA, since NVDA does not read aria-labels of th elements. NVDA does not read the text "Second header" at all in the cell, so I cannot use this solution at all.

Describe the solution you'd like

I would expect NVDA to behave simirlarly to VoiceOver. I would expect NVDA to read the aria-labels of the table headers.

Describe alternatives you've considered

Additional context

@Adriani90
Copy link
Collaborator

cc: @SaschaCowley, @jcsteh maybe you have any thoughts on this as well, I think this approach might produce also redundant verbosity if aria label on th elements is misused in some circumstances. In this case the question is why should the user not get any information about the button?

@seanbudd
Copy link
Member

seanbudd commented Oct 1, 2024

This is intended behaviour, what part of the HTML/ARIA spec leads you to the reasoning for expected behaviour? Note VoiceOver might not be following the spec, or there could be multiple valid implementations within the spec.

@seanbudd seanbudd closed this as not planned Won't fix, can't repro, duplicate, stale Oct 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants