Designing and evaluating web sites using universal design principles (hands on)
-
Upload
howard-kramer -
Category
Design
-
view
2.658 -
download
0
description
Transcript of Designing and evaluating web sites using universal design principles (hands on)
![Page 1: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/1.jpg)
Designing and Evaluating Web Sites
using Universal Design PrinciplesIntegrating
Usability & Accessibility
Howard KramerUniversity of [email protected], 303-492-8672
AHEAD 2013
![Page 2: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/2.jpg)
Presentation posted at slideshare
http://slideshare.com/hkramer99/
Designing and Evaluating Web Sites using Universal Design Principles.pptx /
![Page 3: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/3.jpg)
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
![Page 4: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/4.jpg)
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)
![Page 5: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/5.jpg)
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.
![Page 6: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/6.jpg)
Usability = Accessibility?
Yes or No
![Page 7: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/7.jpg)
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
![Page 8: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/8.jpg)
Universal Design Approachother advantages
Other audiences Older populations Non-English speakers Poor readers / non-readers Socio-economically disadvantaged /
Poor access to technology
![Page 9: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/9.jpg)
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
![Page 10: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/10.jpg)
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
![Page 11: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/11.jpg)
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.
![Page 12: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/12.jpg)
Web Standardsour strategy for UD for the Web
![Page 13: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/13.jpg)
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
![Page 14: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/14.jpg)
![Page 15: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/15.jpg)
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
![Page 16: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/16.jpg)
Semantic Markup
Semantic markup – provides meaning to structure and content of the page
![Page 17: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/17.jpg)
http://www.colorado.edu/ODECE/UDAC/physics%20page-2.htm
![Page 19: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/19.jpg)
Exercise 1Checking for Structure &
Semantics Headings Unordered lists (menu items) Title tag Description tag
![Page 20: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/20.jpg)
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.
![Page 21: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/21.jpg)
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
![Page 23: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/23.jpg)
Consistency of Navigation
![Page 28: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/28.jpg)
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
![Page 29: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/29.jpg)
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
![Page 30: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/30.jpg)
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
![Page 31: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/31.jpg)
Description tag in action
RETURN
![Page 32: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/32.jpg)
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)
![Page 33: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/33.jpg)
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/
![Page 34: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/34.jpg)
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
![Page 35: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/35.jpg)
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
![Page 36: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/36.jpg)
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
![Page 37: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/37.jpg)
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
![Page 38: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/38.jpg)
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
![Page 39: Designing and evaluating web sites using universal design principles (hands on)](https://reader034.fdocuments.us/reader034/viewer/2022051816/5457c188af79592b448b51ad/html5/thumbnails/39.jpg)
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