Designing and Evaluating
Web Sites using Universal
Design Principles
Integrating
Usability & Accessibility
Howard Kramer
University of Colorado-Boulder
hkramer@colorado.edu, 303-492-8672
AHEAD 2013
Presentation posted at
slideshare
http://slideshare.com/hkramer99/
Designing and Evaluating Web
Sites using Universal Design
Principles.pptx /
Introduction

Grant Project:


Conference:


Promoting the Integration of Universal
Design in University Curriculum (UDUC)
Accessing Higher Ground: Accessible Media,
Web & Technology
Class:

Universal Design for Digital Media - 14 week
class
Today’s Outline



Review concepts of Universal Design
Review & apply concepts and principles of
design best practices & usability to Web
design
Conduct exercises that will teach you to
identify when sites incorporate UD and
best design practices (& when they don’t)
A Different Approach?

“Making sites more usable for ‘the rest of
us’ is one of the most effective ways to
make them more effective for people with
disabilities.”


Steve Krug, Don’t Make Me Think! A Common
Sense Approach to Web Usability (2006)
“People sometimes ask me, ‘What about
accessibility? Isn’t that part of usability?’”

Steve Krug, ibid.
Usability = Accessibility?
Universal Design Approach
other advantages

Sells better




Developers - tune-out/turn-off on
“accessibility”
Respond to “best practices”
Business case
Other benefits




Search
Reusability
Navigation, better UX
SEO/discoverability
Universal Design Approach
other advantages

Other audiences




Older populations
Non-English speakers
Poor readers / non-readers
Socio-economically disadvantaged / Poor
access to technology
Universal Design

What is Universal Design?

Universal Design is the design of products
and environments to be usable by all
people, to the greatest extent possible,
without the need for adaptation or
specialized design – Ron Mace, Architect
7 Principles of Universal Design







Equitable Use
Flexibility in Use
Simple and Intuitive Use
Perceptible Information
Tolerance for Error
Low Physical Effort
Size and Space for Approach and Use
Universal Design for Digital Media

Equitable Use: The design is useful and marketable to people
with diverse abilities.



Flexibility in Use: The design accommodates a wide range
of individual preferences and abilities.


Same means of use for all
No text-only versions
Accommodates user-defined style sheets (such as the high-contrast
text style that an individual with weak eyesight would use)
Simple and Intuitive: Use of the design is easy to understand,
regardless of the user's experience, knowledge, language skills, or
current concentration level.

Multiple ways of presenting info that is contained in images,
graphs, audio, video, or other forms of media

Tolerance for Error: The design minimizes hazards and the
adverse consequences of accidental or unintended actions.
Web Standards
our strategy for UD for the Web
Web Standards

Using Web Standards as a Universal
Design foundation

Web Standards –
semantic (x)HTML markup
 CSS layout, the separating of content from layout
& formatting
 Standard coding

Universal Design – pyramid comprised of Web Standards
Foundation, followed above with Usability / Design Best
Practices with Accessibility at the top of the pyramid
Universal Design
Accessibility
Keyboard Access
Alternate Text
Usability / Design Best
Practices
Consistent & Clear
Navigation
Visibility
Feedback
Visual Alignment
Typography
User control
Web
Standards
Semantic Markup
Separation of style from
content
Standard coding
Semantic Markup

Semantic markup – provides meaning to
structure and content of the page
http://www.colorado.edu/ODECE/UDAC/physic
s%20page-2.htm

Example 2 – NY Times
Exercise 1
Checking for Structure &
Semantics
 Headings
 Unordered
 Title
lists (menu items)
tag
 Description
tag
Exercise 2
Keyboard Access




Can you tab to (and away from) all elements,
including links, navigation, form fields, buttons,
and media player controls?
Does the tab order follow the logical reading
order?
Is visual feedback provided for each object that
receives focus?
Are all actions and visible feedback provided
through the mouse also available via the
keyboard.
Visibility & Feedback


Outline around focused object
Non-text elements must have alternative
text (to make them perceptible)





Alternative attribute
Captioning
Transcripts
Proper placement of key text &
information
Reduction of noise
Avoid Screen Clutter & Dense Text
Consistency of Navigation
Low Density Text for Home page
Information grouped for easier scanning
Exercise 4
Color Contrast
Exercise 5
Text Enlargement
Final Exercise

