1 / 38

Designing and Evaluating Web Sites using Universal Design Principles

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/

thalia
Download Presentation

Designing and Evaluating Web Sites using Universal Design Principles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  2. Presentation posted at slideshare http://slideshare.com/hkramer99/ Designing and Evaluating Web Sites using Universal Design Principles.pptx /

  3. 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

  4. 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)

  5. 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.

  6. Usability = Accessibility?

  7. 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

  8. Universal Design Approachother advantages • Other audiences • Older populations • Non-English speakers • Poor readers / non-readers • Socio-economically disadvantaged / Poor access to technology

  9. 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

  10. 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

  11. 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.

  12. Web Standardsour strategy for UD for the Web

  13. 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

  14. Universal Design – pyramid comprised of Web Standards Foundation, followed above with Usability / Design Best Practices with Accessibility at the top of the pyramid

  15. Semantic Markup • Semantic markup – provides meaning to structure and content of the page

  16. http://www.colorado.edu/ODECE/UDAC/physics%20page-2.htm

  17. Example 2 – NY Times

  18. Exercise 1Checking for Structure & Semantics • Headings • Unordered lists (menu items) • Title tag • Description tag

  19. 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.

  20. 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

  21. Avoid Screen Clutter & Dense Text

  22. Consistency of Navigation

  23. Low Density Text for Home page

  24. Information grouped for easier scanning

  25. Exercise 4Color Contrast

  26. Exercise 5Text Enlargement

  27. 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

  28. 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>

  29. 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>

  30. 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)

  31. 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/

  32. 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

  33. 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

  34. 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

  35. 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

  36. 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

  37. 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

More Related