Design Examples

This Web site serves as an example of accessible design according to the accessibility guidelines it presents, and it has been fully tested. Designer note: CSS is used to specify all formatting and positioning - no layout tables were used. The skip navigation features at the top of each page are visible instead of hidden simply as an alternative.

Developers and designers who are new to accessible Web design are encouraged to explore the following examples to find inspiration for their own creations. Remember that these examples may not include all techniques, so they may not be fully accessible according to the guidelines specified on this Web site.

Think CSS is Boring? Think Again...

• Ordered List
  URL: http://www.orderedlist.com/
  W3C-compliant code and all-CSS. Check out the ability to switch designs using the links in the sidebar.
  
  
• CSS Zen Garden
  URL: http://www.csszengarden.com/
  This Web site uses strict XHTML. Web designers submit their designs, which become part of a selectable list. Some of these designs also clearly demonstrate the need for cross-browser testing.
  
  
• css/edge
  URL: http://www.meyerweb.com/eric/css/edge/
  Created by CSS master Eric Meyer, see his demos in the sidebar to overlay different style sheets on the same page created with simple HTML 4.0 markup devoid of JavaScript or any proprietary scripting technologies.
  
  
• Denver Public Schools
  URL: http://www.dpsk12.org/
  The use of XHTML and CSS helps Denver Public Schools ensure that their content is accessible to a variety of display devices.
  
  

Overall Accessibility

• WebAIM
  URL: http://www.webaim.org/
  A great example of overall, universal accessibility. Their pleasing, simple design focuses on presenting content to the widest audience possible. Pages are designed in XHTML.
  
  

Accessible Tables

• Denver Recycles
  URL: http://www.denvergov.org/denverrecycles
  This accessible design using HTML 4.0 incorporates layout and data tables, but with relative sizing, which also linearize well when disabled. Skip navigation, accesskeys and hyperlink title references are used in the navigation. It also includes a pleasing, high-contrast color palette.