WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form validation

for

From: Patrick H. Lauke
Date: Feb 9, 2006 6:30PM

ben morrison wrote:

> I've just finished improving our javascript form validation and would
> be grateful for opinions.

Instead of the "* indicates a required field", could you not just have
something like "Name (required)" as label (could even be wrapped in a
span and styled a little bit smaller than the main label text, a la
<label for="name">Name <span class="req">(required)</span></label>) ?

> 3. A list of errors which link to each form element is written in
> (uses focus insted of anchors)

So, if this is also generated server-side if javascript is disabled, you
should also make the links work to a certain extent. Currently, w/out
javascript, hitting the link does not focus the relevant input, as
expected, but then hitting TAB jumps to the *following* input. To work
around this, you may have to give an id to the label or parent div, so
the focus/caret is placed before the input and a subsequent TAB should
go to it. Obviously, this would also need a subtle change to the focusMe
function.

> 4. Each area is flagged up with a coloured background.

Could you also changed the label text? If you take my previous
suggestion into account, you could end up with a label like "Error: Name
(required)" or similar.

> The only thing I have left out is a alert box - is this needed?

Not sure if it's needed, but it shouldn't hurt either.

P
--
Patrick H. Lauke
___________
re