Accessibility issues with the responsive table solution
Accessibility issues with the responsive table solution
msun
Posts: 2Questions: 0Answers: 0
Description
Test link: https://datatables.net/extensions/responsive/examples/initialisation/default.html
When columns are collapsed using the responsive extension, their data are rendered in a separate <tr> using row().child(), which injects a single<td colspan="X"> containing a list of title/data pairs. This breaks the semantic structure of the table and introduces several accessibility issues:
- The child row is not part of the original tabular flow, making it associated with the wrong column header
- The use of
<ul>inside a<td>lacks proper ARIA roles and labeling. - Keyboard navigation and focus order are disrupted in table mode.
ANDI:
VoiceOver:
A more accessible approach to consider:
- Preserve hidden
<td>s with a visually-hidden class (e.g., using the WebAIM technique) so screen readers can still access them. - Suppress child rows from assistive tech by adding
aria-hidden="true"andtabindex="-1"to the generated child<tr>. - Optionally, allow developers to opt into rendering hidden data inline within the original row (dt-hasChild) using additional
<td>s, maintaining tabular semantics.
Replies
Excellent ideas - many thanks. I'd added them to my tracker to look at for the next major release of Responsive. I'd also welcome a pull request to address these points if someone else manages to work on them before I can.
Worth noting that the child row display isn't mandatory. You could use a model, disable the details view completely or use a custom display.
Regards,
Allan