Embed Size (px)
DESCRIPTION
Citation preview
Designing and Evaluating Web Sites
using Universal Design PrinciplesIntegrating
Usability & Accessibility
Howard KramerUniversity of [email protected], 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)
Universal Design:How is this approach different?
What are the advantages? “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?
Yes or No
Universal Design Approachother 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
Flexibility Different platforms
Universal Design Approachother 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 Standardsour 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 AccessAlternate Text
Usability / Design Best Practices
Consistent & Clear NavigationVisibilityFeedbackVisual AlignmentTypographyUser control
Web Standards
Semantic MarkupSeparation of style from contentStandard coding
Semantic Markup
Semantic markup – provides meaning to structure and content of the page
http://www.colorado.edu/ODECE/UDAC/physics%20page-2.htm
Exercise 1Checking for Structure &
Semantics Headings Unordered lists (menu items) Title tag Description tag
Exercise 2Keyboard 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
Consistency of Navigation
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 – Title tag
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 | Home</title></head><body></body>...
</html> RETURN
Web Standard Particulars
Use keywords & description elements <head> <title> Accessing Higher Ground 2013 - Accessible Media,
Web and Technology Conference - Home Page</title> <meta name="description" content="16th Annual
Accessing Higher Ground: Accessible Media, Web & Technology Conference; for Higher Education, Business and the Public Sphere.">
<meta name="keywords" content="accessibility, universal design, alternate format, web design, disability, higher education, ADA, accommodations, assistive technology, AHEAD">
</head>
RETURNEXAMPLE
Description tag in action
RETURN
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/accessibil
ity-evaluation-toolb/
Juicy Studio Accessibility Toolbar https://addons.mozilla.org/en-us/firefox/addon/juicy-studi
o-accessibility-too/
Color Contrast Analyzer http://www.paciellogroup.com/resources/contrastAnalyse
r
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/webcom
p2012.html#resources
Other Resources A List Apart - Link-Rodrigue, The
Inclusion Principle, (article) http://www.alistapart.com/articles/the-inclusi
on-principle/
Usability.gov http://usability.gov/methods/test_refine/heuri
stic.html 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/Perso
nas WebAIM.org – The Legend of the Typical
… http://webaim.org/presentations/2010/csun/s
creenreadersurvey.pdf W3C Web Standards Curruculim
http://www.w3.org/community/webed/wiki/Main_Page
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 GroundConference
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