Select a web page of your choice.
Examine it using any of the tools or
criteria we have talked about today:






Structure & semantics
Keyboard access
Visibility/Perceptibility
Consistent navigation
Concise wording (minimal noise)
Alignment/typography
Web Standard Particulars

Declare a unique title for each page.


Title example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Boulder Public Schools 2012</title>
</head>
<body>
</body>
...
</html>
Web Standard Particulars

Use keywords & description elements
<head>
<title>Yahoo! UK & Ireland Eurosport—Sports News | Live Scores
| Sport</title>
<meta name="description" content="Latest sports news and live
scores from Yahoo! Eurosport UK. Complete sport coverage with
Football results, Cricket scores, F1, Golf, Rugby, Tennis and
more.">
<meta name="keywords" content="eurosport,sports,sport,sports
news,live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo">
</head>
Books & Curriculum Material





InterACT with Web Standards: A
holistic approach to web design,
Anderson, et. al.
Zeldman, Jeffrey. Designing with
Web Standards (3rd Edition)
Chisholm & May. UD for Web
Applications
Norman, David A. The Design of
Everyday Things (2002).
Cooper, Alan; Reimann Robert M.
About Face 2.0: The Essentials of
Interaction Design (2003)
Evaluation & Remediation Tools


Wave (Toolbar) – wave.webaim.org
Achecker –


Web Dev’l Toolbar


http://achecker.ca/
https://addons.mozilla.org/enUS/firefox/addon/web-developer/
No Squint

https://addons.mozilla.org/enus/firefox/addon/nosquint/
Evaluation & Remediation Tools cont’d

Functional Accessibility Evaluator 1.5.7 (aka
accessibility toolbar)


Juicy Studio Accessibility Toolbar


https://addons.mozilla.org/en-us/firefox/addon/juicy-studioaccessibility-too/
Color Contrast Analyzer


https://addons.mozilla.org/en-US/firefox/addon/accessibilityevaluation-toolb/
http://www.paciellogroup.com/resources/contrastAnalyser
Web Accessibility Toolbar

http://www.paciellogroup.com/resources/wat/ie
Tools & Resources

Easy Checks - A First Review of Web
Accessibility (WAI-EOWG)


Before & After Demos (BAD)


http://www.w3.org/WAI/demos/bad/
10 Evaluation Tools


http://www.w3.org/WAI/eval/preliminary.html
http://sixrevisions.com/webstandards/accessibility_testtools/
CU Web Design Awards Page

http://www.colorado.edu/ODECE/UDAC/webcomp201
2.html#resources
Other Resources

A List Apart - Link-Rodrigue, The Inclusion
Principle, (article)


Usability.gov


http://www.alistapart.com/articles/the-inclusionprinciple/
http://usability.gov/methods/test_refine/heuristic.h
tml
Sitepoint.com

http://articles.sitepoint.com/article/informationarchitecture
Other Curriculum Resources

First Principles of Interaction Design”


“Personas”


http://wiki.fluidproject.org/display/fluid/Personas
WebAIM.org – The Legend of the Typical …


(http://www.asktog.com/basics/firstPrinciples.html
);
http://webaim.org/presentations/2010/csun/screen
readersurvey.pdf
W3C Web Standards Curruculim

http://www.w3.org/community/webed/wiki/Main_P
age
Projects/Resources at CU,
AHEAD, ATHEN

3-credit class: Universal Design for Digital Media


ATHEN – Access Tech. Higher Ed. Network


http://accessinghigherground.org/wp/udclass/
Athenpro.org
NEA Grant - Promoting the Integration of UD
into University Curriculum (UDUC)


Breakfast Meeting at AHEAD: Thursday, July 11, 7:45
- 8:45 a.m. - Poe Room - second floor
Presentation: Friday, July 12, 2:00 – 4:00 pm.
Latrobe Room - first floor
Accessing Higher Ground
Conference
Accessible Media, Web & Technology






November 4 – 8, 2013
Hands-on sessions on Web Access, Assistive
Technology
Upcoming teleconferences
Can purchase audio dvd of proceedings & access
materials & handouts online
Westin Hotel - between Boulder & Denver
Accessinghigherground.org