WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Previous and Next buttons on HTML forms

for

From: Birkir R. Gunnarsson
Date: Apr 15, 2015 5:19AM

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 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.