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