E-mail List Archives

Search E-mail List Archives for

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

From: Kerry Webb
Date: Wed, Sep 22 2004 11:44PM
Subject: A question about credit card numbers
No previous message | Next message →

I've just joined the list, and (of course) I have a question.

There are two main ways of entering credit card numbers on a Web page
- accepting all 16 (or 15 in some cases) in one string, or having
four boxes each accepting four digits (except perhaps the last one
....)

The four box option can either advance the cursor to the next box
after the fourth digit is entered, or can halt and have the user tab
or click on the next box.

My question is, does any of these methods have particular benefits,
as far as accessibility is concerned?

I prefer the four box option with the auto-tabbing, but it may be
that users with a disability or with older browsers or browsers with
no javascript enabled, may be disadvantaged.

Thanks

Kerry

====Kerry Webb
Canberra, Australia

Find local movie times and trailers on Yahoo! Movies.
http://au.movies.yahoo.com

From: Jukka K. Korpela
Date: Thu, Sep 23 2004 1:13AM
Subject: Re: A question about credit card numbers
← Previous message | Next message →

On Thu, 23 Sep 2004, blackdorrit wrote:

> There are two main ways of entering credit card numbers on a Web page
> - accepting all 16 (or 15 in some cases) in one string, or having
> four boxes each accepting four digits (except perhaps the last one
> ...)

Entering credit card numbers is an example of a situation where
accessibility might be _undesirable_. We don't want to let small kids
enter their parent's credit card number, and even many adults should be
_prevented_ from using their credit card on the Web too easily. But this
means that entering a credit card number need not, and maybe _should not_,
be easy to people who are mentally or cognitively significantly below
the level of an average adult. Such people, if they have a credit card,
should really use it only as assisted by someone they can trust.

But in other respects, such as regards to visual impairment and motoric
disabilities, normal accessibility considerations apply. This means, in my
opinion, that you should use a single text input field with size="19" and
preceded by a statement that asks the user to input the credit card number
as printed on the card, using spaces if desired. Naturally the server-side
processing should take care of removing spaces. The point is that is by
far easiest to type the number as printed, grouped into four digit groups,
but users should be allowed to omit the spaces too.

> I prefer the four box option with the auto-tabbing, but it may be
> that users with a disability or with older browsers or browsers with
> no javascript enabled, may be disadvantaged.

That's one problem - they need to tab, or even click on the next field if
they don't know tabbing. (We often consider the problems of people who
cannot use a mouse; but here we should _also_ think about the majority (?)
who hasn't learned to tab fluently.) The second problem is that
auto-tabbing may surprise and distract the user. Moreover, dividing
something that is logically, functionally, and intuitively a single
identifying string is not natural and might even confuse the user.

I would apply the same principle to the expiration date: make it a single
text field, and ask the user to type it as printed on the card.

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

From: Marc Greenstock
Date: Thu, Sep 23 2004 1:52AM
Subject: Re: A question about credit card numbers
← Previous message | Next message →

To provide an accessible form, each field must have a label element attached
to it. So for each field that consists of four numbers you will need a
label. That just wont look good and may confuse the user even more.

The best method I have found is to have one field and a script that
automatically enters a "-" after every fourth character.
eg 1234-5678-9012-3456. The characters are inserted automatically once the
user has entered the fourth block. This looks good and is accessible. What
you also will want to do is prevent the user from entering in any other
character other than numeric characters (Don't alert, just don't let them do
it).

I've tested this on JAWS and it doesn't cause any problems (That I can tell
anyway).

Marc.



----- Original Message -----
From: "blackdorrit"
To: "WebAIM Discussion List"
Sent: Thursday, September 23, 2004 3:43 PM
Subject: [WebAIM] A question about credit card numbers


>
>
> I've just joined the list, and (of course) I have a question.
>
> There are two main ways of entering credit card numbers on a Web page
> - accepting all 16 (or 15 in some cases) in one string, or having
> four boxes each accepting four digits (except perhaps the last one
> ...)
>
> The four box option can either advance the cursor to the next box
> after the fourth digit is entered, or can halt and have the user tab
> or click on the next box.
>
> My question is, does any of these methods have particular benefits,
> as far as accessibility is concerned?
>
> I prefer the four box option with the auto-tabbing, but it may be
> that users with a disability or with older browsers or browsers with
> no javascript enabled, may be disadvantaged.
>
> Thanks
>
> Kerry
>
> ====> Kerry Webb
> Canberra, Australia
>
> Find local movie times and trailers on Yahoo! Movies.
> http://au.movies.yahoo.com
>
> ----
> To subscribe or unsubscribe, visit http://www.webaim.org/discussion/
>

From: Jukka K. Korpela
Date: Thu, Sep 23 2004 4:11AM
Subject: Re: A question about credit card numbers
← Previous message | Next message →

