Universal Web Design

1
Universal Web Design

• Final Presentation
• Greg Lanier
• April 15, 2003

2
Contents
1

• Review of project objectives
• WCAG
• Basics of Universal Design
• Universal Web Design Principles
• Demonstrations
• Accessible Google
• Final steps

3
Review of project objectives

• Reasons for choosing this topic
• Roots of Web inaccessibility
• Legal context
• Section 508 federal agencies
• ADA Title III commercial and non-profit
• Legal cases
• Goal fuse accessibility, standards compliance,
  and creativity

2
4
Review of project objectives

• Premise
• Engineering a web resource to be universal not
  just "accessible" in a standards-compliance sense
  leads to better overall design for everyone,
  regardless of visual, mental, or other
  differences.

2
5
WCAG

• Web Content Accessibility Guidelines
• Goals of WCAG 1.0
• Make Web content accessible to people with
  disabilities
• Propose a set of guidelines to be used by Web
  developers and software developers
• Help anyone, regardless of disability or user
  agent, find information better
• Sound familiar?

3
6
WCAG Checklist of Guidelines

• Provide equivalent alternatives to auditory and
  visual content.
• Don't rely on color alone.
• Use markup and style sheets and do so properly.
• Clarify natural language usage.

3
7
WCAG Checklist of Guidelines

• Create tables that transform gracefully.
• Ensure that pages featuring new technologies
  transform gracefully.
• Ensure user control of time-sensitive content
  changes.
• Ensure direct accessibility of embedded user
  interfaces.

3
8
WCAG Checklist of Guidelines

• Design for device-independence.
• Use interim solutions.
• Use W3C technologies and guidelines.
• Provide context and orientation information.

3
9
WCAG Checklist of Guidelines

• Provide clear navigation mechanisms.
• Ensure that documents are clear and simple.
• (source http//www.w3.org/TR/WAI-WEBCONTENT/ )

3
10
Basics of Universal Design

• Definition
• The design of products and environments to be
  usable by all people, to the greatest extent
  possible, without the need for adaptation or
  special design
• Center for Universal Design at NCSU
• Trace Center at Univ. of Wisconsin
• Generally focused on structures, especially
  housing

4
11
Basics of Universal Design

• Fundamental Principles
• Equitable use
• Flexibility in use
• Simple and intuitive
• Perceptible information
• Tolerance for error
• Low physical effort
• Size and space for appropriate use

4
12
Universal Web Design Principles

• More than just alt text
• Larger amount of energy spent on
  conceptualization than on implementation
• Haphazard application of WCAG yields compliant
  but sub optimal websites

5
13
Universal Web Design Principles

• WCAG Standards
• Section 508 Guidelines
• XHTML
• Strategy Differentiation
• Applied UD
• Creativity
• Persistent Testing

Successful User Experience
5
14
Universal Web Design Principles

• Use knowledge of published standards simply as
  tools
• Key is learning to USE the tools

5
15
Universal Web Design Principles

• Suggestion 1 back to the basics
• HTML is not a graphic design language
• Focus on the organization of content first, then
  use headers, paragraphs, images, links, and
  tables to present content
• Stay focused on content and not form.

5
16
Universal Web Design Principles

• Suggestion 2 adding style
• Use Cascading Style Sheets not only to control
  colors and fonts but also to arrange elements on
  the page
• UD flexibility

5
17
Universal Web Design Principles

• Suggestion 3 deliberate navigation schemes
• Jump links
• Consistent navigation links
• Breadcrumbs or trees
• UD simple and intuitive

5
18
Universal Web Design Principles

• Suggestion 4 allow high user control
• Strict font and layout control used to be the
  competitive advantage
• Scalable fonts, adjustable widths, and
  customizable colors are new differentiators
• UD perceptible information

5
19
Universal Web Design Principles

• Suggestion 5 logical content placement
• Screen readers cursor progression down the page
  should reflect the document structure
• Use CSS positioning and layers to arrange things
  visually for sighted users

5
20
Universal Web Design Principles

• Suggestion 6 conditional element visibility
• Hidden navigation links help the user that is
  blind understand how to move through the document
• Use alternate style sheets to hide visual fluff
  from screen readers and streamline how page is
  read

5
21
Demonstrations

• Three sites and one goal to prove that
  universal design principles do enhance creativity
  while improving the Web more accessibility,
  cleaner content structure, less-bloated code,
  lower bandwidth usage.

6
22
Demonstrations SpaceX

• Commuter spacecraft developer
• Stylistic but dependent on images (with no alt
  text), frames, and flash
• Results of re-design
• Code ratio of 2.62
• XHTML Strict, WCAG, and Section 508
• No frames, scalable text, logical markup
• Nearly a carbon-copy

6
23
Demonstrations Weather.com

• One of the worst diagnoses
• Not very visually appealing too many tables
  heavy content
• Results of re-design
• Code ratio 13.5 down to 3.9
• XHTML 977 (1.8/line) errors to 0
• WCAG 187 errors (35.6 of code) to 0
• Relative sizing, enhanced appearance

6
24
Demonstrations Student Government

• SBP and Jim Kessler
• Desire to create the gold-standard student
  group site
• Improve communication between students and
  government
• Extremely high visual appeal mixed with
  professionalism and effective content presentation

6
25
Accessible Google

• Search results too complicated to browse using a
  screen reader
• Diagnostics
• XHTML 1441 errors (23.2 errors/line)
• WCAG 44 of code has errors
• Code ratio of 5.15

7
26
Accessible Google

• Complaints
• To much content to dig through to find results
• Extraneous, non-valuable info
• Too many links before and after the query box
• Difficult to gauge where you are on the page
• Illogical/inefficient tab progression

7
27
Accessible Google

• Solutions
• Full redesign with XHTML/CSS
• User preferences and data hiding
• Embedded jump links to facilitate
  transportation on the page
• Logical content markup

7
28
Schematic
1
2
3
2
3
1
29
Schematic
2
3
1
1
2
30
Schematic
2
3
1
2
1
2
1
2
1
2
31
Accessible Google

• Other benefits
• Full XHTML validation with most stringent
  criteria (XHTML Strict 1.0)
• Full compliance with WCAG and Section 508
• Code ratio went from 5.15 to 3.68

7
32
Finishing the project

• Test Accessi-Google with Jason or another
  individual with visual impairment
• Finish implementing Student Government
• Try to sell Weather and Google redesigns to
  parent companies

8