WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table with hidden first column

for

From: Isabel Holdsworth
Date: Nov 8, 2018 10:55PM

Glen's idea sounds like the best solution to me. Blind users will have
access to the record number if they need it, but the info isn't thrust
upon them. I wouldn't complicate things by using ARIA to hide any
content.

Cheers, Isabel

On 08/11/2018, R.U. Steinberg < <EMAIL REMOVED> > wrote:
> Glen, thanks for the report. I will give it a try.
>
> On Wed, Nov 7, 2018 at 12:20 PM glen walker < <EMAIL REMOVED> > wrote:
>
>> 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
>> >
>> >
>> >
>> >> >> >> >>
> > > > >