Table without table headers

[giacomo-petri]

The implicit role of <table> elements is always role="table".

However, when a table lacks headers, browsers handle it inconsistently:

• Chrome treats it as a layout table (Chromium computer role: Null, Chrome exposed role: LayoutTable).
• Safari treats it as a generic element (Role: No matching ARIA role).
• Firefox still recognizes it as a table (Role: Table).

This inconsistency can create challenges for implementors implementing rules like ARIA in HTML, as it affects how table rules and related rules for descendant elements are applied.

It may be beneficial to clearly specify in the standards how user agents should handle tables without headers to ensure consistency.

[spectranaut]

Discussed for a bit in triage at today's meeting: https://www.w3.org/2024/09/05-aria-minutes#t01

[aleventhal]

WebKit's IsDataTable impl: https://github.com/WebKit/WebKit/blob/main/Source/WebCore/accessibility/AccessibilityTable.cpp#L130

Blink's IsDataTable() impl: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/modules/accessibility/ax_node_object.cc;l=1600

[aleventhal]

TBH anyone can do the work to compile the list of rules in each system for comparison since the code is heavily commented.

[fstrr]

I mentioned this What Even Is A Table presentation, from State Of The Browser 5 conference back in 2015, in this week's call. All the conference videos aren't online anymore, but I luckily took notes before the videos were removed. This was the list of findings, which may not be accurate anymore for the browsers that still exist, but do paint a picture of the complexity of browsers trying to decide whether a table is for layout or data:

• A table with no headers and one row isn’t classed as a table by IE, Chrome, or Safari
• A table with no headers, one row, and a summary is classed as a table by Chrome and Safari but not IE
• A table with no headers and two rows is classed as a table in IE
• A table with no headers but with a border:bottom on the table cells is classed as a table in all browsers
• A table with no headers but with a background-color on the table cells is classed as a table in all browsers
• A table with no headers, with a background-color on the table cells and border-collapse:collapse on the table isn’t classed as a table in Chrome or Safari
• A table with no headers and 20 rows is classed as a table in IE, Chrome, and Safari
• A table with headers and one row is classed as a table by all browsers
• A table with headers but set to display:block isn’t classed as a table in Chrome or Safari

[fstrr]

Mmm. Looks like @aleventhal's links are probably more useful, although we're both missing Firefox. I've had a look in the Gecko-Dev repo, but nothing obvious jumped out at me.

[jnurthen]

@fstrr is it this? https://github.com/mozilla/gecko-dev/blob/d0bb241361ffcdab8fa82009c8645e26733bd1ef/accessible/html/HTMLTableAccessible.cpp#L422

[aleventhal]

@fstrr is it this? https://github.com/mozilla/gecko-dev/blob/d0bb241361ffcdab8fa82009c8645e26733bd1ef/accessible/html/HTMLTableAccessible.cpp#L422

That's it.

[fstrr]

@jnurthen yup! Nice :)

[scottaohara]

related - https://github.com/w3c/html-aam/issues/293

[kerlysboordank]

Creating a paragraph without using table headers can be an effective way to present information in a more narrative style. For instance, if you want to convey data about various fruits, you might say:

"Apples are rich in fiber and vitamin C, making them a popular choice for a healthy snack. Bananas, known for their potassium content, provide table tops canada quick energy and are great for athletes. Oranges are celebrated for their high vitamin C levels and refreshing taste, often enjoyed as juice