Table Inside Table (Nested Tables)
In the process of ensuring web content is accessible to all users, including those with disabilities, the remediation of tables presents unique challenges. This is particularly true when dealing with nested tables - or tables within tables. While efforts to make content accessible are comprehensive, there exist limitations in handling certain structures, such as these nested tables, which are often considered malformed in the context of accessible web design. This documentation explains why nested tables pose problems and our approach to their remediation within accessibility efforts.
Understanding Malformed Nested Tables
Nested tables refer to an HTML structure where a table is placed inside another table. Originally used for layout purposes before the widespread adoption of Cascading Style Sheets (CSS), nested tables are now largely regarded as a problematic construction for accessibility. They are considered "malformed" for several reasons:
- Complex Navigation: Screen readers and assistive technologies may struggle to navigate through the layered structure of nested tables, leading to confusion for users.
- Linearization Issues: The content in nested tables does not linearize (convert to a single column layout) clearly, making it difficult for users relying on assistive technologies to understand the content flow.
- Semantics: Proper table markup includes headers (
<th>) and data cells (<td>), along with tags that aid in understanding the table structure (<caption>,<thead>,<tbody>,<tfoot>). Nested tables often break these semantic structures, complicating the interpretation of data. - Performance: Nested tables can also affect the loading time of web pages, impacting users with slower internet connections.
Remediation Approach
Due to the inherent issues with nested tables, our approach has been to avoid remediating these tables directly within our accessibility efforts. Instead, we prioritize practices that encourage a move away from employing nested tables altogether. Here is a closer look at our rationale and recommendations:
Make sure nested tables are marked as "skipped" and not "remediated".