3

We are documenting tabbing navigation standards around forms with expand/collapse sections.

  1. Should tabbing through an open section subsequently open and tab through a closed section?

  2. Is there a keyboard shortcut for opening and closing (expanding and collapsing) these headers?

These sections contain a variety of editable and non-editable fields, as well as potentially disabled and read only statuses, FWIW; editable data will be saved at the form level, not the individual section level.

Thanks!

enter image description here

4

I would expect tabbing to an unopened section to give focus to the header (or its +/- widget - or both) and then press enter or space to perform the expansion/collapse of the section.

This would match non-keyboard based navigation e.g. the pressing of space/enter would be the equivalent of clicking the control with the mouse button or on a touch screen. In keyboard navigation, focussing on a control should not imply invoking any additional interaction with that component.

When tabbing from a collapsed header, focus should be given to the next header, and not automatically expand the section. Otherwise, you're forcing the user to tab through the entire form which means keyboard navigation to skip over a section is not possible (or not obvious if there's another way).

  • 1
    Good answer. You (OP) have obviously decided that presenting the form in expanding sections is a good way to reduce the perceived complexity. That's a benefit to keyboard users too. – Matt Obee Oct 10 '12 at 21:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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