E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 17 (In chronological order)

From: R.U. Steinberg
Date: Mon, Oct 29 2018 8:32AM
Subject: Table with hidden first column
No previous message | Next message →

I have a table where visually I want to display a first column with row
numbers. At the same time, I want to hide that column from screen readers.
I don't even want screen readers to announce it in its count of the number
of columns. Is there a method that will work for JAWS, NVDA, and VoiceOver?

JAWS likes aria-hidden="true" but not other screen readers.

https://codepen.io/rusteinberg/pen/MPRrQE

From: Isabel Holdsworth
Date: Mon, Oct 29 2018 8:43AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

Would role="presentation" work?

Just out of interest, could it cause confusion if you hide some visual
information from screenreaders if, for example, a screenreader user is
collaborating with someone who can see the screen?

On 29/10/2018, R.U. Steinberg < = EMAIL ADDRESS REMOVED = > wrote:
> I have a table where visually I want to display a first column with row
> numbers. At the same time, I want to hide that column from screen readers.
> I don't even want screen readers to announce it in its count of the number
> of columns. Is there a method that will work for JAWS, NVDA, and VoiceOver?
>
> JAWS likes aria-hidden="true" but not other screen readers.
>
> https://codepen.io/rusteinberg/pen/MPRrQE
> > > > >

From: Jonathan Avila
Date: Mon, Oct 29 2018 8:45AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

> Would role="presentation" work?

Role presentation does not hide content from screen readers but instead hides the semantic meaning behind the information -- basically just exposing the text and not the structure.

Jonathan

Jonathan Avila, CPWA
Chief Accessibility Officer
Level Access
= EMAIL ADDRESS REMOVED =
703.637.8957 office

Visit us online:
Website | Twitter | Facebook | LinkedIn | Blog

Looking to boost your accessibility knowledge? Check out our free webinars!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

From: R.U. Steinberg
Date: Mon, Oct 29 2018 8:53AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

I will give it a try. Thank you.

Isabel, my thought is screen readers announce the row numbers already.

On Mon, Oct 29, 2018 at 9:45 AM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> > Would role="presentation" work?
>
> Role presentation does not hide content from screen readers but instead
> hides the semantic meaning behind the information -- basically just
> exposing the text and not the structure.
>
> Jonathan
>
> Jonathan Avila, CPWA
> Chief Accessibility Officer
> Level Access
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 office
>
> Visit us online:
> Website | Twitter | Facebook | LinkedIn | Blog
>
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination,
> distribution or copying of this communication is strictly prohibited.
>
>

From: Jared Smith
Date: Mon, Oct 29 2018 9:08AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

Why would you want to do this? If the content is useful visually, wouldn't
it be useful to screen reader users?

Most screen reader users have some vision. It could be very confusing and
frustrating to see something on screen that you can't explore or read with
your screen reader. The intent of accessibility is equivalence - and this
would inherently create a different experience for different users.

I don't think there's a useful way to do this that would work across
various browsers anyway.

Thanks,

Jared

From: Don Mauck
Date: Mon, Oct 29 2018 9:21AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

Are you wanting to use that hidden column as your row header? I can tell that using a row number as a row header would drive screen reader users, crazy. Developers here tried that and I got so many complaints that I'm having UIX teams rethink that. The other question I have is what does the visual user see?

From: R.U. Steinberg
Date: Mon, Oct 29 2018 9:49AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

Don, imagine this is a table with hundreds of rows, like a list of names or
accounts. The row number would obviously be a good visual queue. I was just
thinking if a screen reader was already telling users what row they're on,
would I need a column dedicated to just the row number?

If I was navigating an Excel spreadsheet, I'd know through screen reader I
if I was in the A column, that's the first column. Visually you can see the
row numbers. As I down arrow in column A, screen readers will tell you what
cell you're in, but do they announce that cell A100 is row 100?

Just trying to see if I can replicate that sort of user experience for an
HTML table.

On Mon, Oct 29, 2018 at 10:21 AM Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:

> Are you wanting to use that hidden column as your row header? I can tell
> that using a row number as a row header would drive screen reader users,
> crazy. Developers here tried that and I got so many complaints that I'm
> having UIX teams rethink that. The other question I have is what does the
> visual user see?
>
>

From: Isabel Holdsworth
Date: Mon, Oct 29 2018 10:01AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

I would not hide the row number from screenreaders. Depending on how
the table is navigated using a keyboard, it's unlikely to get in the
way of screenreader users, and as Jared pointed out, leaving it there
offers an equivalent experience.

