E-mail List Archives
Thread: Column headers are not navigable in grid
Number of posts in this thread: 7 (In chronological order)
From: Vemaarapu Venkatesh
Date: Thu, Dec 14 2017 9:07PM
Subject: Column headers are not navigable in grid
No previous message | Next message →
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
From: Jonathan Cohn
Date: Sat, Dec 16 2017 3:30PM
Subject: Re: Column headers are not navigable in grid
← Previous message | Next message →
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 ADDRESS 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
> > > >
From: Bryan Garaventa
Date: Sat, Dec 16 2017 4:56PM
Subject: Re: Column headers are not navigable in grid
← Previous message | Next message →
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 ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com
From: Vemaarapu Venkatesh
Date: Wed, Dec 20 2017 12:33AM
Subject: Re: Column headers are not navigable in grid
← Previous message | Next message →
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
From: Jonathan Cohn
Date: Wed, Dec 20 2017 8:59AM
Subject: Re: Column headers are not navigable in grid
← Previous message | Next message →
Hello,
Accessibility is not a one shoe fits all type of problem. You need to look
at what services the grid is providing to the client and then determine the
optimal way to allow those with limited mobility and/or perception to
easily perform those functions. So depending on if rows are selectable,
items are editable and various other functionality you may or may not be
providing you can then start to build patterns of use.
If you unplug your mouse, can you perform the sort w/o hitting arrow keys
100 times? Can a blind person determine what is selected and what the sort
order is? Is it clear what the grid represents even when lost somewhere in
the middle of the grid?
It might be that you configure control-up and control-down to change the
sort order of your grid. The only problem with this is:
1. OS and screen readers often think control and arrow keys should be used
to move by sentence and paragraph.
2. How will your clients know that these keystrokes are available.
3. What happens for mobile.
These questions need to be answered by the person designing the User
Interface.
You might decide that sorting the table is not a significant use case, and
that you will delay fixing the fact that arrow keys won't allow you to
access the sort controls. Accessibility will usually be a compromise not
an absolute. So, you can look at Brian's sortable grid that was designed
with the ability that one can easily sort accessibly but if you have user
cases that conflict with his plug and play widgets then your designers will
need to determine an approach that is universal for your unique
environment.
On 20 December 2017 at 02:33, Vemaarapu Venkatesh <
= EMAIL ADDRESS REMOVED = > wrote:
> 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
> > > > >
From: Bryan Garaventa
Date: Wed, Dec 20 2017 9:55AM
Subject: Re: Column headers are not navigable in grid
← Previous message | Next message →
"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 ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com
From: Vemaarapu Venkatesh
Date: Thu, Dec 21 2017 8:56PM
Subject: Re: Column headers are not navigable in grid
← Previous message | No next message
Thank you so much for elaborating your thoughts. It will help me a lot.
Thanks,
Venkatesh