WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Interactive Components in Table Headings

for

From: Wolfgang Berndorfer
Date: Jun 5, 2018 5:05AM

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