WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: A question about credit card numbers

for

From: Marc Greenstock
Date: Sep 23, 2004 1:52AM

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