E-mail List Archives

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

for

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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of MEJ - Beth Sullivan
Sent: Monday, December 08, 2014 11:04 AM
To: = EMAIL ADDRESS 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

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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of MEJ - Beth
> Sullivan
> Sent: Monday, December 08, 2014 11:04 AM
> To: = EMAIL ADDRESS 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
> > > messages to = EMAIL ADDRESS REMOVED =
> > > >

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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of MEJ - Beth
> Sullivan
> Sent: Monday, December 08, 2014 11:04 AM
> To: = EMAIL ADDRESS 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
> > > messages to = EMAIL ADDRESS REMOVED =
> > > >

From: deborah.kaplan@suberic.net
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
>>
>> -----Original Message-----
>> From: = EMAIL ADDRESS REMOVED =
>> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of MEJ - Beth
>> Sullivan
>> Sent: Monday, December 08, 2014 11:04 AM
>> To: = EMAIL ADDRESS 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
>> >> >> messages to = EMAIL ADDRESS REMOVED =
>> >> >> >>
> > > >
>

--

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
>>>
>>> -----Original Message-----
>>> From: = EMAIL ADDRESS REMOVED =
>>> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of MEJ - Beth
>>> Sullivan
>>> Sent: Monday, December 08, 2014 11:04 AM
>>> To: = EMAIL ADDRESS 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
>>> >>> >>> messages to = EMAIL ADDRESS REMOVED =
>>> >>> >>> >>>
>> >> >> >>
>>
>
> --
> > > >

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
>>>>
>>>> -----Original Message-----
>>>> From: = EMAIL ADDRESS REMOVED =
>>>> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of MEJ - Beth
>>>> Sullivan
>>>> Sent: Monday, December 08, 2014 11:04 AM
>>>> To: = EMAIL ADDRESS 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
>>>> >>>> >>>> messages to = EMAIL ADDRESS REMOVED =
>>>> >>>> >>>> >>>>
>>> >>> >>> >>>
>>>
>>
>> --
>> >> >> >>
> > > >


--
Work hard. Have fun. Make history.

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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
To: WebAIM Discussion List < = EMAIL ADDRESS 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 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
>>>>
>>>> -----Original Message-----
>>>> From: = EMAIL ADDRESS REMOVED =
>>>> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of MEJ -
>>>> Beth Sullivan
>>>> Sent: Monday, December 08, 2014 11:04 AM
>>>> To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>>> >>>> >>>> list messages to = EMAIL ADDRESS REMOVED =
>>>>
>>> >>> >>> list messages to = EMAIL ADDRESS REMOVED =
>>>
>>>
>>
>> --
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>>
> > > list messages to = EMAIL ADDRESS REMOVED =
>


--
Work hard. Have fun. Make history.

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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto:
> = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 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
> >>>>
> >>>> -----Original Message-----
> >>>> From: = EMAIL ADDRESS REMOVED =
> >>>> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of MEJ -
> >>>> Beth Sullivan
> >>>> Sent: Monday, December 08, 2014 11:04 AM
> >>>> To: = EMAIL ADDRESS 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 ADDRESS REMOVED =
> >>>> > >>>> > >>>> list messages to = EMAIL ADDRESS REMOVED =
> >>>>
> >>> > >>> > >>> list messages to = EMAIL ADDRESS REMOVED =
> >>>
> >>>
> >>
> >> --
> >> > >> > >> list messages to = EMAIL ADDRESS REMOVED =
> >>
> > > > > > list messages to = EMAIL ADDRESS 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