Designing and evaluating web sites using universal design principles (hands on)

4,060 views

Published on

Published in: Design, Technology
  • Be the first to comment

Designing and evaluating web sites using universal design principles (hands on)

  1. 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. 2. Presentation posted at slideshare http://slideshare.com/hkramer99/ Designing and Evaluating Web Sites using Universal Design Principles.pptx /
  3. 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. 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. 5. 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.
  6. 6. Usability = Accessibility? Yes or No
  7. 7. 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  Flexibility  Different platforms
  8. 8. Universal Design Approach other advantages  Other audiences  Older populations  Non-English speakers  Poor readers / non-readers  Socio-economically disadvantaged / Poor access to technology
  9. 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. 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. 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. 12. Web Standards our strategy for UD for the Web
  13. 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. 14. 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
  15. 15. Semantic Markup  Semantic markup – provides meaning to structure and content of the page
  16. 16. http://www.colorado.edu/ODECE/UDAC/physic s%20page-2.htm
  17. 17. Example 2 – NY Times
  18. 18. Exercise 1 Checking for Structure & Semantics  Headings  Unordered lists (menu items)  Title tag  Description tag
  19. 19. 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.
  20. 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. 21. Avoid Screen Clutter & Dense Text
  22. 22. Consistency of Navigation
  23. 23. Low Density Text for Home page
  24. 24. Information grouped for easier scanning
  25. 25. Exercise 4 Color Contrast
  26. 26. Exercise 5 Text Enlargement
  27. 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. 28. 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
  29. 29. 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 &amp; 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
  30. 30. Description tag in action RETURN
  31. 31. 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)
  32. 32. 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/
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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

×