Form Fields With No Clear Order

A tidy form that fills in the wrong order

A form laid out in two or three columns looks orderly on a wide monitor. Contact details on the left, the job in the middle, the extras on the right.

Then someone fills it in with the keyboard. They type a name, press Tab, and the cursor jumps to a field in the middle column instead of the one below.

A screen reader announces the fields in an order nobody chose. On a phone, the columns stack into one and the order changes again.

None of this shows up when the form is checked with a mouse, which is how most forms are checked.

How the order is decided

Browsers move from field to field in the order the fields appear in the page's code, not the order they appear on screen.

Usually those match. A form built as a table, with fields arranged row by row across the columns, sends the keyboard sideways while the eye reads down.

Styling can cause the same split. A field moved to a different spot on screen, without being moved in the code, keeps its old place in the sequence.

Screen readers follow the code order too. So does a phone's narrow layout, which stacks everything in the order it was written.

Developers sometimes patch the result with tab order numbers, an attribute that forces a sequence. It tends to break the first time someone adds a field.

Who gets the jumbled version

• Keyboard users, who move between fields with the Tab key.
• Screen reader users, who hear fields in code order.
• Screen magnifier users, who see one small area at a time.
• Phone users, when columns stack in an unexpected order.
• Fast typists who press Tab out of habit.

The third is the group designers rarely picture. Someone viewing the page at high magnification follows one column down, and may never see that a second column exists.

One column works for everyone

A single column gives one path from top to bottom. The eye, the Tab key and the screen reader all agree, and nobody has to decide whether to read across or down.

Labels sit above their fields, where they stay visible at any width. On a phone the layout is already right, so nothing reorders itself.

Short fields that belong together, such as a city and a postal code, can share a line, provided the order matches the way people say them.

Groups instead of columns

Long forms still need structure. The columns were doing that job, badly.

Break the form into groups with a short heading each: your details, the job, delivery. The groups give the eye the same sense of order without sending the keyboard sideways.

Developers can mark each group in the code so a screen reader announces its heading before the fields inside it. It costs a few lines of markup.

What the standard says

WCAG 2.0, the guidelines accessibility audits are based on, files this under two headings: meaningful sequence and focus order. Both are level A, the most basic level of the standard.

In plain terms, the order a page is read in, and the order the keyboard moves through it, must make sense. A form that jumps between columns fails both.

The standard also asks that the field with keyboard focus be visibly marked. Some designs remove that outline because it looks untidy, which leaves keyboard users guessing where they are.

A worked example

A label printer makes roll labels in short runs for food producers, breweries and cosmetics makers. Its quote form had three columns: contact details, the label itself, and how the labels should be wound on the roll.

The form was built as a table, row by row. Pressing Tab after the first name went to label width, then to quantity, and only then back to the last name.

Quote requests arrived with company names in the width box and phone numbers under labels per roll. Staff assumed customers were careless and phoned to check.

The rebuilt form is one column in three groups, each with a heading: about you, the label, the roll. The forced tab order numbers were taken out.

The unwind direction question, which had been a row of small diagrams, now has a sentence under each option, so it makes sense when read aloud.

Before it went live, it was tested with the keyboard alone and with the screen reader built into an iPhone.

Testing a form in five minutes

Put the mouse aside. Click once at the top of the page, then press Tab repeatedly and watch where the highlight goes.

Note every jump that surprises you, and whether you can always see which field is active. Press Shift and Tab together to go back up.

Then fill the form in on a phone. Screen readers come built into most devices, VoiceOver on iPhones and Macs and Narrator on Windows, and a few minutes with one is revealing.

What a developer changes

The code order is rewritten to match the visual order, and any forced tab order numbers come out. Columns become one column, grouped under headings.

The focus outline is restored if a design removed it, and the send button becomes the last stop, after every field.

Each label is tied to its own field in the code, so a screen reader announces the right label with the right box, and clicking a label puts the cursor where it belongs.

On most sites this is a modest job for each form, and the same changes make the form easier for everyone else.

The counter-case

A short form with a name, an email address and a message rarely has an order problem. There is only one sensible path through it.

Forms used only by trained staff, such as an internal order screen, can reasonably keep columns, since the people using them learn the layout once.

For any form the public fills in, though, a single column in a logical order is the layout that works for everyone.

Putting the order right

1. Tab through every form on the site.
2. Note each jump out of order.
3. Rebuild long forms as one column.
4. Group related fields under headings.
5. Remove forced tab order numbers.
6. Keep the focus outline visible.
7. Test again on a phone.

Step one is the test nobody runs. A form checked only with a mouse can be badly out of order for months without anyone in the business knowing.

What happens after someone gets a field wrong is covered in form errors shown only in red.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.