feat: introduce multi-level headers example for table

[balazspynter]

Context

A hierarchical data structure could be shown in many ways.

• using in one table
• using split tables
• using headings, paragraphs and tables

Challenge

Show the data in a table and make it easily accessible.

New page introduced

https://deploy-preview-449--accessibility-developer-guide.netlify.app/examples/tables/multi-level-headers/

[netlify]

✅ Deploy Preview for accessibility-developer-guide ready!

Name	Link
🔨 Latest commit	e836f58
🔍 Latest deploy log	https://app.netlify.com/sites/accessibility-developer-guide/deploys/66f0829d9844500008b4eb46
😎 Deploy Preview	https://deploy-preview-449--accessibility-developer-guide.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[LAST2024]

Thank you very much for your work. We are very pleased to keep inspiring people for the topic of accessibility and its support. I am happy to test your solutions and will incorporate them into the current system as soon as possible.
Best regards
The ADG Community

[RA11y1]

The example under "Table as tree grid" using aria-level does not work on NVDA (v. 2025.1.2). I get the following output:

row 3 Region/Country column 1 Western Europe
Population column 2 200 million
row 4 Region/Country column 1 Austria
Population column 2 9 million
row 5 Region/Country column 1 France

Will check later with Regina on JAWS.

[backflip]

New preview URL: https://deploy-preview-466--accessibility-developer-guide.netlify.app/examples/tables/multi-level-headers/

[RA11y1]

We carefully reviewed the three examples provided and found that all of them lead to meaningfully different experiences depending on the assistive technology and the browser used.

Versions of used software

Firefox 147.0.1
Chrome 144.0.7559.59
NVDA 2025.3.2.535.88
JAWS 2026.2512.50

Example 1, Table with irregular headers

The first example referencing irregular headers, using rowspan works for the screen reader NVDA in both Chrome and FF (Firefox). When e.g. navigating between rows in the column "Population", the region group, the region, the country and the corresponding population is output by the screen reader. However, the screen reader JAWS does not announce over how many rows a header spans, on both FF and Chrome.

Example 2, Table with more headers

Using the screen reader NVDA, the given example works on FF but not on Chrome. In FF the screen reader will output the cell content of each linked header. However, there is a header missing for the cells in the population column, as navigating up and down won't announce the respective country. As stated under the example, the implementation is quite tedious, but also error prone. In Chrome the linked headers are not announced at all, NVDA only outputs regular headings and focused cell content. The example works when using the screen reader JAWS on Chrome. When using JAWS in FF, the regular for the row stating the country is not announced when navigating through the population column.

Example 3, Table as tree grid

The third example using the role treegrid and levels works in Chrome using NVDA, but it doesn't work in FF, where the levels are not announced. For some unknown reason, the screen reader JAWS is not able to move between columns in Chrome and is therefore unable to reach the population information using standard table navigation. Additionally, both in FF and Chrome the levels are not announced, the term "structured element" is output instead. Fundamentally, we find that substituting headers with levels to be suboptimal, as screen reader users only receive the level of a given row and not the corresponding region and region group name. In larger and more complex tables it will be increasingly more difficult to remember under which level 1, 2 or 3 etc. the user is located at.

Conclusion

Given the wide difference in behavior between browsers and screen reader combinations the statement here (https://www.accessibility-developer-guide.com/examples/tables/spanning-rows-cols/) seems to still apply: "keep your tables simple". In this example, splitting the table content into separate tables for each region and structuring it using regular headings would enable a consistent experience for everyone.

Some of these examples could be used to further illustrate the inconsistent user experience on the spanning rows cols page mentioned before. @rudigier would you find this to be beneficial?