Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Proposal for 1 TAB per chart keyboard navigation #6886
The current keyboard navigation pattern offered by the accessibility module is the following:
While this approach does provide flexibility for keyboard navigation, I have seen some issues on dashboard-like pages, which have many complex charts. In this case, the user really needs many tab stops to traverse the page.
I understand that there is a possibility to use landmark or heading navigation to skip over a chart with many points, but these shortcuts only work if a screen reader is ON. Users which use only the keyboard, and no screen readers will still have issues tabbing through tens or hundreds of chart elements.
I propose adding an alternative keyboard navigation mode to the accessibility module. This mode can be toggled through a setting in the
The behavior for all states of the new setting:
What do you think about the idea? I tried the explained changes in a project, and then tested in JAWS + IE11 and Narrator + Microsoft Edge. I can also test on more configurations, even mobile VoiceOver and TalkBack (for mobile, we would mostly check the effects of
I can open a PR with the proposal, but I wanted to see how the idea is received.
@bvancea Thank you for your suggestion and detailed proposal. I like the idea of letting tabs for points be optional, and will add this functionality shortly. There is already a
added a commit
Jun 23, 2017
I added an option
Still keeping this open until we have clarified the role="application" issue.
@oysteinmoseng Thank you for the detailed explanation and for the quick response! I had a look at your changes and examples, they look great!
However, after your comment, I understand the adding
In the meantime, changes looks great, so I am fine with resolving the issue in the current state.
It's strange to have both tab and arrow keys do navigation through the same chart elements, so I'm excited to see this new option that makes charts act a little more closely to something like radio button groups where you use arrows to move between options and tabbing moves between groups.
@oysteinmoseng I'm encountering some unexpected navigation issues with relation to legends in a few places after trying out the new option.
An ask I have is to change how users reach and navigate legend items as well.
I think it would make most sense for tabbing to go through the following ordering in my example:
Arrows would then be used to walk through each "group" where the chart itself is a group, the legend items are a group, etc. This would make it very easy for a keyboard user to tab past the entire chart or navigate to particular components they care about, such as the legend, without having to make their way through hundreds of points in a chart.
It would also fix the scenarios I listed above by keeping arrow navigation among legend items and the chart items separated.