Universal%20Web%20Design

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

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

3
7
WCAG Checklist of Guidelines

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

3
8
WCAG Checklist of Guidelines

1. Design for device-independence.
2. Use interim solutions.
3. Use W3C technologies and guidelines.
4. 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