E-mail List Archives
Thread: Meaningful Sequences for "Back" and "Continue" on Wizards
Number of posts in this thread: 9 (In chronological order)
From: MEJ - Beth Sullivan
Date: Mon, Dec 08 2014 9:03AM
Subject: Meaningful Sequences for "Back" and "Continue" on Wizards
No previous message | Next message →
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
From: Jonathan Avila
Date: Mon, Dec 08 2014 9:11AM
Subject: Re: Meaningful Sequences for "Back" and "Continue" on Wizards
← Previous message | Next message →
> 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
From: Lynn Holdsworth
Date: Tue, Dec 09 2014 4:18AM
Subject: Re: Meaningful Sequences for "Back" and "Continue" on Wizards
← Previous message | Next message →
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 ADDRESS 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
>
>
From: MEJ - Beth Sullivan
Date: Mon, Dec 15 2014 11:45AM
Subject: Re: Meaningful Sequences for "Back" and "Continue" on Wizards
← Previous message | Next message →
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 ADDRESS REMOVED = >
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
>
>
From: deborah.kaplan
Date: Mon, Dec 15 2014 11:50AM
Subject: Re: Meaningful Sequences for "Back" and "Continue" on Wizards
← Previous message | Next message →
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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
>>
>>
From: Lynn Holdsworth
Date: Tue, Dec 16 2014 4:42AM
Subject: Re: Meaningful Sequences for "Back" and "Continue" on Wizards
← Previous message | Next message →
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 ADDRESS REMOVED = < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
>>>
>>>
From: Birkir R. Gunnarsson
Date: Tue, Dec 16 2014 6:31AM
Subject: Re: Meaningful Sequences for "Back" and "Continue" on Wizards
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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
>>>>
>>>>
From: Jonathan Avila
Date: Wed, Dec 17 2014 6:31AM
Subject: Re: Meaningful Sequences for "Back" and "Continue"onWizards
← Previous message | Next message →
> 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
From: Jim Allan
Date: Wed, Dec 17 2014 9:49AM
Subject: Re: Meaningful Sequences for "Back" and "Continue" on Wizards
← Previous message | No next message
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 ADDRESS 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
>
>