WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form validation

for

From: ben morrison
Date: Feb 13, 2006 6:00AM

> > 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>) ?

Nice idea, I could use <em>(required)</em> for leaner code too.

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

Agreed, the focus is annoying and a parent id will be needed for server side.

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

Another good idea, thanks. <strong>Error:</strong> Name <em>(required)</em>

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

My only concern was that screenreaders may not realise the page has
changed, which is why i changed the title and jumped to the error
text. If this is confusing i'll happily add an alert box too.

Thanks for your input.

Ben