On Thu, 23 Sep 2004, marc wrote:

> The best method I have found is to have one field and a script that
> automatically enters a "-" after every fourth character.

This, too, suffers from the problem of potential surprise and confusion.
Actually even more than automatically inserting spaces, since the number
printed on a credit card probably does _not_ contain hyphens. Moreover, it
does not really help. If the user wants to enter the number in four-digit
groups, fine; if not, don't disturb that.

> What
> you also will want to do is prevent the user from entering in any other
> character other than numeric characters (Don't alert, just don't let them do
> it).

This is questionable, and at least a space and maybe a hyphen, maybe some
other characters as well should be allowed and treated as insignificant
separators. Disallowing input other than digits (and allowed punctuation)
silently might be useful, or it might not. Someone who tries to type data
and then sees that nothing happens will probably get disoriented. And he
probably was confused already, with a wrong idea of what should be typed
here, so it could be a big mess. Maybe you should at least have a counter
for attempts to enter nonacceptable characters into the field and a test
that causes an alert and an explanation to be show to the user, explaining
the situation. But it would simpler, and perhaps just as good or better,
to have the data checked only when leaving the field, or only when
attempting to submit the form, or only in the form handler.

After all, the form handler _must_ (for several very good reasons) be
written so that it is robust and can handle literally any data
(including a gigabyte of junk, lack of any data, and anything between)
and can issue a well-designed understandable error message for any
incorrect data, along with a new form that has been prefilled with the
part of data that was acceptable and with indications of missing and
invalid data. Doing this _right_, which is crucial, tends to keep people
so busy that there are little resources left for client-side pre-checks,
no matter what additional value they might have. In any case it's best to
start from it, and consider client side scripting afterwards, with a
critical mind - it is easy to add scripting that might help _some_ people
_some_ of the time, but it might hurt others or in other situations.

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

From: Austin, Darrel
Date: Thu, Sep 23 2004 8:57AM
Subject: Re: A question about credit card numbers
← Previous message | Next message →

> I prefer the four box option with the auto-tabbing, but it may be
> that users with a disability or with older browsers or browsers with
> no javascript enabled, may be disadvantaged.

I'm 'fully abled' and despise the auto-tab in form fields.

I need to enter my CC number, so I tab to the start, enter 1234, and, while
still looking at my card, hit tab, 5678, tab...glance at the
screen...oh...wait, crap, now I tabbed out of the CC fields. Ugh. Go back.
Do it again.

Anything that most folks can enter fairly fast (phone numbers, CC#s, Social
Security, etc.) assume that they're going to use the tab key just like they
would doing any data entry in excel, or a DB, etc. if it's split into
multiple fields.

Just MHO, of course.

Otherwise, I agree with kjorpela...leave it as one field...and
validate/reformat it as necessary on the server end.

-Darrel

From: Patrick Lauke
Date: Thu, Sep 23 2004 9:07AM
Subject: Re: A question about credit card numbers
← Previous message | Next message →

> > I prefer the four box option with the auto-tabbing, but it may be
> > that users with a disability or with older browsers or browsers with
> > no javascript enabled, may be disadvantaged.
>
> I'm 'fully abled' and despise the auto-tab in form fields.

Auto-tabbing is contrary to the normal expected behaviour of the browser, and should therefore ont be used. I remember seeing a short video from a usability/accessibility test done by bunnyhop..aeh... www.bunnyfoot.com which showed exactly this: some online banking form with multi-field auto-tabbing CC entry...and practically all users (both visually impaired, 100% blind and 'fully abled') ran into problems there.

I'd say that the best method, imho, is to stick with a single field and do some fairly simple reformatting server-side (strip out any non-numerical characters and spaces, then - if required - split the string back up into numerical groups).

Patrick
________________________________
Patrick H. Lauke
Webmaster / University of Salford
http://www.salford.ac.uk

From: Kerry Webb
Date: Thu, Sep 23 2004 4:48PM
Subject: Re: A question about credit card numbers
← Previous message | No next message

Thanks to all who replied to this question.

For my part, I like the auto-tabbing on that site because:

* I know my credit card number, pretty well at least
* It's displayed on the card as four groups of four
* I am a poor typist
* I use the site monthly, and now I expect to see that behaviour
there

So, it's comfortable (for me) and the layout helps me to type the
number in and check to make sure it's correct.

But, I'm not most people, so I'll be recommending to our Web managers
(one of whom raised this question with me) that they set up their
sites to accept the numbers as one long string, for the reasons
outlined in the previous responses.

Thanks again, it's much appreciated

Kerry


====Kerry Webb
Canberra, Australia

Find local movie times and trailers on Yahoo! Movies.
http://au.movies.yahoo.com