380 likes | 522 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/
E N D
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.
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
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 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
Semantic Markup • Semantic markup – provides meaning to structure and content of the page
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
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,sportsnews,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/webcomp2012.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.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/Personas • WebAIM.org – The Legend of the Typical … • http://webaim.org/presentations/2010/csun/screenreadersurvey.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
AccessingHigher 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