WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Previous and Next buttons on HTML forms

for

From: Oscar DeLong
Date: Apr 10, 2015 1:34PM

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 REMOVED>
(906) 217-4076

From: <Wloch>, Rob < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>
Reply-To: WebAIM Discussion List < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>
Date: Friday, April 10, 2015 at 11:49 AM
To: "' <EMAIL REMOVED> <mailto:' <EMAIL REMOVED> >'" < <EMAIL REMOVED> <mailto: <EMAIL 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.