WebAIM - Web Accessibility In Mind

E-mail List Archives

Meaningful Sequences for "Back" and "Continue" on Wizards

for

From: MEJ - Beth Sullivan
Date: Dec 8, 2014 9:03AM

Hello everyone,

On the application I have been working on often the structure of the screen
is a wizard with the Back button on the bottom left and the Continue button
on the bottom right:

Example:
Text paragraph or Form
"Back" Button on the bottom left - "Continue" Button on the bottom right

The pattern that has been established before I received the project is you
for from the text paragraph or form, if you are tabbing or using a screen
reader you go to the "Continue" Button on the bottom right (focus does go
here properly) then to the "Back" Button on the bottom left.

In my opinion this seems off, but most of the people that I talk to don't
see this as a big issue since the business wants the user to see the
"Continue" button as the default button.

Doing some research simply from the UX perspective
http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/
I like the idea of someone knowing all of their options and optimizing the
flow. I also feel like keeping the reading and tabbing order should be
consistent. And from my understanding people often read from the left to
the right, meaning the tabbing order should be "Back" button then the
"Continue" button.

My other concerns are - What if the UI team has a form in the wizard that
needs to add a "Clear Form" button? Sometime when they do that, visually it
turns into:

"Back" Button on the bottom left - some space - "Clear Form" Button to the
left of the "Continue" Button, both on the bottom right.

Then what should the order be? I've seen development split out the tab
order as
"Clear Form", "Continue", "Cancel" or "Continue", "Clear Form", "Cancel".

There is another factor that is a large product that has many development
teams and getting beyond the basic accessibility rules seems to be hard to
remember organization wide, which makes me think making up exceptions is
just going to complicate the process overall and for future developers. My
thoughts are that it should be "Cancel", "Clear Form", "Continue".


But then again this is a wizard, where a user is looking to advance through
the steps, maybe having the "Continue" button be first is important for the
flow of AT users?

Also what is the actually affect on different AT users? If the buttons are
named properly, if focus management and visual focus is there, is there an
actual issue?

Does anyone have any experience with an AT that finds tabbing order not
matching the reading order to be a BIG issue for getting through a wizard
where there is step 1, 2, ..., n ?

I could imagine if there was a cognitive issue and motor skill issue the
user might have some issues but not barriers getting to the end task.

My goals are to make sure there is a simple and consistent development
process for accessibility coding and ensuring as many AT users as possible
can get to the end of task.

I've very curious to hear people's experience with different AT users and
the barriers they have faced with these wizards and button reading order
(not just the rules of WCAG themselves.)

Also do people have different patterns for these Wizards vs.
"Cancel"/"Confirm" buttons for delete dialogs?

Thank you,

Beth