Download Final Project Presentation

Universal Web Design
Final Presentation
Greg Lanier
April 15, 2003
Contents
1
•
•
•
•
•
•
•
Review of project objectives
WCAG
Basics of Universal Design
Universal Web Design Principles
Demonstrations
Accessible Google
Final steps
Review of project objectives
2
• 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
Review of project objectives
2
• 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.
WCAG
3
• 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?
WCAG: Checklist of Guidelines
3
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.
WCAG: Checklist of Guidelines
3
5. Create tables that transform
gracefully.
6. Ensure that pages featuring new
technologies transform gracefully.
7. Ensure user control of time-sensitive
content changes.
8. Ensure direct accessibility of
embedded user interfaces.
WCAG: Checklist of Guidelines
3
10. Design for device-independence.
11. Use interim solutions.
12. Use W3C technologies and
guidelines.
13. Provide context and orientation
information.
WCAG: Checklist of Guidelines
3
14. Provide clear navigation
mechanisms.
15. Ensure that documents are clear and
simple.
(source: http://www.w3.org/TR/WAIWEBCONTENT/ )
Basics of Universal Design
• Definition:
4
– 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
Basics of Universal Design
Fundamental Principles
4
1.
2.
3.
4.
5.
6.
7.
Equitable use
Flexibility in use
Simple and intuitive
Perceptible information
Tolerance for error
Low physical effort
Size and space for appropriate use
Universal Web Design Principles
• “More than just alt text”
5
• Larger amount of energy spent on
conceptualization than on
implementation
• Haphazard application of WCAG
yields compliant but sub optimal
websites
Universal Web Design Principles
5
WCAG Standards
Section 508 Guidelines
XHTML
Strategy & Differentiation
Applied UD
Creativity
Persistent Testing
Successful
User
Experience
Universal Web Design Principles
5
• Use knowledge of published
standards simply as tools
• Key is learning to USE the tools
Universal Web Design Principles
• Suggestion 1: back to the basics
5
– 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.
Universal Web Design Principles
• Suggestion 2: adding style
5
– Use Cascading Style Sheets not only
to control colors and fonts but also to
arrange elements on the page
– UD: flexibility
Universal Web Design Principles
• Suggestion 3: deliberate
navigation schemes
5
– Jump links
– Consistent navigation links
– Breadcrumbs or trees
– UD: simple and intuitive
Universal Web Design Principles
• Suggestion 4: allow high user
control
5
– Strict font and layout control used to
be the competitive advantage
– Scalable fonts, adjustable widths,
and customizable colors are new
differentiators
– UD: perceptible information
Universal Web Design Principles
• Suggestion 5: logical content
placement
5
– Screen reader’s cursor progression
down the page should reflect the
document structure
– Use CSS positioning and layers to
arrange things visually for sighted
users
Universal Web Design Principles
• Suggestion 6: conditional
element visibility
5
– 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
Demonstrations
6
• Three sites and one goal: to prove
that universal design principles do
enhance creativity while improving
the Web – more accessibility,
cleaner content structure, lessbloated code, lower bandwidth
usage.
Demonstrations: SpaceX
• Commuter spacecraft developer
• Stylistic but dependent on images (with
no alt text), frames, and flash
6
• 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
Demonstrations: Weather.com
6
• 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
Demonstrations: Student Government
6
• SBP and Jim Kessler
• Desire to create the “goldstandard” student group site
• Improve communication between
students and government
• Extremely high visual appeal
mixed with professionalism and
effective content presentation
Accessible Google
• Search results too complicated to
browse using a screen reader
• Diagnostics:
7
– XHTML: 1441 errors (23.2
errors/line)
– WCAG: 44% of code has errors
– Code ratio of 5.15
Accessible Google
• Complaints:
7
– 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
Accessible Google
• Solutions
7
– Full redesign with XHTML/CSS
– User preferences and data hiding
– Embedded “jump links” to facilitate
transportation on the page
– Logical content markup
Schematic
1
2
3
2
1
3
Schematic
2
1
3
1 2
Schematic
2
3
1
2
1
2
1
2
1
2
Accessible Google
• Other benefits
7
– 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
Finishing the project
8
• 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