WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table with hidden first column

for

From: Mohith BP
Date: Oct 30, 2018 5:06AM

Hi,

I agree with Birkir's suggestion.
Keep the column as it is and make the appropriate column as row header
with the <th> tag.


Thanks & Regards,
Mohith B. P.

On 10/29/18, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
> 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.
> > > > >