Designing and Evaluating Web Sites using Universal Design Principles Integrating Usability & Accessibility Howard Kramer University of Colorado-Boulder AHEAD 2013

Presentation posted at slideshare Designing and Evaluating Web Sites using Universal Design Principles.pptx / Designing and Evaluating Web Sites using Universal Design Principles.pptx /

Introduction Grant Project: Grant Project: Promoting the Integration of Universal Design in University Curriculum (UDUC) Promoting the Integration of Universal Design in University Curriculum (UDUC) Conference: Conference: Accessing Higher Ground: Accessible Media, Web & Technology Accessing Higher Ground: Accessible Media, Web & Technology Class: Class: Universal Design for Digital Media - 14 week class Universal Design for Digital Media - 14 week class

Today’s Outline Review concepts of Universal Design Review concepts of Universal Design Review & apply concepts and principles of design best practices & usability to Web 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) 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.” “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) 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?’” “People sometimes ask me, ‘What about accessibility? Isn’t that part of usability?’” Steve Krug, ibid. Steve Krug, ibid.

Usability = Accessibility?

Universal Design Approach other advantages Sells better Sells better Developers - tune-out/turn-off on “accessibility” Developers - tune-out/turn-off on “accessibility” Respond to “best practices” Respond to “best practices” Business case Business case Other benefits Other benefits Search Search Reusability Reusability Navigation, better UX Navigation, better UX SEO/discoverability SEO/discoverability

Universal Design Approach other advantages Other audiences Other audiences Older populations Older populations Non-English speakers Non-English speakers Poor readers / non-readers Poor readers / non-readers Socio-economically disadvantaged / Poor access to technology Socio-economically disadvantaged / Poor access to technology

Universal Design What is 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 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 Equitable Use Flexibility in Use Flexibility in Use Simple and Intuitive Use Simple and Intuitive Use Perceptible Information Perceptible Information Tolerance for Error Tolerance for Error Low Physical Effort Low Physical Effort Size and Space for Approach and Use 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. Equitable Use: The design is useful and marketable to people with diverse abilities. Same means of use for all Same means of use for all No text-only versions No text-only versions Flexibility in Use: The design accommodates a wide range of individual preferences and abilities. 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) 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. 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 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. 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 Using Web Standards as a Universal Design foundation Web Standards – Web Standards – semantic (x)HTML markup semantic (x)HTML markup CSS layout, the separating of content from layout & formatting CSS layout, the separating of content from layout & formatting Standard coding 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 DesignAccessibilityKeyboard 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

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

s%20page-2.htm s%20page-2.htm

Example 2 – NY Times

The Semantic Web – Definitions Semantics (from Greek sēmantiká, neuter plural of sēmantikós - signifier)[1][2] is the study of meaning. It focuses on the relation between signifiers, such as words, phrases, signs and symbols, and what they stand for, their denotata. 1 Semantics (from Greek sēmantiká, neuter plural of sēmantikós - signifier)[1][2] is the study of meaning. It focuses on the relation between signifiers, such as words, phrases, signs and symbols, and what they stand for, their denotata. 1 The Semantic Web describes the relationships between things (like A is a part of B and Y is a member of Z) and the properties of things (like size, weight, age, and price)2 The Semantic Web describes the relationships between things (like A is a part of B and Y is a member of Z) and the properties of things (like size, weight, age, and price)2 1 Wikipedia 2

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

Exercise 2 Keyboard Access Can you tab to (and away from) all elements, including links, navigation, form fields, buttons, and media player controls? 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? Does the tab order follow the logical reading order? Is visual feedback provided for each object that receives focus? 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. Are all actions and visible feedback provided through the mouse also available via the keyboard.

Visibility & Feedback Outline around focused object Outline around focused object Non-text elements must have alternative text (to make them perceptible) Non-text elements must have alternative text (to make them perceptible) Alternative attribute Alternative attribute Captioning Captioning Transcripts Transcripts Proper placement of key text & information Proper placement of key text & information Reduction of noise 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: Select a web page of your choice. Examine it using any of the tools or criteria we have talked about today: Structure & semantics Structure & semantics Keyboard access Keyboard access Visibility/Perceptibility Visibility/Perceptibility Consistent navigation Consistent navigation Concise wording (minimal noise) Concise wording (minimal noise) Alignment/typography Alignment/typography

An Overview of Web Standard Particulars Declare a proper doctype Declare a proper doctype Declare a language in the doctype Declare a language in the doctype Declare the primary language of the site in the area Declare the primary language of the site in the area Title your page properly & uniquely Title your page properly & uniquely !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN“ " !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN“ " If your document is XHTML, use this: If your document is XHTML, use this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " "

