E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Wloch, Rob
Date: Fri, Apr 10 2015 9:49AM
Subject: Previous and Next buttons on HTML forms
No previous message | Next message →

Hello,

Just wondering if anyone on this forum has dealt with the following issue regarding the use of Previous, Next buttons on HTML forms.

Our organization has decided that "Previous" should visually be on the left and "Next" on the right because it makes intuitive sense in terms of logical flow and follows the same paradigm as the links at the bottom of a Google search results page for example.

The problem is that it makes the "Previous" button the first submit button after the form which means that it will be triggered by default if the user hits ENTER anywhere in the form. To get around that, we made "Next" come before "Previous" and used CSS to visually swap the buttons but now the expected focus order is illogical when tabbing through the buttons because it skips over one button and then goes back which I believe may be a violation of WCAG 2.0 SC 2.4.3.

Here's an interesting survey related to this topic in case you're interested:
https://surveypractice.wordpress.com/2011/02/14/navigation-buttons/

Thank you, Rob.

From: Oscar DeLong
Date: Fri, Apr 10 2015 1:34PM
Subject: Re: Previous and Next buttons on HTML forms
← Previous message | Next message →

Rob,

I understand the desire to have the Previous button on the left and the Next button on the right. I feel like it would be possible to do one of two things. Check to see if it is possible to alter the order of the submit buttons. That should be possible but I am not exactly aware how. The other option is to keep exactly what you have now but you could alter the tab order. That is possible to do. There is a tab index Attribute that you can set. w3schools.com shows how to alter the tab index<http://www.w3schools.com/tags/att_global_tabindex.asp>;. You would literally outline which order each button would come in using the attribute set up <a href ="" tabindex="1">, <a hrfe="" tabindex="2">, etc. That would allow you to show them as you are now but change the tab order so that it is more logical.

Hope this helps,
Oscar

--
Oscar DeLong
Director of Library Services
Bay de Noc Community College
= EMAIL ADDRESS REMOVED =
(906) 217-4076

From: <Wloch>, Rob < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Reply-To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Date: Friday, April 10, 2015 at 11:49 AM
To: "' = EMAIL ADDRESS REMOVED = <mailto:' = EMAIL ADDRESS REMOVED = >'" < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Subject: [WebAIM] Previous and Next buttons on HTML forms

Hello,

Just wondering if anyone on this forum has dealt with the following issue regarding the use of Previous, Next buttons on HTML forms.

Our organization has decided that "Previous" should visually be on the left and "Next" on the right because it makes intuitive sense in terms of logical flow and follows the same paradigm as the links at the bottom of a Google search results page for example.

The problem is that it makes the "Previous" button the first submit button after the form which means that it will be triggered by default if the user hits ENTER anywhere in the form. To get around that, we made "Next" come before "Previous" and used CSS to visually swap the buttons but now the expected focus order is illogical when tabbing through the buttons because it skips over one button and then goes back which I believe may be a violation of WCAG 2.0 SC 2.4.3.

Here's an interesting survey related to this topic in case you're interested:
https://surveypractice.wordpress.com/2011/02/14/navigation-buttons/

Thank you, Rob.

From: chaals@yandex-team.ru
Date: Fri, Apr 10 2015 3:55PM
Subject: Re: Previous and Next buttons on HTML forms
← Previous message | Next message →

- oscar.delong@



10.04.2015, 21:34, "Oscar DeLong" < = EMAIL ADDRESS REMOVED = >:
> Rob,
>
> I understand the desire to have the Previous button on the left and the Next button on the right.  I feel like it would be possible to do one of two things.  Check to see if it is possible to alter the order of the submit buttons.  That should be possible but I am not exactly aware how.  The other option is to keep exactly what you have now but you could alter the tab order.  That is possible to do.  There is a tab index Attribute that you can set.  w3schools.com shows how to alter the tab index<http://www.w3schools.com/tags/att_global_tabindex.asp>;.  You would literally outline which order each button would come in using the attribute set up <a href ="" tabindex="1">, <a hrfe="" tabindex="2">, etc.  That would allow you to show them as you are now but change the tab order so that it is more logical.

