TL;DR: Is there a recommended best practice to make keyboard navigation through an undirected graph accessible for visually impaired people?
I am currently working on an HTML based application that displays an undirected graph of buttons. Buttons are all contained in one div container. The paths that connect buttons visually are in a different container and are not relevant here, but the information that they transport about adjacency, of course. Each button can be used to trigger some action. I now wonder how I could make keyboard navigation accessible for visually impaired people.
Without any special treatment, a user would simply tab through all buttons. Information about adjacent buttons could, of course, be given via ARIA descriptions, but direct navigation to a specific neighboring button would not be possible. One would need to remember the label of the button and tab until it's found. That doesn't feel too user friendly.
I have browsed common ARIA patterns and ARIA roles, but none does really seem to fit my purpose - I'd end up dynamically creating and restructuring treeviews or (tab)lists or worse with all kind of pitfalls probably.
Currently, my best idea is to simply use the application role for the buttons' div container with some custom keyboard commands to navigate. Navigation instructions would be announced via screen readers, of course. This could for instance mean: tab to enter/exit the application div and focus the entry button/previously selected button, arrow keys to cycle through the currently focused button's neighbors and the button itself announcing each label, and space/enter on the button would trigger the button's action and space/enter on a neighbor would make this the newly selected button.
That sounds feasible to me, but I wonder if there already is some best practice for this problem that I did not find myself.
