E-mail List Archives

Search E-mail List Archives for

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

From: Wolfgang Berndorfer
Date: Sun, Jun 03 2018 12:08PM
Subject: Interactive Components in Table Headings
No previous message | Next message →

Hi friends of tricky issues,



0. Short:



How to make hidden components focusable . or find a better way to make
checkboxes usable for screen reader in table headings.



1. The Situation:

Given a table e.g. with search results and a checkbox in the first column to
select the line with a singular result.

The column contains a <th> with a checkbox to select all search results in
the table.



2. The Problem:

A screen reader might announce something like this, when entering the first
column in a row for a singular search result:

"select all checkbox not activated select [result title]"

"select all" is announced first as <th> for the cell. This texting might
affect SC 2.4.6 and 2.4.10, definitively it affects the usability for screen
reader users.

So how to keep the functionality AND improve the usability for screen reader
& all?



3. My Non-Solution

a) The column should get a significant text before the interactive component
like "Select".

b1) The checkbox in the table heading to select all results gets
aria-hidden="true" as default. A screen reader would then announce "Select"
as heading text for a singular cell in the column.

b2) The checkbox in the table heading to select all results gets
aria-hidden="false" when it gets the focus and is therefore ready to
interact via screen reader.



There is just the small problem that the checkbox in the column heading
won't ever get focus, when it's hidden via ARIA.



Thanks for thoughts and solutions!



Wolfgang

From: Jonathan Cohn
Date: Sun, Jun 03 2018 4:06PM
Subject: Re: Interactive Components in Table Headings
← Previous message | Next message →

I see two issues with your solution.

1. Focusable items should not be hidden from the accessible tree.
2. As you mentioned then there is no way to do a select all.

Possible solutions:
.1. Do as Gmail does and move select all outside the table.
2. Don't mark it up with a TH tag.

Other things you will need to make sure about with first column check box tables:
1. Make sure your checkboxes have appropriate labels so that users know what they are checking.
2. If your table is quite large think about how many clicks would be required to move beyond the table / how users will act on the selected items.

Jonathan

> On Jun 3, 2018, at 2:08 PM, Wolfgang Berndorfer < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi friends of tricky issues,
>
>
>
> 0. Short:
>
>
>
> How to make hidden components focusable . or find a better way to make
> checkboxes usable for screen reader in table headings.
>
>
>
> 1. The Situation:
>
> Given a table e.g. with search results and a checkbox in the first column to
> select the line with a singular result.
>
> The column contains a <th> with a checkbox to select all search results in
> the table.
>
>
>
> 2. The Problem:
>
> A screen reader might announce something like this, when entering the first
> column in a row for a singular search result:
>
> "select all checkbox not activated select [result title]"
>
> "select all" is announced first as <th> for the cell. This texting might
> affect SC 2.4.6 and 2.4.10, definitively it affects the usability for screen
> reader users.
>
> So how to keep the functionality AND improve the usability for screen reader
> & all?
>
>
>
> 3. My Non-Solution
>
> a) The column should get a significant text before the interactive component
> like "Select".
>
> b1) The checkbox in the table heading to select all results gets
> aria-hidden="true" as default. A screen reader would then announce "Select"
> as heading text for a singular cell in the column.
>
> b2) The checkbox in the table heading to select all results gets
> aria-hidden="false" when it gets the focus and is therefore ready to
> interact via screen reader.
>
>
>
> There is just the small problem that the checkbox in the column heading
> won't ever get focus, when it's hidden via ARIA.
>
>
>
> Thanks for thoughts and solutions!
>
>
>
> Wolfgang
>
> > > >

From: Birkir R. Gunnarsson
Date: Sun, Jun 03 2018 7:16PM
Subject: Re: Interactive Components in Table Headings
← Previous message | Next message →

Agreed.
Don´t make the cells in the fist colum a <th>, none of them. Use
aria-label on the fist checkbox something like "select all".
<td<input type="checkbox" aria-label="select all"></td>
For the other checkboxes you can use aria-labelledby to tie them with
the values in the second column (I would markt hhose values as <th) if
you can assign a unique id to each value. Of course it would be better
to use a "select' button element in the rightmost column of the table
with aria-label="select", assuming there are <th> cells in the row to
give the additional context.

If neither are possible, just use aria-label="select".
The table markup gives the user enough context to figure out what
he/she is selecting.
I would not worry about a AAA requirement like 2.4.10, just make sure
your table and labels are clear enough.



