Inappropriate Nested Table Element Check

Description

The “Inappropriate Nested Table Element Check” evaluates whether any a <table> element inside another <table>.

Example outcome

I found 1 table inside another table.

Impact

• Visual Impairments: Screen readers may not accurately announce relationships between rows and columns in nested structures. Navigation within deeply nested structures can become unpredictable and non-linear.
• Motor Impairments: Nested tables often create inconsistent focus order. Keyboard users may face erratic tabbing or reading sequences.
• Cognitive Disabilities: The visual complexity of nested tables can make it hard to understand or mentally model the data relationships. Nested layouts often lack consistent visual cues, increasing cognitive load and frustration.

Fixes

To address <table> elements nested inside other <table> elements:

1. Locate the inapprorpriate <table> elements.
2. Replace one of them by appropriate and valid HTML elements to create the same visual appearance.

Resources

• WCAG 2.2: Understanding Success Criteria 1.3.2
• WCAG 2.2 Techniques: Technique F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized
• WebAIM: Creating Accessible Tables