Web Standard Particulars Declare a unique title for each page. Declare a unique title for each page. Title example Title example <html><head> Boulder Public Schools 2012 Boulder Public Schools 2012 </head><body></body>...</html>

Web Standard Particulars Use keywords & description elements Use keywords & description elements<head> Yahoo! UK & Ireland Eurosport—Sports News | Live Scores | Sport Yahoo! UK & Ireland Eurosport—Sports News | Live Scores | Sport </head>

Krug’s Recommendations Add alt text to every image Add alt text to every image Make your forms work with screen readers Make your forms work with screen readers (use the label tag) (use the label tag) Create a skip to main content link Create a skip to main content link Make all content available by keyboard Make all content available by keyboard Don’t use javascript without good reason Don’t use javascript without good reason Use client-side, not server-side, image maps Use client-side, not server-side, image maps

Books & Curriculum Material InterACT with Web Standards: A holistic approach to web design, Anderson, et. al. InterACT with Web Standards: A holistic approach to web design, Anderson, et. al. Zeldman, Jeffrey. Designing with Web Standards (3rd Edition) Zeldman, Jeffrey. Designing with Web Standards (3rd Edition) Chisholm & May. UD for Web Applications Chisholm & May. UD for Web Applications Norman, David A. The Design of Everyday Things (2002). Norman, David A. The Design of Everyday Things (2002). Cooper, Alan; Reimann Robert M. About Face 2.0: The Essentials of Interaction Design (2003) Cooper, Alan; Reimann Robert M. About Face 2.0: The Essentials of Interaction Design (2003)

Evaluation & Remediation Tools Wave (Toolbar) – wave.webaim.org Wave (Toolbar) – wave.webaim.org Achecker – Achecker – Web Dev’l Toolbar Web Dev’l Toolbar US/firefox/addon/web-developer/ US/firefox/addon/web-developer/ US/firefox/addon/web-developer/ US/firefox/addon/web-developer/ No Squint No Squint us/firefox/addon/nosquint/ us/firefox/addon/nosquint/

Evaluation & Remediation Tools cont’d Functional Accessibility Evaluator (aka accessibility toolbar) Functional Accessibility Evaluator (aka accessibility toolbar) evaluation-toolb/ evaluation-toolb/ evaluation-toolb/ evaluation-toolb/ Juicy Studio Accessibility Toolbar Juicy Studio Accessibility Toolbar accessibility-too / accessibility-too / accessibility-too / accessibility-too / Color Contrast Analyzer Color Contrast Analyzer Web Accessibility Toolbar Web Accessibility Toolbar

Tools & Resources Easy Checks - A First Review of Web Accessibility (WAI-EOWG) Easy Checks - A First Review of Web Accessibility (WAI-EOWG) Before & After Demos (BAD) Before & After Demos (BAD) Evaluation Tools 10 Evaluation Tools standards/accessibility_testtools/ standards/accessibility_testtools/ CU Web Design Awards Page CU Web Design Awards Page 2.html#resources 2.html#resources 2.html#resources 2.html#resources

Other Resources A List Apart - Link-Rodrigue, The Inclusion Principle, (article) A List Apart - Link-Rodrigue, The Inclusion Principle, (article) principle/ principle/ principle/ principle/ Usability.gov Usability.gov tml tml tml tml Sitepoint.com Sitepoint.com architecture architecture architecture architecture

Other Curriculum Resources First Principles of Interaction Design” First Principles of Interaction Design” ( ); ( ); “Personas” “Personas” WebAIM.org – The Legend of the Typical … WebAIM.org – The Legend of the Typical … readersurvey.pdf readersurvey.pdf readersurvey.pdf readersurvey.pdf W3C Web Standards Curruculim W3C Web Standards Curruculim age age age age

Projects/Resources at CU, AHEAD, ATHEN 3-credit class: Universal Design for Digital Media 3-credit class: Universal Design for Digital Media ATHEN – Access Tech. Higher Ed. Network ATHEN – Access Tech. Higher Ed. Network Athenpro.org Athenpro.org NEA Grant - Promoting the Integration of UD into University Curriculum (UDUC) 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 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 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 November 4 – 8, 2013 Hands-on sessions on Web Access, Assistive Technology Hands-on sessions on Web Access, Assistive Technology Upcoming teleconferences Upcoming teleconferences Can purchase audio dvd of proceedings & access materials & handouts online Can purchase audio dvd of proceedings & access materials & handouts online Westin Hotel - between Boulder & Denver Westin Hotel - between Boulder & Denver Accessinghigherground.org Accessinghigherground.org