WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Meaningful Sequences for "Back" and "Continue"onWizards

for

From: Jonathan Avila
Date: Dec 17, 2014 6:31AM

> Luke found that people trying to complete a form were far more successful when he stacked the buttons at the bottom left of the page, with the primary action first.

I agree that stacking the buttons would be best so the reading order matches the visual order, however, I'm personally drawn to the bottom right rather than the bottom left because I've been trained that way over time with the paradigms that are used in Windows. Also, as I'm scanning the form reviewing it the buttons at the bottom right are immediately after the last part of the form that I scanned so it seems more natural to me -- but I'm sure others have differing opinions.

> but with CSS there's no reason it can't be a native button and look like a plain old link.)

Speech users may voice commands such as "click link" or "click button", thus, I would think the visual appearance of an interactive element should match the semantics to ensure access by the widest group of people.

Jonathan

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Cliff Tyllick
Sent: Tuesday, December 16, 2014 11:44 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Meaningful Sequences for "Back" and "Continue" on Wizards

Last year, I had to do extensive research on just this problem. Birkir, Lynn, and Deborah, your experiences are not just preferences. They are precisely the point, well supported by principles and research: Set your customer up for success, and then don't get in their way!
Instead of using a wizard, let's imagine your customer is actually moving through space. Shopping in a grocery store is a good example. Your customer goes around the store, adding every item on his list to his basket, and then makes his way to the checkout counter. After your wizard—the automated checkout—cheerily greets him, which of these actions should it take next:
- Start ringing up his purchases?
- Escort him out of the store—without his purchases and through the "In" door?
- Call a team of stockers to pounce upon him, grab everything in his cart, and race to put it back on the shelves?
No doubt you recognize that those are the options of "Continue," "Back," and "Reset." Put in this context, it's so silly that you would never consider the other options. Your customer probably came to the checkout counter to check out, and you would build the wizard to support that action. Your customer expects it, too. As Birkir said, "I do have a preference for the button I am most likely to use coming first in a set of navigation buttons."
In design patterns, that's called putting the primary action first. And that's the best approach for usability. If the primary action in your wizard is "Back" or, still worse, "Reset," then you know what that means, right? It means that your wizard is most likely to induce your customers to fail. If that turns out to be true, then you will have broken the trust they have put in you to make the difficult easier to do. You can even infer that trust from Deborah's comment: "I also tend to assume that the first button I reach by tabbing will be the one that moves me forward in the process."
Because she assumes that when she gets to the end of the page, your wizard will have helped her do everything right and will make her next step forward easy, too.
So earn that trust. Make success be the easiest thing to achieve with your wizard. At the end of a page, make "Continue" or any of its equivalents—"Submit," "Next," or whatever it might be—be the step your customers can take without having to think about what they are doing. Don't even consider doing anything other than putting it first.
Of course, the second thing should be the secondary action—most likely "Back," or something else that returns the customer to an earlier stage of the process. In other words, it's the step that your customer is next most likely to need to take.
And you're way ahead of me by now, but when there is still another action your customer might need to take, it's the tertiary action and should come third. Anything with consequences so dire that the customer would not want to be able to do it easily—"Reset," "Clear," "Cancel," or a comparable action—almost certainly falls into this category. It should be clear why. As Lynn said, finding out too late that she had hit "Reset" would "most likely … cause frustration."
I would put it somewhat more strongly.
You can further avoid causing frustration by meeting another of Deborah's preferences: Make the visual flow of the wizard match the tab order. There's good research behind that.
If you need more than a WebAIM contributor's say to convince someone this is so, a book called "Universal Principles of Design" shows that putting the primary action first is the best way to go. And Luke Wroblewski's book, "Web Form Design," clearly presents the results of his studies that show that your customers will be more successful with your wizard when you make the visual design match that flow. You can find the same study presented in one of Luke's blog posts.
Even on a Web page—as in a Web page displayed on a wide monitor—Luke found that people trying to complete a form were far more successful when he stacked the buttons at the bottom left of the page, with the primary action first. And he actually found that it was important to de-emphasize the secondary action, even to the point of making its button look like a link. (In his tests, the secondary action actually was a link, but with CSS there's no reason it can't be a native button and look like a plain old link.) So make the path to success clear. Make each correct step along the way easy. Don't let other actions compete for attention.
That's how a wizard should work.
Cliff
From: Birkir R. Gunnarsson < <EMAIL REMOVED> >
To: WebAIM Discussion List < <EMAIL REMOVED> >
Sent: Tuesday, December 16, 2014 7:31 AM
Subject: Re: [WebAIM] Meaningful Sequences for "Back" and "Continue" on Wizards

