Layouts
Restrictions and Standards
While there are many sources for sample CSS-based layouts on the web (CSS Zen Garden
, glish.com, SSI-D), there are few that demonstrate stylesheets designed to conform to strictly accessible web design by using only relative units for sizing and positioning.
The layouts presented here are valid transitional XHTML 1.0. They use cascading style sheets for styling and positioning and use all relative units for positioning and sizing so that they conform with the following W3C WAI WCAG guidelines:
- 3.3 Use style sheets to control layout and presentation. [Priority 2]
- 3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2]
Unless otherwise noted, these layouts have been tested and found to have a consistent appearance in the following browsers and platforms:
- Windows: IE 5.0 (even at the default smaller text size), Netscape 6.0 (degrades gracefully in pre-6 Netscape), Opera 6.06, Mozilla 1.1, and Phoenix 0.1
- OS X: IE 5.2, Mozilla 1.5, Safari 1.2.1, Opera 6.0.3
- OS 9.2.2: Netscape 6.0, Opera 5.0, IE 5.0
- Yellow Dog Linux 3.0: Konqueror, Mozilla
We make the assumption that higher versions than those listed function consistently as well.
Sample Acessible Page Layouts
- 2 Column, Fixed Left
- 2 Column, Percent Left
- 3 Column Narrative, No Wrap
- 3 Column Narrative, No Wrap, More Precise
- 3 Column, Fixed Left & Right, Middle Resizes
- 4 Column, Fixed Left & Right, Middle Resizes
Last Updated: May 15, 2006 11:47 AM
|
|
