(CSS) Accessible CSS Forms: Using CSS to Create a Two-Column Layout - fael

Thu, 31 Aug 2006 13:20:42 GMT

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 websites have become more complex and less accessible over time (Hackett 2003). Less than 20% of the Fortune 100 have websites 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 (see Figure 1).

(XHTML) XHTML 1.1 web standards template - fael

Sun, 02 Jul 2006 19:24:11 GMT

This is a generic template for an XHMTL 1.1 doc that I start with at the beginning of every project. Then i setup the directories to match. I use @import for CSS, then a seperate CSS file for screen-specific, and then one for print, …yes, then one for IE. I have the basic DIV structure setup, too. For a link to the inspiration of this template and further explanation (better), see this wonderful article: http://particletree.com/features/quick-start-your-design-with-xhtml-templates/ Hope it helps!

Snipplr

(CSS) Accessible CSS Forms: Using CSS to Create a Two-Column Layout - fael

(XHTML) XHTML 1.1 web standards template - fael