Transcript Designing and Evaluating Web Sites Using Universal
Designing and Evaluating Web Sites using Universal Design Principles
Integrating Usability & Accessibility
Howard Kramer University of Colorado-Boulder [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 class - 14 week
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.
Usability = Accessibility?
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
Universal Design Approach
other 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 : current concentration level.
Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or 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 our 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 Usability / Design Best Practices Web Standards Keyboard Access Alternate Text Consistent & Clear Navigation Visibility Feedback Visual Alignment Typography User control Semantic Markup Separation of style from content Standard coding
Semantic Markup
Semantic markup – provides meaning to structure and content of the page
http://www.colorado.edu/ODECE/UDAC/physic s%20page-2.htm
Example 2 – NY Times
Exercise 1 Checking for Structure & Semantics Headings
Unordered lists (menu items)
Title tag
Description tag
Exercise 2 Keyboard Access
Can you tab to (and away from) all elements and media player controls?
, including links, navigation, form fields, buttons, Does the order?
tab order follow the logical reading 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
Avoid Screen Clutter & Dense Text
Consistency of Navigation
Low Density Text for Home page
Information grouped for easier scanning
Exercise 4 Color Contrast
Exercise 5 Text Enlargement
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
Web Standard Particulars Use keywords & description elements
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/webcomp201 2.html#resources
Other Resources
A List Apart - Link-Rodrigue, Principle, (article) The Inclusion 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
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
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 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