WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table cells with subheadings

for

From: glen walker
Date: May 26, 2023 7:59AM

The example page seems pretty straight forward. It's almost coded
correctly, in my opinion. There are multiple tables on the page with each
table preceded by an H3 heading, kind of like a <caption>, so it's easy to
find each table along with it's description.

Inside of the cells, there visually appears to be headings but they are
just paragraph tags, <p>, with a classname of "h4" or "h5". Someone went to
the trouble of naming the CSS classes as if they were heading elements but
didn't actually use heading elements. Real <h4> and <h5> should be used.

Once you have real headings in the cells, if you navigate by heading ('H'
key with NVDA/JAWS or using the rotor on iOS), it's difficult to tell when
you hear a heading in a new cell. However, if you navigate the table cell
by cell (ctrl+alt+arrowkey), you hear the column header and then all the
cell contents, including each heading (which is sometimes a lot).

So it's possible to navigate and hear the structure in the cell, if you use
real headings in the cells. Is it easy to understand? That's a difficult
question to answer without real usability tests.