Accessibility Issue: Semantic Structure and Screen Reader Behavior in ScrollX Tables

msun

Hi DataTables team,

I’m reaching out regarding the ScrollX example --> https://datatables.net/examples/basic_init/scroll_x.html. We've identified an accessibility issue related to how the table is rendered when horizontal scrolling is enabled.

Currently, the table is split into three separate <table> elements for the header, body, and footer. This structure introduces several accessibility issues:

• Screen reader confusion: Users relying on assistive technologies interprets the scrollable table into multiple separate tables..
• Misleading ARIA labels: The body table repeats header values, but the sorting functionality is only tied to the header table. Screen readers announce “activate to sort” on body cells, which is misleading since those cells aren’t interactive.

Are there any plans to restructure scrollable tables to use a single semantic <table> element? This issue was raised by a screen reader user and flagged during our accessibility audit. We’d appreciate any guidance or roadmap updates on this. Thank you!

allan

Currently the only option is to disable the scrolling option.

I would love to get rid of the scrolling code in DataTables and not split it up into three component tables. The column width alignment alone is a nightmare to do and removing it would save a significant amount of code.

The problem is, there is no good way in HTML / CSS to have the header and footer in position, with the body scrolling and the scrollbars limited to just the table body (x and y scrolling). It is infuriating.

If you or anyone else knows a way to do that, I would be delighted to learn from an example and look at implementing it in DataTables.

Allan