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

Regression (?): aria-labels on columnheaders aren't respected #656

Open
sivakusayan opened this issue Jul 20, 2022 · 0 comments
Open

Regression (?): aria-labels on columnheaders aren't respected #656

sivakusayan opened this issue Jul 20, 2022 · 0 comments

Comments

@sivakusayan
Copy link

sivakusayan commented Jul 20, 2022

Summary

When setting an aria-label on a columnheader with empty text content, the aria-label is not respected. Maybe this was done on purpose to guard against non-ideal table implementations?

  1. Go to this codepen.
  2. Use table navigation mode or the virtual cursor to navigate the table cell by cell.
  3. Notice that cells under the second column don't read out the columnheader's computed name, "Random label"

Expected result

"Random header" is read out as the column name for cells in the second column.

Actual result

The column name is not read out.

Additional Information

Okay, you might be wondering why we don't just give the column header text content.

I'm trying to make a legacy table implementation accessible. The problem is, it needs fixed header, so that the header of the table is always visible no matter how much the table rows are scrolled up and down. A lot of our customers are using a version of software that renders web content with MSHTML (an upgraded version of our software uses Chromium instead, thankfully). Upgrades in our industry tend be slow - I'm guessing they need to be slow-moving to mitigate safety issues. This means that to implement fixed headers, we can't use position: sticky CSS. We need to follow the double table pattern, similar to what's done here. Judging from the first paragraph of this article, I'm guessing we're not the only ones who have tried to implement a pattern like this.

The way I'm trying to make this accessible is to

  1. Add aria-hidden="true" to the first table
  2. Add aria-labels to the columnheaders of the second table equal to the text content inside the columnheaders of the first table.

I thought about working around this by using aria-owns to place the header row in the first table inside the header row of the second table, but the first table is aria-hidden. Judging from this thread, aria-hidden and aria-owns are properties we don't want to play together.

This works in JAWs 2021, but not with NVDA. I notice that the correct name is being exposed in UIA and IA2, unless I'm missing context for some other thing that the browser needs to do.

JAWS version and build number

JAWS Version 2022.2206.9 ILM

Operating System and version

OS Name Microsoft Windows 10 Enterprise
Version 10.0.19044 Build 19044

Browser and version:

Chrome Version 103.0.5060.134 (Official Build) (64-bit)

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

1 participant