Question

I’m having one of those procrastination overstimulated panic attacks about choosing a method of doing forms in CSS that work well alongside JQuery (on Classic ASP or .NET) and are accessible.

I’ve been hit with the accessibility/compliance thing pretty hard now, so I’m terrified of making the wrong choice. I’ve got to produce prototypes here soon and I’m freaking.

I’ve done some CSS layout and debugging, but haven’t really done much with DIV and FLOAT with forms that are more than one field (not like phone or zip).

Answer 1

If you are interested in accessible forms, have a look at these two sites:

http://www.jimthatcher.com/webcourse8.htm

http://www.alistapart.com/articles/prettyaccessibleforms

Basically, you want to do the following, where possible…

1. include a type on each input… helpful for screenreaders
2. include a title on each element… also helpful for screenreaders
3. use labels and inputs in close relation to each other (side by side or one on top of the other)
4. make sure that users can tab through the form, that is, they do not need a keyboard to navigate
5. ensure that your css allows for elements to show focus when they receive focus.

Also, a bit of client-side (e.g., javascript) validation is also very helpful.

You may want to check out some of the HTML5 form improvements too, which also help with accessibility.

http://diveintohtml5.ep.io/forms.html