Customers always want a UI looking table that has an expansion area to show a nested table of related-data.

I have done this with DIV tags and styles before but a table in the cell of the table would be easier.

From what I know of WCAG AA compliance, tables should only be used for tabular data and adding a nested table to a cell or even controls makes things confusing for screen readers and other to tools.

My question is simple, how can you make a table with nested tables or controls accessible?

For Example - the DevExpress Master-Detail View claims to be accessible. https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailView/Angular/Light/

CodePudding user response：

Nested tables are perfectly fine if they're semantic. I would not use the master-detail table example as your template. It's pretty whacked out. The code is overly complicated, incorrectly uses grid/gridcell instead of table/tablecell, and the screen reader has difficulty navigating to the nested table.

If you use a real <table> along with its associated <tr>, <th scope="row/col">, <td>, and <caption> then you can have one of the table cells (<td>) contain another <table>.

A screen reader user can use the T key to navigate to a table (if using JAWS or NVDA) and then ctrl alt arrow to navigate within the table. Pressing T again will navigate to the nested table and the user can navigate within the nested table. It all works great.

I would recommend using a <caption> so you can name your table and the screen reader user will know the purpose of the table.