WebAIM - Web Accessibility In Mind

E-mail List Archives

Interactive Components in Table Headings

for

From: Wolfgang Berndorfer
Date: Jun 3, 2018 12:08PM

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