Universal Web Design - PowerPoint PPT Presentation

About This Presentation
Title:

Universal Web Design

Description:

Universal Web Design. Final Presentation. Greg Lanier. April 15, 2003. Contents ... Universal Web Design Principles 'More than just alt text' ... – PowerPoint PPT presentation

Number of Views:80
Avg rating:3.0/5.0
Slides: 33
Provided by: gregl1
Learn more at: http://www.cs.unc.edu
Category:
Tags: design | universal | web

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com