WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: forms, tab order, and "cancel" buttons

for

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

From: deblist@suberic.net
Date: Wed, Dec 09 2009 10:57AM
Subject: forms, tab order, and "cancel" buttons
No previous message | Next message →

My organization is in the process of putting up a feedback form,
for which I have provided the relevant information about
accessibility (e.g. WAI-ARIA, tabindex, labels, etc.). One thing
I mentioned about accessibility is that the "Cancel" button
appears immediately to the left of the "Send feedback" button.

To me, this is clearly problematic for keyboard users. Your tab
index, for usability reasons, should match your layout with
left-to-right reading in a case like this, which means that a
casual keyboard user can easily tab to and select the "Cancel"
button instead of the "Send feedback" button. But our web
designer says that having "Cancel" to the left of "Send feedback"
is standard design, and following general layout standards
provides its own benefits for usability.

How do people usually deal with this? A developer doesn't want to
remove the "Cancel" button, because he doesn't want any data in
the form to accidentally send on reload.

-deborah

From: ckrugman@sbcglobal.net
Date: Wed, Dec 09 2009 11:03AM
Subject: Re: forms, tab order, and "cancel" buttons
← Previous message | Next message →

As a JAWS user I find that this is not a problem as the appropriate buttons
can be located by using the arrow keys while in the JAWS cursor mode.
Chuck
----- Original Message -----
From: < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, December 09, 2009 9:56 AM
Subject: [WebAIM] forms, tab order, and "cancel" buttons


> My organization is in the process of putting up a feedback form,
> for which I have provided the relevant information about
> accessibility (e.g. WAI-ARIA, tabindex, labels, etc.). One thing
> I mentioned about accessibility is that the "Cancel" button
> appears immediately to the left of the "Send feedback" button.
>
> To me, this is clearly problematic for keyboard users. Your tab
> index, for usability reasons, should match your layout with
> left-to-right reading in a case like this, which means that a
> casual keyboard user can easily tab to and select the "Cancel"
> button instead of the "Send feedback" button. But our web
> designer says that having "Cancel" to the left of "Send feedback"
> is standard design, and following general layout standards
> provides its own benefits for usability.
>
> How do people usually deal with this? A developer doesn't want to
> remove the "Cancel" button, because he doesn't want any data in
> the form to accidentally send on reload.
>
> -deborah
>

From: Margit Link-Rodrigue
Date: Wed, Dec 09 2009 11:27AM
Subject: Re: forms, tab order, and "cancel" buttons
← Previous message | Next message →

I don't agree that having the cancel button to the left is a layout
standard. I just consulted Luke Wroblewski's book Web Form Design and the
Chapter about form actions clearly has primary actions located to the left
and secondary actions, if visible at all, to the right. He also includes
graphics that show the eye fixations of users during form completion, if you
want to get scientific.If your web designer is quoting standards, what are
the specific sources? Maybe you can get a copy of Luke's book. He was lead
user interface designer for ebay and is now Chief Design Architect at
Yahoo!.

margit

On Wed, Dec 9, 2009 at 11:56 AM, < = EMAIL ADDRESS REMOVED = > wrote:

> My organization is in the process of putting up a feedback form,
> for which I have provided the relevant information about
> accessibility (e.g. WAI-ARIA, tabindex, labels, etc.). One thing
> I mentioned about accessibility is that the "Cancel" button
> appears immediately to the left of the "Send feedback" button.
>
> To me, this is clearly problematic for keyboard users. Your tab
> index, for usability reasons, should match your layout with
> left-to-right reading in a case like this, which means that a
> casual keyboard user can easily tab to and select the "Cancel"
> button instead of the "Send feedback" button. But our web
> designer says that having "Cancel" to the left of "Send feedback"
> is standard design, and following general layout standards
> provides its own benefits for usability.
>
> How do people usually deal with this? A developer doesn't want to
> remove the "Cancel" button, because he doesn't want any data in
> the form to accidentally send on reload.
>
> -deborah
>

From: Jared Smith
Date: Wed, Dec 09 2009 11:39AM
Subject: Re: forms, tab order, and "cancel" buttons
← Previous message | Next message →

On Wed, Dec 9, 2009 at 10:56 AM, < = EMAIL ADDRESS REMOVED = > wrote:

> How do people usually deal with this? A developer doesn't want to
> remove the "Cancel" button, because he doesn't want any data in
> the form to accidentally send on reload.

I've never heard of such a thing. Certainly data can be re-sent by
refreshing, but only AFTER the form has already been submitted. A
cancel button does nothing to prevent that. A cancel button on a web
form is a very rare thing and I don't understand what functionality it
would serve other than to potentially confuse or misdirect users.

My vote - ditch the cancel button altogether. Another possibility
might be to display "Cancel" entirely different from the Submit
button, perhaps as a link immediately below the Submit button. This
would alleviate much potential confusion.

Your designer is a Mac user. Mac's typically have Cancel buttons to
the left of the OK button. Windows takes the exact opposite approach.
So which one is right? When it comes to web forms, as margit
indicated, it is most common and usable to have the primary function
button on the left if you must have two buttons.

Jared Smith
WebAIM.org

From: Jukka K. Korpela
Date: Wed, Dec 09 2009 12:00PM
Subject: Re: forms, tab order, and "cancel" buttons
← Previous message | No next message

= EMAIL ADDRESS REMOVED = wrote:

> One thing
> I mentioned about accessibility is that the "Cancel" button
> appears immediately to the left of the "Send feedback" button.

It is very bad practice and does not become any better by its being so
common.

The same applies to the "Cancel" button, more properly called destruction
button, as a whole. See some good arguments by Jakob Nielsen, the usability
expert:
http://www.useit.com/alertbox/20000416.html

The only situation where the destruction button could be useful is at the
_start_ of a form that will often be used several times in succession by a
user. He might want to wipe out all the content when starting to fill in
data about a new case. But even then, it is better that the form handler
returns, after feedback about succesful submission, a fresh page with an
empty form.

> To me, this is clearly problematic for keyboard users.

The problem is much wider. It is especially mouse users who accidentally hit
the destruction button. This is particularly frustrating after having
entered some long text directly. There is no way to get it back.

> But our web
> designer says that having "Cancel" to the left of "Send feedback"
> is standard design,

Only in the sense that cluelessness is standard design in many ways - people
just copy features without ever thinking why.

> A developer doesn't want to
> remove the "Cancel" button, because he doesn't want any data in
> the form to accidentally send on reload.

It has nothing to do with such issues.

--
Yucca, http://www.cs.tut.fi/~jkorpela/