Web sites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade.

In a recent study of Web design patterns, Dr. Melody Ivory found that accessibility is the most underutilized aspect of good Web page design (Ivory 2005). In fact Web sites have become more complex and less accessible over time (Hackett 2003). Less than 20% of the Fortune 100 have Web sites that are fully accessible (Loiacono 2004). Accessible forms are one way to combat this disturbing trend. With CSS layout, you can create two-column forms without the use of tables to save space and time. This article shows how to create a simple two-column contact form using CSS to style structural elements that is both fast and accessible.

A survey of CSS-based forms revealed many variations on a theme (see Vandersluis 2004). Most use block-level floats and margins to position form elements on the page. However, in my testing I found IE5.x Mac to have rendering problems with many of these forms. After numerous iterations, I arrived at a solution that worked for IE5.x Mac as well as Safari 1.07 Mac, Firefox 1.07 Win/Mac, IE 6 Win, Camino, and Opera. Our goal here is to create a simple accessible contact form without the use of tables.

[Matt Hockin]

Tags: css, two-column layout, matt hockin, websiteoptimization.com, css form