0

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.

matrix of radio buttons

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:

row-by-row tab order

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:

enter image description here

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?

Improve this question

1 Answer 1

Reset to default
2

  1. I agree with you that your suggested tab order is better than the default.

  2. Best way forward is to test what way the matrix makes more sense to people. I for one and the person next to me where a bit confused by the current layout and would prefer to swap the axis, which would also solve your tab problem. Additionaly I would remove half the lines so you create groups (rows or columns) rather than a gird (which is irrelevant in your context). Key is to test this with a few people and see what feedback you get.

Improve this answer
1
  • Thank you. Your answer agrees with other replies I received on Twitter. FYI, the lines are just there because I quickly created some wireframe images to illustrate the question. The final design will be different, but I think it is a good idea to visually emphasize the radio groups.
    – marcvangend
    Oct 7, 2019 at 7:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.