WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Column headers are not navigable in grid

for

From: Bryan Garaventa
Date: Dec 20, 2017 9:55AM


"Is that ok if arrow key navigation is not possible when focus is on column headers? Or instead of tab navigation the same arrow key navigation should be enable through column headers also."

Hi,
There is some leeway in how you implement this, so it is okay if you make the column header cells appear in the arrow key order, because the correct roles and states will be announced, however if you do this then you will need to set focus to the role="columnheader" nodes to ensure that it works correctly at present. At this time setting focus to embedded active elements as indicated in the ARIA APG 1.1 design pattern is not universally supported by screen readers, so it will likely cause unexpected issues if applied like this in production environments. It is still necessary to reference the column header cells using aria-describedby on the role="gridcell" nodes as well to ensure that the association is set properly and that these are announced correctly when arrowing between each cell.

If however you don't include the column header cells in the arrow key functionality, this is alright as long as you can shift+tab from the grid into these sortable column header elements in order to press Enter to activate them. The prior markup guidance I sent through will work well for making this type of implementation accessible.

Which ever method you choose, it's important to use the same paradigm across the site to ensure consistency.

All the best,
Bryan



Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Vemaarapu Venkatesh
Sent: Tuesday, December 19, 2017 11:33 PM
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] Column headers are not navigable in grid

Jonathan and Bryan, thank you so much for your valuable suggestions.


Let me describe the behavior in the other table where the sort is accessible. All the column headers in the first row is navigable with tab key where users can't arrow down/up or left/ right and the second column is having sort icon. Able to toggle it with enter key. But the concern is only after reaching row 2 arrow key navigation is possible in the table but not able to use arrow keys in row1. Is that ok if arrow key navigation is not possible when focus is on column headers? Or instead of tab navigation the same arrow key navigation should be enable through column headers also.

Thanks,
Venkatesh