Designing and Evaluating

wrendeceitInternet and Web Development

Oct 21, 2013 (4 years and 2 months ago)

111 views

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:


Promoting the Integration of Universal
Design in University Curriculum
(UDUC)


Conference:


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.


Same means of use for all


No text
-
only versions


Flexibility in Use:
The design accommodates a wide range
of individual preferences and abilities.


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 lists (menu items)


Title 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




http://achecker.ca/



Web
Dev’l

Toolbar


https://addons.mozilla.org/en
-
US/firefox/addon/web
-
developer/


No Squint


https://addons.mozilla.org/en
-
us/firefox/addon/nosquint/


Evaluation & Remediation Tools cont’d


Functional Accessibility Evaluator 1.5.7
(aka
accessibility toolbar)


https://addons.mozilla.org/en
-
US/firefox/addon/accessibility
-
evaluation
-
toolb/


Juicy Studio Accessibility Toolbar


https://addons.mozilla.org/en
-
us/firefox/addon/juicy
-
studio
-
accessibility
-
too
/



Color Contrast Analyzer


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)


http://www.w3.org/WAI/eval/preliminary.html


Before & After Demos (BAD)


http://www.w3.org/WAI/demos/bad/


10 Evaluation Tools


http://sixrevisions.com/web
-
standards/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)


http://www.alistapart.com/articles/the
-
inclusion
-
principle/



Usability.gov


http://usability.gov/methods/test_refine/heuristic.h
tml


Sitepoint.com


http://articles.sitepoint.com/article/information
-
architecture

Other Curriculum Resources


First Principles of Interaction Design”


(
http://www.asktog.com/basics/firstPrinciples.html
);


“Personas”


http://wiki.fluidproject.org/display/fluid/Personas


WebAIM.org


The Legend of the Typical …


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


http://accessinghigherground.org/wp/udclass/


ATHEN



Access Tech. Higher Ed. Network


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