WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Column headers are not navigable in grid

for

From: Bryan Garaventa
Date: Dec 16, 2017 4:56PM

Hi,
Personally I recommend doing something like the following if you have dedicated clickable icons within each of the sortable column headers.

<th aria-sort="ascending">
<span id="c1name">Column Name</span>
<span class="clickableSortIcon" tabindex="0" role="button" aria-label="Sort Column" aria-describedby="c1name" ></span>
</th>

You would need to toggle aria-sort accordingly, and this ensures that all of the sortable icons are focusable, include a valid role for screen reader users, and set both the Name and Description properties accordingly to ensure that all unique and relevant data is conveyed when arrowing in the virtual buffer or when tabbing using something like applications mode.

You will also need to ensure that the clickable element includes a redundant keyDown handler that performs the same action as click, preferably recognizing both the Enter and Spacebar keystrokes. The reasons for this are fully described in the section at
http://whatsock.com/training/#hd31

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 Jonathan Cohn
Sent: Saturday, December 16, 2017 2:31 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Column headers are not navigable in grid

Well, if you have the ability to sort by a column then there needs to be a keyboard accessible way of doing this. Either adding tab stops to the column headers and some way of speaking the sorted column or perhaps selection list to pick sort order and direction. I find implementations that have adjacent controls available to control sort order and items to be displayed can be clearer to understand.


Also, although non-keyboard users will depend heavily on tab keys, remember that blind individuals have functions to jump directly to your grid and navigate in any direction they prefer.

As I have not directly seen your implementation style at work, I was hoping that one of the regulars would answer your question.

Best wishes,

Jonathan Cohn



> On Dec 14, 2017, at 11:07 PM, Vemaarapu Venkatesh < <EMAIL REMOVED> > wrote:
>
> Hi all, Greetings!
>
> I have a data grid in my application and when user tabs to this grid
> focus lands on the second row directly. The first row as usual
> contains column headers and users can't navigate there with arrow keys
> but column headers are associated with remaining data cells
> accordingly. So from second row if user navigates with arrow keys
> screen readers announces associated column headers for the focused
> data cells. Will that impact someone if focus doesn't move to row with column headers?
>
> If this doesn't impact, the other concern is the app too have a sort
> icon for the name column header where users can sort the names in
> ascending and descending orders. As focus doesn't move to column
> headers unable to access that sort icon. I tried interacting with that
> using NVDA object navigation keys but surprisingly that sort icon
> seems to be accessible with mouse alone but not keyboard accessible.
> What can be the best approach to make this sort functionality accessible?
>
> Thanks,
> Venkatesh
> > > archives at http://webaim.org/discussion/archives
>