On 6/3/18, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
> I see two issues with your solution.
>
> 1. Focusable items should not be hidden from the accessible tree.
> 2. As you mentioned then there is no way to do a select all.
>
> Possible solutions:
> .1. Do as Gmail does and move select all outside the table.
> 2. Don't mark it up with a TH tag.
>
> Other things you will need to make sure about with first column check box
> tables:
> 1. Make sure your checkboxes have appropriate labels so that users know what
> they are checking.
> 2. If your table is quite large think about how many clicks would be
> required to move beyond the table / how users will act on the selected
> items.
>
> Jonathan
>
>> On Jun 3, 2018, at 2:08 PM, Wolfgang Berndorfer
>> < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Hi friends of tricky issues,
>>
>>
>>
>> 0. Short:
>>
>>
>>
>> How to make hidden components focusable . or find a better way to make
>> checkboxes usable for screen reader in table headings.
>>
>>
>>
>> 1. The Situation:
>>
>> Given a table e.g. with search results and a checkbox in the first column
>> to
>> select the line with a singular result.
>>
>> The column contains a <th> with a checkbox to select all search results in
>> the table.
>>
>>
>>
>> 2. The Problem:
>>
>> A screen reader might announce something like this, when entering the
>> first
>> column in a row for a singular search result:
>>
>> "select all checkbox not activated select [result title]"
>>
>> "select all" is announced first as <th> for the cell. This texting might
>> affect SC 2.4.6 and 2.4.10, definitively it affects the usability for
>> screen
>> reader users.
>>
>> So how to keep the functionality AND improve the usability for screen
>> reader
>> & all?
>>
>>
>>
>> 3. My Non-Solution
>>
>> a) The column should get a significant text before the interactive
>> component
>> like "Select".
>>
>> b1) The checkbox in the table heading to select all results gets
>> aria-hidden="true" as default. A screen reader would then announce
>> "Select"
>> as heading text for a singular cell in the column.
>>
>> b2) The checkbox in the table heading to select all results gets
>> aria-hidden="false" when it gets the focus and is therefore ready to
>> interact via screen reader.
>>
>>
>>
>> There is just the small problem that the checkbox in the column heading
>> won't ever get focus, when it's hidden via ARIA.
>>
>>
>>
>> Thanks for thoughts and solutions!
>>
>>
>>
>> Wolfgang
>>
>> >> >> >> >
> > > > >


--
Work hard. Have fun. Make history.

From: Wolfgang Berndorfer
Date: Mon, Jun 04 2018 3:35PM
Subject: Re: Interactive Components in Table Headings
← Previous message | Next message →

Hi Jon,
You wrote:
> First column check box tables:
> Make sure your checkboxes have appropriate labels so that users know what
they are checking.
The Problem I mentioned is not the perceivability of Column headings, but
what screen readers announce as column heading of cells bellow, when they
get the virtual cursor.
Wolfgang
-----Ursprüngliche Nachricht-----
Von: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] Im Auftrag
von Jonathan Cohn
Gesendet: Montag, 04. Juni 2018 00:06
An: WebAIM Discussion List
Betreff: Re: [WebAIM] Interactive Components in Table Headings

I see two issues with your solution.

1. Focusable items should not be hidden from the accessible tree.
2. As you mentioned then there is no way to do a select all.

Possible solutions:
.1. Do as Gmail does and move select all outside the table.
2. Don’t mark it up with a TH tag.

Other things you will need to make sure about with first column check box
tables:
1. Make sure your checkboxes have appropriate labels so that users know what
they are checking.
2. If your table is quite large think about how many clicks would be
required to move beyond the table / how users will act on the selected
items.

Jonathan

> On Jun 3, 2018, at 2:08 PM, Wolfgang Berndorfer
< = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi friends of tricky issues,
>
>
>
> 0. Short:
>
>
>
> How to make hidden components focusable . or find a better way to make
> checkboxes usable for screen reader in table headings.
>
>
>
> 1. The Situation:
>
> Given a table e.g. with search results and a checkbox in the first column
to
> select the line with a singular result.
>
> The column contains a <th> with a checkbox to select all search results in
> the table.
>
>
>
> 2. The Problem:
>
> A screen reader might announce something like this, when entering the
first
> column in a row for a singular search result:
>
> "select all checkbox not activated select [result title]"
>
> "select all" is announced first as <th> for the cell. This texting might
> affect SC 2.4.6 and 2.4.10, definitively it affects the usability for
screen
> reader users.
>
> So how to keep the functionality AND improve the usability for screen
reader
> & all?
>
>
>
> 3. My Non-Solution
>
> a) The column should get a significant text before the interactive
component
> like "Select".
>
> b1) The checkbox in the table heading to select all results gets
> aria-hidden="true" as default. A screen reader would then announce
"Select"
> as heading text for a singular cell in the column.
>
> b2) The checkbox in the table heading to select all results gets
> aria-hidden="false" when it gets the focus and is therefore ready to
> interact via screen reader.
>
>
>
> There is just the small problem that the checkbox in the column heading
> won't ever get focus, when it's hidden via ARIA.
>
>
>
> Thanks for thoughts and solutions!
>
>
>
> Wolfgang
>
> > > >