I would strongly recommend *avoiding* tabindex. If you use it you need to put it on everything (at least everything up to the point of the last item in the document that has it - after that tabbing will automatically follow the logical order.

What you could do is put the next button first in the tab order, floated right, followed by the previous button a line or more below it.

But I think even if they are on the same line with the 'next' floated right to give the effect you describe you are not violating the success criterion. Your navigation ordering is still logical (for the reasons you have outlined) and preserves both meaning and operability.

There is a discussion in the HTML working group which suggests that tabindex values will actually become non-conforming in future as we try to find a better approach.

If people are interested, https://www.w3.org/WAI/PF/HTML/wiki/Keyboard describes more of what we are thinking about, both for tabindex and keyboard navigation and interaction generally. Short version: It's a mess, the javascript approaches people use are not a good solution. IMHO we could fix it with a bit of work based around the accesskey attribute and some thinking about navigation orders that is happening both there and in the SVG accessibility task force, but we haven't reached a consensus yet - and are still studying the problem in terms of SVG in particular - navigating graphics is more complex than for text documents, which even when hypertext are fundamentally fairly linear…

cheers

Chaals

> Hope this helps,
> Oscar
>
> --
> Oscar DeLong
> Director of Library Services
> Bay de Noc Community College
> = EMAIL ADDRESS REMOVED =
> (906) 217-4076
>
> From: <Wloch>, Rob < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
> Reply-To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
> Date: Friday, April 10, 2015 at 11:49 AM
> To: "' = EMAIL ADDRESS REMOVED = <mailto:' = EMAIL ADDRESS REMOVED = >'" < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
> Subject: [WebAIM] Previous and Next buttons on HTML forms
>
> Hello,
>
> Just wondering if anyone on this forum has dealt with the following issue regarding the use of Previous, Next buttons on HTML forms.
>
> Our organization has decided that "Previous" should visually be on the left and "Next" on the right because it makes intuitive sense in terms of logical flow and follows the same paradigm as the links at the bottom of a Google search results page for example.
>
> The problem is that it makes the "Previous" button the first submit button after the form which means that it will be triggered by default if the user hits ENTER anywhere in the form. To get around that, we made "Next" come before "Previous" and used CSS to visually swap the buttons but now the expected focus order is illogical when tabbing through the buttons because it skips over one button and then goes back which I believe may be a violation of WCAG 2.0 SC 2.4.3.
>
> Here's an interesting survey related to this topic in case you're interested:
> https://surveypractice.wordpress.com/2011/02/14/navigation-buttons/
>
> Thank you, Rob.
> > > > >
> > > > --
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com

From: _mallory
Date: Sat, Apr 11 2015 1:19AM
Subject: Re: Previous and Next buttons on HTML forms
← Previous message | Next message →

I'm curious why Previous is a submit button at all?


We have just forms on e-commerce pages, and there are steps 1-4 or
whatever in the checkout... our Next-y buttons are form submissions,
but our Previouses are links that go back to the previous form or
page.
This doesn't solve the issue that the submit on the right will get focus
first before the Previous on the left, which can be an issue at deep
magnification, but it does mean Enter will not trigger Previous.

_mallory

On Fri, Apr 10, 2015 at 03:49:28PM +0000, Wloch, Rob wrote:
> Hello,
>
> Just wondering if anyone on this forum has dealt with the following issue regarding the use of Previous, Next buttons on HTML forms.
>
> Our organization has decided that "Previous" should visually be on the left and "Next" on the right because it makes intuitive sense in terms of logical flow and follows the same paradigm as the links at the bottom of a Google search results page for example.
>
> The problem is that it makes the "Previous" button the first submit button after the form which means that it will be triggered by default if the user hits ENTER anywhere in the form. To get around that, we made "Next" come before "Previous" and used CSS to visually swap the buttons but now the expected focus order is illogical when tabbing through the buttons because it skips over one button and then goes back which I believe may be a violation of WCAG 2.0 SC 2.4.3.
>
> Here's an interesting survey related to this topic in case you're interested:
> https://surveypractice.wordpress.com/2011/02/14/navigation-buttons/
>
> Thank you, Rob.

From: Birkir R. Gunnarsson
Date: Wed, Apr 15 2015 5:19AM
Subject: Re: Previous and Next buttons on HTML forms
← Previous message | Next message →

A few additional thoughts:
1. Don't use tabindex, please!
2. Don't use Tabindex pleaes! .. wait, I already said that.
3. How about implementing the "previous" and "next" buttons using the
buttom element or input type="button" rather than type="submit" ..
even take them outside of the form to avoid them being activated when
user presses enter inside the form .. at least not until user is in
the last step in the process and may desire to submit the form.
4. I think navigation from previous to next or next to previous are
both sufficiently logical, in fact "next" should logically come be
before "previous" in focus order, because it is the primary action for
the user (the action user is most likely to want to perform).
5. Make sure to mark the "previous" button on the first page as
disabled, using the disabled attribute should do it. That is assuming
that user cannot click the "previous" button from first step, though
maybe it will have a function, such as canceling the process.
Cheers
-B


On 4/11/15, _mallory < = EMAIL ADDRESS REMOVED = > wrote:
> I'm curious why Previous is a submit button at all?
>
>
> We have just forms on e-commerce pages, and there are steps 1-4 or
> whatever in the checkout... our Next-y buttons are form submissions,
> but our Previouses are links that go back to the previous form or
> page.
> This doesn't solve the issue that the submit on the right will get focus
> first before the Previous on the left, which can be an issue at deep
> magnification, but it does mean Enter will not trigger Previous.
>
> _mallory
>
> On Fri, Apr 10, 2015 at 03:49:28PM +0000, Wloch, Rob wrote:
>> Hello,
>>
>> Just wondering if anyone on this forum has dealt with the following issue
>> regarding the use of Previous, Next buttons on HTML forms.
>>
>> Our organization has decided that "Previous" should visually be on the
>> left and "Next" on the right because it makes intuitive sense in terms of
>> logical flow and follows the same paradigm as the links at the bottom of a
>> Google search results page for example.
>>
>> The problem is that it makes the "Previous" button the first submit button
>> after the form which means that it will be triggered by default if the
>> user hits ENTER anywhere in the form. To get around that, we made "Next"
>> come before "Previous" and used CSS to visually swap the buttons but now
>> the expected focus order is illogical when tabbing through the buttons
>> because it skips over one button and then goes back which I believe may be
>> a violation of WCAG 2.0 SC 2.4.3.
>>
>> Here's an interesting survey related to this topic in case you're
>> interested:
>> https://surveypractice.wordpress.com/2011/02/14/navigation-buttons/
>>
>> Thank you, Rob.
> > > > >


--
Work hard. Have fun. Make history.

From: Wloch, Rob
Date: Wed, Apr 15 2015 9:20AM
Subject: Re: Previous and Next buttons on HTML forms
← Previous message | No next message

Thank you everyone for your comments!

I think that I will explore making the Previous button a link but make it look like a button. We are not allowed to assume that users will have Javascript enabled so input type="button" isn't an option for us.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: April 15, 2015 7:19 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Previous and Next buttons on HTML forms

A few additional thoughts:
1. Don't use tabindex, please!
2. Don't use Tabindex pleaes! .. wait, I already said that.
3. How about implementing the "previous" and "next" buttons using the
buttom element or input type="button" rather than type="submit" ..
even take them outside of the form to avoid them being activated when
user presses enter inside the form .. at least not until user is in
the last step in the process and may desire to submit the form.
4. I think navigation from previous to next or next to previous are
both sufficiently logical, in fact "next" should logically come be
before "previous" in focus order, because it is the primary action for
the user (the action user is most likely to want to perform).
5. Make sure to mark the "previous" button on the first page as
disabled, using the disabled attribute should do it. That is assuming
that user cannot click the "previous" button from first step, though
maybe it will have a function, such as canceling the process.
Cheers
-B


On 4/11/15, _mallory < = EMAIL ADDRESS REMOVED = > wrote:
> I'm curious why Previous is a submit button at all?
>
>
> We have just forms on e-commerce pages, and there are steps 1-4 or
> whatever in the checkout... our Next-y buttons are form submissions,
> but our Previouses are links that go back to the previous form or
> page.
> This doesn't solve the issue that the submit on the right will get focus
> first before the Previous on the left, which can be an issue at deep
> magnification, but it does mean Enter will not trigger Previous.
>
> _mallory
>
> On Fri, Apr 10, 2015 at 03:49:28PM +0000, Wloch, Rob wrote:
>> Hello,
>>
>> Just wondering if anyone on this forum has dealt with the following issue
>> regarding the use of Previous, Next buttons on HTML forms.
>>
>> Our organization has decided that "Previous" should visually be on the
>> left and "Next" on the right because it makes intuitive sense in terms of
>> logical flow and follows the same paradigm as the links at the bottom of a
>> Google search results page for example.
>>
>> The problem is that it makes the "Previous" button the first submit button
>> after the form which means that it will be triggered by default if the
>> user hits ENTER anywhere in the form. To get around that, we made "Next"
>> come before "Previous" and used CSS to visually swap the buttons but now
>> the expected focus order is illogical when tabbing through the buttons
>> because it skips over one button and then goes back which I believe may be
>> a violation of WCAG 2.0 SC 2.4.3.
>>
>> Here's an interesting survey related to this topic in case you're
>> interested:
>> https://surveypractice.wordpress.com/2011/02/14/navigation-buttons/
>>
>> Thank you, Rob.
> > > > >


--
Work hard. Have fun. Make history.