WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table with hidden first column

for

From: Birkir R. Gunnarsson
Date: Oct 29, 2018 11:28AM

Appreciate the thought but I think it is not a good design decision.
If you do not make the cells in that column header cells their content
is not announced by screen reader users unless they navigate to that
column.
Keep them as plain <td> cells, not <th> you can make any other column
in the table into row header cells if you want and screen readers will
announce those cells as row headers for any columns to the right of
that column (not to the left).
Do not use role="presentation" on the <td> cells, it wil break the
whole table construct.
It's the equivalent of putting a <div> or <span> cell directly inside
a <tr> cell, which is invalid table semantics (<tr> cells can only own
<td> or <th> cells).
If you put aria-hidden directly on a <td> or <th> cell you have a
similar problem, the cells in the row are one fewer than the cells in
the header, and that is a malformed table.

Both will cause many screen readers to shift the column header
association by one and announcing the wrong column headers.
I'd recommend leaving the numbers there and visible, the benefits of
hiding them are not outweighed by the otential risks of maintaining
two separate interfaces, a visual and a non-visual.
You could use Glen's suggestion and put spans with aria-hidden inside
the next column,but I'm not sure if screen readers would honor that,
that requires additional testing.


On 10/29/18, glen walker < <EMAIL REMOVED> > wrote:
>> Aria-hidden is still counting the column although not announcing content
> for NVDA and VoiceOver.
>
> No, because there isn't a column to count. I suggested not having a column
> for the row number but putting it in the real first column instead
> (employee name in your example) but hiding the row number text with
> aria-hidden. Perhaps my code example wasn't clear since I only had one
> line of code.
> > > > >


--
Work hard. Have fun. Make history.