WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Interactive Components in Table Headings

for

From: Jonathan Cohn
Date: Jun 3, 2018 4:06PM

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