On 29/10/2018, R.U. Steinberg < = EMAIL ADDRESS REMOVED = > wrote:
> Don, imagine this is a table with hundreds of rows, like a list of names or
> accounts. The row number would obviously be a good visual queue. I was just
> thinking if a screen reader was already telling users what row they're on,
> would I need a column dedicated to just the row number?
>
> If I was navigating an Excel spreadsheet, I'd know through screen reader I
> if I was in the A column, that's the first column. Visually you can see the
> row numbers. As I down arrow in column A, screen readers will tell you what
> cell you're in, but do they announce that cell A100 is row 100?
>
> Just trying to see if I can replicate that sort of user experience for an
> HTML table.
>
> On Mon, Oct 29, 2018 at 10:21 AM Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Are you wanting to use that hidden column as your row header? I can tell
>> that using a row number as a row header would drive screen reader users,
>> crazy. Developers here tried that and I got so many complaints that I'm
>> having UIX teams rethink that. The other question I have is what does the
>> visual user see?
>>
>>

From: glen walker
Date: Mon, Oct 29 2018 10:01AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

An alternate solution is to *not* have a hidden column but rather
aria-hidden text that you put in the first real column. So you'd have
something like

<td><span aria-hidden="true">1</span> fred</td>

You could visually style the number any way you want and it would appear
next to the employee name but not be read by a screen reader.

I agree with Jared (and probably most people on this list) that, in
general, any info that is good for visual users is also good for AT users
and you don't want to hide it. But tables are kind of special since AT can
read the row and column you are on without having a visual clue. By adding
the visual clue, you then get repeated info for AT.

I typically turn off the row/column numbers read by AT because I just want
to hear the row/column headers.

Glen

From: R.U. Steinberg
Date: Mon, Oct 29 2018 10:29AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

Aria-hidden is still counting the column although not announcing content
for NVDA and VoiceOver.

Another reason for doing this is the header row will always be counted as
row 1.

So if I am on a row marked 148, visually I am on that row but screenreader
will say I'm on row 149. The visual row number will always be off by one
row with screenreader.


On Mon, Oct 29, 2018 at 11:03 AM glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> An alternate solution is to *not* have a hidden column but rather
> aria-hidden text that you put in the first real column. So you'd have
> something like
>
> <td><span aria-hidden="true">1</span> fred</td>
>
> You could visually style the number any way you want and it would appear
> next to the employee name but not be read by a screen reader.
>
> I agree with Jared (and probably most people on this list) that, in
> general, any info that is good for visual users is also good for AT users
> and you don't want to hide it. But tables are kind of special since AT can
> read the row and column you are on without having a visual clue. By adding
> the visual clue, you then get repeated info for AT.
>
> I typically turn off the row/column numbers read by AT because I just want
> to hear the row/column headers.
>
> Glen
> > > > >

From: glen walker
Date: Mon, Oct 29 2018 10:34AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

> 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.

From: Birkir R. Gunnarsson
Date: Mon, Oct 29 2018 11:28AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

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 ADDRESS 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.

From: Mohith BP
Date: Tue, Oct 30 2018 5:06AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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.
> > > > >

From: R.U. Steinberg
Date: Wed, Nov 07 2018 10:32AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

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


On Mon, Oct 29, 2018 at 11:29 AM R.U. Steinberg < = EMAIL ADDRESS REMOVED = >
wrote:

> Aria-hidden is still counting the column although not announcing content
> for NVDA and VoiceOver.
>
> Another reason for doing this is the header row will always be counted as
> row 1.
>
> So if I am on a row marked 148, visually I am on that row but screenreader
> will say I'm on row 149. The visual row number will always be off by one
> row with screenreader.
>
>
> On Mon, Oct 29, 2018 at 11:03 AM glen walker < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> An alternate solution is to *not* have a hidden column but rather
>> aria-hidden text that you put in the first real column. So you'd have
>> something like
>>
>> <td><span aria-hidden="true">1</span> fred</td>
>>
>> You could visually style the number any way you want and it would appear
>> next to the employee name but not be read by a screen reader.
>>
>> I agree with Jared (and probably most people on this list) that, in
>> general, any info that is good for visual users is also good for AT users
>> and you don't want to hide it. But tables are kind of special since AT
>> can
>> read the row and column you are on without having a visual clue. By
>> adding
>> the visual clue, you then get repeated info for AT.
>>
>> I typically turn off the row/column numbers read by AT because I just want
>> to hear the row/column headers.
>>
>> Glen
>> >> >> >> >>
>

From: glen walker
Date: Wed, Nov 07 2018 11:18AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

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 ADDRESS 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
>
>
>

From: R.U. Steinberg
Date: Thu, Nov 08 2018 8:24AM
Subject: Re: Table with hidden first column
← Previous message | Next message →

Glen, thanks for the report. I will give it a try.

On Wed, Nov 7, 2018 at 12:20 PM glen walker < = EMAIL ADDRESS 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 ADDRESS 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
> >
> >
> >
> > > > >

From: Isabel Holdsworth
Date: Thu, Nov 08 2018 10:55PM
Subject: Re: Table with hidden first column
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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 ADDRESS 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
>> >
>> >
>> >
>> >> >> >> >>
> > > > >