Designing Using UIUC Best Practices

This page contains examples of using html and CSS markup to make web pages easier to style and more accessible to people with disabiltiies. More information at UIUC Best Practices for User Centered Web Design.

Use Headings for Main Topics

• Heading level 1 (H1): Page title
• Heading level 2 (H2): Primary topics in content part of page and titles for navigation bars
• Heading level 3 (H3): Seconday topics under primary topics
• Heading level 4 (H4): Third level topics under secondary topics

Use UL, OL and LI for ordered and unorder lists

Unorder list with default bullets

• Item A
• Item B
• Item C

Unordered list with circle bullet type

• Item A
• Item B
• Item C

Unordered list with square bullet type

• Item A
• Item B
• Item C

Unordered list with custom bullet images

• Item A
• Item B
• Item C

Ordered list with default numbering

1. Item 1
2. Item 2
3. Item 2

Ordered list with custom numbering

1. Item 1
2. Item 2
3. Item 2

Use DL, DT, DD for definition list

Definition Title 1

First definition for title 1

Second definition for title 1

Definition Title 2

First definition for title 2

Second definition for title 2

Images

• Be sure to add text descriptions to images with ALT attribute
• For images that need lnger descriptions, provide a text description in the context of the document

Data Table Example using Data Table Headers

An ADA Compliant Table

names	addresses	phone numbers
Joe's name	Joe's address	joe's phone number
sayantani's name	sayantani's address	sayantani's phone number

Other Resources

• Illinois Center on Instructional Technology Accessibility (iCITA)
• Web Accessibility In Mind (WebAIM)
• W3C Web Accessibility Initiative
• IMS Global Learning Consortium, Inc.
• University of Washington: Access IT
• University of Wisconsin: Trace Center
• Georgia Tech: Information Technology Technical Assistance and Training Center (ITTATC)
• WGBH Boston: National Center on Accessible Media
• Marucco, Stoddard, Ferenbach & Walsh, Inc (MSF&W)