WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Previous and Next buttons on HTML forms

for

From: chaals
Date: Apr 10, 2015 3:55PM

- oscar.delong@



10.04.2015, 21:34, "Oscar DeLong" < <EMAIL 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 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.
> > > > >
> > > > --
Charles McCathie Nevile - web standards - CTO Office, Yandex
<EMAIL REMOVED> - - - Find more at http://yandex.com