From: Wolfgang Berndorfer
Date: Tue, Jun 05 2018 5:05AM
Subject: Re: Interactive Components in Table Headings
← Previous message | No next message

Hi Birkir,
Thanks for your solution, whitch is as simple as conclusive:
"Don't use <th> for a checkbox, if the checkbox is no column heading!"
I tested your proposal with Jaws and it worked as it should: No column
heading is spelled while using ALTGR + Arrow Left/Right.

Just one interesting observation, I found while testing:
If I just use aria-label to give the checkbox an accessible name, not only a
visible label is missing. (This could be solved unsactorily with
title="Select row"). Also the pointer area is reduced on the square of the
checkbox.
But if I implement a <label>-element, the whole cell is ready as pointer
area. This affects WCAG 2.1 SC 2.5.3 (Target Size) .
SC 2.5.3 is conformance AAA. But I recommend AAA standards, if they are
technically once and easily to realize. (i.e. no effort for everyday
publishing.)

Wolfgang
-----Ursprüngliche Nachricht-----
Von: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] Im Auftrag
von Birkir R. Gunnarsson
Gesendet: Montag, 04. Juni 2018 03:17
An: WebAIM Discussion List
Betreff: Re: [WebAIM] Interactive Components in Table Headings

Agreed.
Don´t make the cells in the fist colum a <th>, none of them. Use
aria-label on the fist checkbox something like "select all".
<td<input type="checkbox" aria-label="select all"></td>
For the other checkboxes you can use aria-labelledby to tie them with
the values in the second column (I would markt hhose values as <th) if
you can assign a unique id to each value. Of course it would be better
to use a "select' button element in the rightmost column of the table
with aria-label="select", assuming there are <th> cells in the row to
give the additional context.

If neither are possible, just use aria-label="select".
The table markup gives the user enough context to figure out what
he/she is selecting.
I would not worry about a AAA requirement like 2.4.10, just make sure
your table and labels are clear enough.



On 6/3/18, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
> I see two issues with your solution.
>
> 1. Focusable items should not be hidden from the accessible tree.
> 2. As you mentioned then there is no way to do a select all.
>
> Possible solutions:
> .1. Do as Gmail does and move select all outside the table.
> 2. Don’t mark it up with a TH tag.
>
> Other things you will need to make sure about with first column check box
> tables:
> 1. Make sure your checkboxes have appropriate labels so that users know
what
> they are checking.
> 2. If your table is quite large think about how many clicks would be
> required to move beyond the table / how users will act on the selected
> items.
>
> Jonathan
>
>> On Jun 3, 2018, at 2:08 PM, Wolfgang Berndorfer
>> < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Hi friends of tricky issues,
>>
>>
>>
>> 0. Short:
>>
>>
>>
>> How to make hidden components focusable . or find a better way to make
>> checkboxes usable for screen reader in table headings.
>>
>>
>>
>> 1. The Situation:
>>
>> Given a table e.g. with search results and a checkbox in the first column
>> to
>> select the line with a singular result.
>>
>> The column contains a <th> with a checkbox to select all search results
in
>> the table.
>>
>>
>>
>> 2. The Problem:
>>
>> A screen reader might announce something like this, when entering the
>> first
>> column in a row for a singular search result:
>>
>> "select all checkbox not activated select [result title]"
>>
>> "select all" is announced first as <th> for the cell. This texting might
>> affect SC 2.4.6 and 2.4.10, definitively it affects the usability for
>> screen
>> reader users.
>>
>> So how to keep the functionality AND improve the usability for screen
>> reader
>> & all?
>>
>>
>>
>> 3. My Non-Solution
>>
>> a) The column should get a significant text before the interactive
>> component
>> like "Select".
>>
>> b1) The checkbox in the table heading to select all results gets
>> aria-hidden="true" as default. A screen reader would then announce
>> "Select"
>> as heading text for a singular cell in the column.
>>
>> b2) The checkbox in the table heading to select all results gets
>> aria-hidden="false" when it gets the focus and is therefore ready to
>> interact via screen reader.
>>
>>
>>
>> There is just the small problem that the checkbox in the column heading
>> won't ever get focus, when it's hidden via ARIA.
>>
>>
>>
>> Thanks for thoughts and solutions!
>>
>>
>>
>> Wolfgang
>>
>> >> >> >> >
> > > > >


--
Work hard. Have fun. Make history.