Using Style Sheets (CSS) for Accessible, Visually-Appealing Web Sites

Fundamental Concepts

• Transforming gracefully =
  • operable on a variety of devices and browsers
  • appearance changes depending on user settings and tools
• Separation of structure and presentation

Separate structure, content from presentation, style, layout

• INCORRECT: Physical - appearance
  • <FONT SIZE="14pt"><B>Main Point</b> </font>
• CORRECT: Logical - meaning
  • <h1>Main Point</h1>

Structural Markup

• Headings
  • h1-h6
• Paragraphs
  • p
• Lists
  • ul = unordered list
  • ol = ordered list
• …

Activity: Web Page Structure

WCAG 1.0 Checkpoints, structure

• 3.5 Use header elements to convey document structure… @@ACCESS
• 3.6 Mark up lists and list items properly @@ACCESS

Tools

• HTML Validator outline - http://validator.w3.org/detailed.html

"But I want to make it look good!"

• Structure
  • HTML
• Presentation
  • CSS

Style Sheets (CSS)

• Tell browser how to display Web page
• Control
  • Color
  • Layout
  • Text
  • Interactivity
  • Display
  • …

Example: CSS

• Sample page with and without CSS

CSS: Benefits

• More presentation options
• Helps enforce site-wide standards
• More efficient transmission
• Configurability for accessibility and mobile devices
• Easier to change presentation
• Easier to edit HTML (human and tools)

CSS in the real world

• CSS Cross-Browser Support
  • Browser Compatibility Charts
    • Yes: font
    • Challenging: complex positioning
• Inheritance and cascading effect
• You can define multiple style sheets

CSS: Examples

• Marketing is changing colors, again!
• CSS code
• Learning CSS

WCAG 1.0 Checkpoints, CSS

• 3.3 Use style sheets to control layout and presentation @@ACCESS
• 6.1 Organize documents so they may be read without style sheets @@ACCESS
• 3.4 Use relative rather than absolute units in… style sheet property values

W3C Resources

• CSS Validator
• link to Accessibility Features of CSS @@ACCESS

CSS Demos