I'm building an HTML form where the user can select one of three options for each day of the week. The wireframe proposed by the designer looks like this: a matrix of radio buttons, with columns for each week day and rows for each option.
I can understand why the designer chose to put the days are on the horizontal axis: It reduces the height of the matrix, and we are used to time being on the horizontal axis.
Of course it is no problem to make the radio buttons behave correctly. But I'm wondering how to set it up for maximum accessibility. Especially keyboard navigation is a concern here. The default tab order would be in order of the dom, row-by-row:
IMHO this default order does not make sense from a UX point of view. I think users would expect to choose an option for Monday and then proceed to Tuesday, Wednesday etc. In other words, column-by-column:
First question: Do you agree that in this design, the default tab order would result in bad UX for keyboard navigation?
Second question: What is the best way forward here? Find a fancy solution to make it work anyway? (Eg. a different DOM order with CSS grid positioning? Not tabindex anyway!) Or simply go back to the designer and ask them to pivot the matrix?