WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Interactive Components in Table Headings

for

From: Birkir R. Gunnarsson
Date: Jun 3, 2018 7:16PM

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