2.3 A simple contact form:

..

Try tabbing through this form. Note that the required fields change the message if you don't enter a value.

Note the help links. Clicking on one expands the help in an accessible manner shifting focus to the help heading.

Contact form

If pixel perfect design required use a heading instead of a legend

[help]

E-mail help

Help text in here, All that happens is that this is displayed when help is clicked on.

It is important that:

  1. this help div appears before the input field
  2. this help div has a heading
  3. this help div has a slightly different background & text colour
  4. the help link shares the same background & text colours
[help]

Phone help

Help text in here, lots of it or hardly any it matters not. All that happens is that this is displayed when help is clicked on. It is important that it appears before the input though. It is also a good idea to have the background slightly different so sighted users know something has been added to the page.

Newsletter

Accesskey associated to the first label, the standard for this would be "9" under the UK Government eGIF "standard".

Note: It is now a UK legal necessity for users to actively state that their details may be used. Even for such things as newsletters. This means, in the case of the "subscribe to newsletter" checkbox above, that the checkbox cannot be checked as default.