WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Interactive Components in Table Headings

for

From: Wolfgang Berndorfer
Date: Jun 4, 2018 3:35PM

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