WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jim Allan
Date: Dec 17, 2014 9:49AM


I would also add that making the words on the buttons meaningful is helpful
"checkout" "continue shopping", etc. Making the default button stand out -
a bit bigger, or bold text, something to help the user find the 'right'
action.

On Wed, Dec 17, 2014 at 7:31 AM, Jonathan Avila < <EMAIL REMOVED> >
wrote:
>
> > 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.
>
>
> > > >
>
>
> > > > > > >


--
[image: http://www.tsbvi.edu] <http://www.tsbvi.edu>;Jim Allan,
Accessibility Coordinator & Webmaster
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964