[SF][A11y][ui5-table] Data tables missing column header association with JAWS

[2bno1]

Bug Description

Using JAWS, tab to the table, switch to VPC mode, press CNTL+ALT+arrow keys and navigate through the cells -> observe the column header association is not made. (Note: I have confirmed it works with NVDA and problem is specific to JAWS. However, since JAWS is our primary screen reader and the screenshots below show that the SAP UI5 responsive tables work just fine with column header association with various versions of JAWS.) Issue exists in WC data table

Expected Behavior

Column header association must be made when cells are read in VPC mode. UI5 examples where column header association works just fine in VPC mode with various versions of JAWS

Context

• UI5 Web Components version: 1.0.2
• OS/Platform: Windows 10
• Browser: Chrome
• Affected component: ui5-table

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

[alexandar-mitsev]

Hi @2bno1 ,

Can you please give more details of where and how you reproduce. Which version of Jaws are you using, which exact version of UI5 web components and what is the code of the table you are testing.

I am testing on the demo page for the table in latest version of UI5 Web Components - https://sap.github.io/ui5-webcomponents/playground/components/Table/. With Jaws 2021. And the result is correct - the titles of the columns are read out - check the attachment below.

Can you confirm that you are experiencing the issue with the latest version of UI5 Web Components and Jaws 2021?

Thanks and Regards, Alexandar Mitsev

[anuvenkatesh1]

@alexandar-mitsev I'm from Successfactors accessibility team It appears you have read the table in "forms" mode - ie once you landed on the table you used arrow keys to go row by row. In VPC/Browse mode, you have to press CNTL+ALT+arrow keys to read cell by cell. It's another way a screen reader user will read the cells of the data table. I have tested with both JAWS 2020 and JAWS 2022 and I observe the same result - as I navigate through the cells, the column header association is missing.

Comparison with UI5 responsive table in Browse mode - column header association is made as we navigate through the cells using CNTL+ALT+Arrow keys

https://user-images.githubusercontent.com/32471459/152844308-0702188e-08f5-4b27-82fe-67b3adc5c06a.mp4

Hope this helps. Thank you

[alexandar-mitsev]

Hi @anuvenkatesh1 ,

Thanks for clarifying. I can also confirm the behaviour is the same for Jaws 2021.

@SAP/ui5-webcomponents-topic-rl , it is a reproducible issue with virtual cursor and navigation with CTRL-ALT-arrows inside the table. Please check.

Regards, Alexandar Mitsev

[niyap]

Hello @2bno1,

Thanks for sharing your findings!

In ОpenUI5 the expected behaviour is achieved via “headers” attribute which has a reference to the column as a value. Setting IDRef relationships is currently not possible due to the nature of the custom elements and their shadow DOM and that is the reason to not be able to provide a reference to the column, when a table cell is accessed. You can find more information regarding this limitation here : https://sap.github.io/ui5-webcomponents/master/playground/advanced/accessibility/

 Kind Regards, Niya

[stes-acc]

It is mandatory that this functionality/relationship is implemented to satisfy https://www.w3.org/TR/WCAG21/#info-and-relationships.

Current technical inability because part of structure is in Shadow DOM is no reason not to fulfil above general requirement. Table DOM has to be changed in a way that table headers are within shadow DOM to resolve the "not in scope" conflict.

Other options are evaluating calls to .root or .shadowRoot like

document.getElementById('itemId').root

Finally, dynamic setting/labelling via JS at creation/rendering time may be an option, too.

[2bno1]

@niyap Please take a look at the comments above.

[nikolay-kolarov]

Hello,

After testing with the latest Jaws version (Jaws 2022.2206.9) the issue is no longer reproducible. And now, when I navigate through the cells with Ctrl+Alt+Arrows the column names are correctly announced. I used this sample: https://sap.github.io/ui5-webcomponents/playground/components/Table/

Also on Jaws What`s new page they mention enhancements for the table support.

Could you please retest this with latest Jaws version on your side and confirm that it is also working on your side, so that we can close the ticket?

Thanks, Nikolay

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 28 days, so I am closing the issue.