WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table with hidden first column

for

From: glen walker
Date: Nov 7, 2018 11:18AM

Interesting solution. I guess you have to go with whichever solution you
feel is the least worst. You don't really have a case where there is a
"best" solution. You just have to minimize the confusion and know there
will be negatives will all solutions.

Neither NVDA nor VoiceOver will read the aria-label associated with your
<th>. With NVDA, it will feel like the first column is blank because every
cell in the first column will be heard as blank. VO will not let me
navigate to the first column because (I'm guessing) it sees the entire
contents of the cell as aria-hidden.

JAWS reads the aria-label so it sounds ok.

In my case, with NVDA, I turned off the table coordinates announcement so I
don't hear "row 1", "row 2", etc. I only like to hear the row or column
headers. With your solution, I don't hear any row headers as I navigate
vertically through a column (because they're aria-hidden), but perhaps the
onus is on me because I changed my default configuration.

I know your example code was just a sample, but in that case, I'd rather
have the name column used as the row headers. Have you thought about doing
that in your real code? Don't make the row number cell the row header but
use a column that has more meaning. A row header does not have to be the
first cell in the table row. That is, you can have:

<tr>
<td>1</td>
<th scope="row">Gerard</th>
<td>Roseville, CA</td>
<td>The Godfather</td>
</tr>

I think there is varying levels of support for row headers not being in the
first column. I haven't tested it on all platforms lately, but sometimes
the row header is ignored on columns that come before the row header
column, but it works fine for all the columns after the row header column.

You'd still have the issue when the user is navigating vertically through
the first column where they'd hear "5" and "row 6", but it's only an issue
when in that column. When they're in any other column, they'll hear the
name row header, the table cell value, and "row 5". They won't hear the
number you have in the first column.

Glen



On Wed, Nov 7, 2018 at 10:32 AM R.U. Steinberg < <EMAIL REMOVED> >
wrote:

> This was my workaround. We have a table where the first row is the header
> row and will be announced as row 1 to screen readers. When you get to the
> second row, it has a number 1 in front of it but will be announced as row
> 2. This is a confusing user experience when you have a table with say 100
> rows. A screen reader user shouldn't have to guess what row they are on.
>
> https://codepen.io/rusteinberg/pen/WYrogg
>
>
>