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

TreeTable: Make TreeTable accessible for ScreenReaders #16862

Open
B34v0n opened this issue Nov 27, 2024 · 0 comments
Open

TreeTable: Make TreeTable accessible for ScreenReaders #16862

B34v0n opened this issue Nov 27, 2024 · 0 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@B34v0n
Copy link

B34v0n commented Nov 27, 2024

Describe the bug

The TreeTable component is not accessible for screenreaders and behaves strangely.
I tested it with the NVDA-Screenreader (https://www.nvaccess.org/download/) and tried to navigate it with the build-in shortcuts.

First thing to notice, is that the header of the table is a table for itself and the body of the table is a second table.
If you add frozenColumns, you got 4 tables for one visible table.
That makes it very confusing, if you use a screenreader.

It should be possible to navigate it as one table (CTRL + ALT + Arrow Left / Arrow Right / Arrow Top / Arrow Bottom to navigate between the cells).

If it is one table, the header will be read together with the corresponding cell.
Example for a table that reads perfectly in Screenreaders: https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts#nvda-speech_viewer

If you use the screenreader to navigate to the marked red cell, it will read something like "LeftBlock: row X Header column y content" --> "Reading: row 4 Task column 2 Stop Reading"
image
image

When the header is a table in itself, the screenreader cannot read the heading with the content, which makes it way harder to navigate.

Additionally, the key-bindings for left and right arrow to open or close the node interfers with the screenreaders ability to navigate the table.

Environment

All Environments

Reproducer

https://stackblitz.com/edit/fdghbm?file=package.json

Angular version

18.x

PrimeNG version

17.18.x

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.16.0

Browser(s)

No response

Steps to reproduce the behavior

  1. Download and install NVDA (https://www.nvaccess.org/download/)
  2. Open NVDA
  3. Navigate to the TreeTable-Site (https://primeng.org/treetable#frozencolumns)
  4. Press t to get to the next Table
  5. See that frozenColumns-Header, frozenColumns, normal Header, normal table are all seperate tables
  6. Try to navigate the table without looking at the screen.

Expected behavior

The table should behave like one big table, not like 2 or even 4 separate tables.
The navigation with the screenreader should be seamlessly possible, like it is for example here: https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts#nvda-speech_viewer

@B34v0n B34v0n added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant