What is the best way to detect an empty table header for accessibility purposes?
It's an accessibility rule that all table headers (th elements) must contain text. If you have a header that is blank, it should be rendered as a td instead, so as not to mislead/confuse screen readers. Unfortunately, it seems like I have to explicitly set
header: '' on my column definitions to achieve this. Otherwise, the libray seems to set a default header function that checks if the column is an accessor column before returning null for the header.
It would be great to have some sort of utility header.isEmpty() or something to that effect; I am not sure how I can check it otherwise. Even the output of flexRender is non-null for empty headers, again unless the column def sets an empty string. I just want this to work by default so developers don't have to remember to set the header as an empty string.
Any suggestions?2 Replies
robust-apricot•5mo ago
I’m interested in this. Is there a source of reference for why a th needs to be a td when empty?
fair-roseOP•5mo ago
The WAVE tool is flagging it as a violation of WCAG 1.3.1:
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.I'm struggling to find why they interpret that specifically as "th elements must have text", but that does seem to be the interpretation. https://www.wcag.com/developers/1-3-1-info-and-relationships/ This part of the spec was referenced in a similar issue with a different npm repo: https://github.com/dequelabs/axe-core/issues/3404 https://www.w3.org/TR/wai-aria-1.2/#columnheader In any case, I just need the WAVE tool to give me green 👍
Kris Rivenburgh
WCAG
1.3.1 Info and Relationships (Level A)
Master WCAG 1.3.1 Info and Relationships. Learn how to structure content for accessibility, ensuring clear relationships and logical information flow
GitHub
Empty table headers are flagged as a failure of WCAG 1.3.1 · Issue...
Product: axe Extension Expectation: I don't think an empty table header (e.g. <th></th>) is a failure of WCAG 1.3.1 Info And Relationships, which is what Axe flags and tags this cod...
Accessible Rich Internet Applications (WAI-ARIA) 1.2
Accessibility of web content requires semantic information about widgets, structures, and behaviors, in order to allow assistive technologies to convey appropriate information to persons with disabilities. This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to im...