To me, as a screenreader user, the precise ordering of "action buttons" is not all important, as long as all of them are consecutive in the tab order.
E.g. I would not want: "back" "continue" "some link" "some other link"
"clear form".
In this situation I am very unlikely to locate that last button in fact.
I do have a preference for the button I am most likely to use coming first in a set of navigation buttons.

Also, again as a user, I really do not like "back" and "continue" to be links, I need them to be buttons and thus more easily navigated to with a screen reader (being able to jump to next button rather than having to tab through links). This also helps me quickly get to those buttons from anywhere within the form.
Again, there is no WCAG definition that ever says this, and the debate on links vs. buttons rages on for web usability in general.
I think, for all users, it is best if you make sure the order is consistent and the accessible names are consistent from step to step (though at the last step "continue" should probably be "finish" or "submit").



On 12/16/14, Lynn Holdsworth < <EMAIL REMOVED> > wrote:
> Beth, this is a difficult one, and I don't think there's a solution
> that will suit everyone.
>
> I personally like the Reset button to be the last of the three in the
> tab order, since it's the one I'm least likely to need to press and
> the one most likely, along with the Back button, to cause frustration
> if I press it accidentally.
>
> If I were to press the Back or Reset button after having filled in a
> significant amount of detail on a form, I'd love to have an "Are you
> sure?" dialog pop up. But again, I suspect opinions will differ
> greatly on this.
>
> Hope this helps.
>
> On 15/12/2014, <EMAIL REMOVED> < <EMAIL REMOVED> >
> wrote:
>> From my point of view as someone with motor disabilities -- and I'm
>> speaking personally and anecdotally, not about studies of other
>> people like me -- the most important thing is that tab order must
>> follow visual order, and the second most important thing is that
>> "continue," "submit," or the like come before "cancel" or "back" or
>> "reset." I also tend to assume that the first button I reach by
>> tabbing will be the one that moves me forward in the process.
>>
>> Deborah Kaplan
>>
>> On Mon, 15 Dec 2014, MEJ - Beth Sullivan wrote:
>>
>>> Lynn and Jonathan,
>>>
>>> Thank you for your responses. I can imagine how having the Continue
>>> button be the first one would be faster for a screen reader user.
>>>
>>> A questions for you Lynn, what do you expect when there is also a
>>> reset button for a form. Do you expect something like "Continue" "Reset"
>>> "Back"
>>> ?
>>>
>>> For low vision, cognitive and motor issues, what is the easiest flow
>>> and how important is the "meaningful sequence" to people. A lot of
>>> responsive design also requires weird ordering of elements when the
>>> page is stretched out. How do people with different disabilities
>>> find those sites?
>>>
>>> Thank you,
>>>
>>> Beth
>>>
>>>
>>> From: Lynn Holdsworth < <EMAIL REMOVED> >
>>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>>> Cc:
>>> Date: Tue, 9 Dec 2014 11:18:08 +0000
>>> Subject: Re: [WebAIM] Meaningful Sequences for "Back" and "Continue"
>>> on Wizards I'm an impatient screenreader user. I rush through forms
>>> as fast as I can, and assume the first button I come across is the
>>> submit button.
>>> I've lost count of the number of times I've accidentally gone back a
>>> step or cleared the form I've just filled in. So from a personal
>>> perspective I'd love the Continue button to be the first one in the
>>> source code.
>>>
>>> Thanks, Lynn
>>>
>>> On 08/12/2014, Jonathan Avila < <EMAIL REMOVED> > wrote:
>>>>> 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-be
>>> st-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
>>>> >>>> >>>> list messages to <EMAIL REMOVED>
>>>> >>>> >>>> list messages to <EMAIL REMOVED>
>>>>
>>> >>> >>> list messages to <EMAIL REMOVED>
>>>
>>>
>>
>> --
>> >> >> list messages to <EMAIL REMOVED>
>>
> > > list messages to <EMAIL REMOVED>
>


--
Work hard. Have fun. Make history.