Search code examples
formsdatepickeraccessibility

Are several form fields in one row ever good accessibility?

I understand multi-column forms are to be avoided and why it is bad for usability and accessibility. My question instead regards placing 2-3 connected form elements next to each other. For example text fields for "First name" and "Last name", checkboxes "Yes" and "No" and datepickers for "Start date" and "End date".

Form with some form fields next to each other

Form with all fields stacked vertically

I have read that horizontal stacking is bad for accessibility (screen readers, screen magnifiers and keyboard users) and should therefore be avoided, but still, the exception for city, state and zip code is frequently mentioned. If placing elements next to each other caused barriers for some users, the rule would be to always avoid it, right? Why allow for exceptions? Is the problem maybe rather that accessibility measures needed in those cases are overlooked?

In my current project I've coded a web page with two date pickers next to each other and there is some problem with keyboard navigation. I am deciding whether to try and repair that or change to a completely vertical layout.

Are several form fields in one row a "no-no" with regards to accessibility or can it actually be good practice if it is motivated? If so, what adaptions need to be made to ensure the form is accessible?

Solution

  • It depends what "part" of accessibility you're referring to. There is accessibility conformance with regards to WCAG and there's accessibility usability.

    See my answer on this UX StackExchange question for a brief explanation on the difference between the two because if affects how your question can be answered.

    There is nothing in WCAG that says information should be stacked vertically or that horizontal layouts are bad. There is one guideline, 1.4.10 Reflow, that says when content is zoomed to 400% that the user should not have to scroll in both the horizontal and vertical directions, but that doesn't imply that a horizontal layout is bad.

    You mentioned screen readers having a hard time with horizontal layout. For a completely blind individual, the layout doesn't matter at all. They'll navigate with the screen reader to all the elements on the page no matter how they're laid out. In your first screenshot example, with the start and end date next to each other horizontally, an NVDA user can press F to go to the next form element, or E to go to the next <input> field, regardless of the layout.

    From a screen magnification perspective, horizontal layout doesn't really matter there either. The user can pan the magnifier left/right or up/down.

    Likewise for a keyboard user. They can tab to the next form element and if the element is off the screen (whether vertical or horizontal), the browser will scroll it back into view. If the fields are next to each other, it's not really a big deal to tab horizontally.

    So it really comes down to a usability issue. Are horizontal layouts bad for usability? I can't answer that because I focus on accessibility conformance. But here are two articles that mention horizontal layouts from a well-respected usability company:

    "I have read that horizontal stacking is bad for accessibility (screen readers, screen magnifiers and key board users) and should therefore be avoided,"

    Do you have any references for that?

    *Are several form fields in one row a "no-no" with regards to accessibility *

    No, it's not a "no no".

    what adaptions need to be made to ensure the form is accessible.

    Nothing specific to horizontal layouts but making forms accessible in general require

    • labeling the elements properly (typically with the <label> element or <fieldset>/<legend>)
      • WCAG 4.1.2
    • handling error conditions
      • WCAG 3.3.1
      • WCAG 4.1.3
    • providing instructions
      • WCAG 3.3.2

    There are many other WCAG checkpoints that apply to forms but those are the big ones.