WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jonathan Avila
Date: Dec 8, 2014 9:11AM

> 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.

In my opinion these situations can be confusing but sometimes helpful. As long as they are consistent they wouldn't appear to be accessibility violations. A common example of reading order that doesn't match the visual order is Wikipedia -- on that site the main content is first in the reading order despite content to the left and above it. One additional group that this is confusing for is people with low vision who may use text-to-speech but can see the page.

Jonathan

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of MEJ - Beth Sullivan
Sent: Monday, December 08, 2014 11:04 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Meaningful Sequences for "Back" and "Continue" on Wizards

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