Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A Web Standards & UD  Approach to AccessIntegrating Universal Design,Best Practices, & Accessibility            Howard Kra...
Presentation posted at       slidesharehttp://slideshare.com/hkramer99/Integrating Universal Design, Best Practices, & Acc...
Today’s Outline   What are Best Practices (Web Standards)    & Universal Design       How does it compare to ―Accessibil...
Today’s Objectives   Understand the intersection &    interrelationship between Web Standards,    Universal Design and Ac...
Framework or Model for Today’s            Talk  Conceptual vs. the      Technical
Framework or Model for Today’s            Talk
Defining Our Terms   What do I mean “Best Practices”?       Web Standards       User-centered design       Interaction...
Universal Design for Digital Media   What is Universal Design?       Universal Design is the design of products        a...
Web Standards / Universal Design –               Definitions   Using Web Standards & Universal Design    as foundation   ...
Best Practices vs. Web Standards /          What is Best Practices?   Web Standards   User-Centered Design       User T...
Definitions & Historic Context   The Web Standards Project (WaSP) The   Why  TheWay we   Were – 1998    No standards   ...
Definitions & Historic Context         The Web Standards Project (WaSP)   What, Why, Who are Web Standards?       Web St...
(More) Benefits of Web Standards   Easier for people & search engines to find your    content – (including AT users)   S...
7 Principles of Universal Design   Equitable Use   Flexibility in Use   Simple and Intuitive Use   Perceptible Informa...
Universal Design for Digital Media   Equitable Use: The design is useful and marketable to people    with diverse abiliti...
   Value Propositions•   Accessible for deaf and hard of hearing•   For ESL viewers•   Flexibility to view anywhere, such...
http://www.colorado.edu/ODECE/UDAC/physics%20page-2.htm
http://www.colorado.edu/ODECE/UDAC/physics%20page-2.htm
An Overview of Web Standard                 Particulars   Declare a proper doctype   Declare a language in the doctype ...
Web Standard Particulars   Declare a unique title for each page.   Title example     <!DOCTYPE HTML PUBLIC "-//W3C//DTD...
Web Standard Particulars   Use keywords & description elements    <head>     <title>Yahoo! UK & Ireland Eurosport—Sports ...
   Structure the page as appropriate    with headers   Structure hierarchically – H1, H2, etc.
Web Standard Particulars   Structure your page with Titles, Divs, & Lists
Clear & Consistent Navigation
Demonstration   CSS Zen Garden       http://www.csszengarden.com/   CU Physics page       http://www.colorado.edu/ODEC...
Curriculum      Chisholm, Wendy; May, Matt.Materials        Universal Design for Web                 Applications        ...
Evaluation & Remediation Tools   Wave (Toolbar) – wave.webaim.org   Functional Accessibility Evaluator 1.1       https:...
More Evaluation & Remediation          Tools & Resources   10 Evaluation Tools       http://sixrevisions.com/web-       ...
Other Curriculum Resources   A List Apart - Link-Rodrigue, The Inclusion    Principle,        http://www.alistapart.com/...
Other Curriculum Resources   First Principles of Interaction Design‖        (http://www.asktog.com/basics/firstPrinciple...
Other Resources   Web Design Awards & Training at CU       http://www.colorado.edu/ODECE/UDAC/webcomp        2012.html ...
Projects/Resources at CU,             AHEAD, ATHEN   3-credit class: Universal Design for Digital Media       http://acc...
Accessing Higher Ground            Conference      Accessible Media, Web & Technology   November 4 – 8, 2013   Hands-on ...
Upcoming SlideShare
Loading in …5
×

Integrating universal design, best practices, & accessibility atia 2013

1,790 views

Published on

  • Be the first to comment

Integrating universal design, best practices, & accessibility atia 2013

  1. 1. A Web Standards & UD Approach to AccessIntegrating Universal Design,Best Practices, & Accessibility Howard Kramer University of Colorado-Boulder hkramer@colorado.edu, 303-492-8672 ATIA 2013
  2. 2. Presentation posted at slidesharehttp://slideshare.com/hkramer99/Integrating Universal Design, Best Practices, & Accessibility (BPS – public).pptx/
  3. 3. Today’s Outline What are Best Practices (Web Standards) & Universal Design  How does it compare to ―Accessibility Standards‖ What are the advantages of this (wholistic) approach? How do we implement this approach? More resources & suggestion for Implementing these Standards & guidelines
  4. 4. Today’s Objectives Understand the intersection & interrelationship between Web Standards, Universal Design and Accessibility Acquire a useful and powerful strategy for implementing UD and accessibility for digital media Have a tool for promoting accessibility (through UD) at your campuses or organizations
  5. 5. Framework or Model for Today’s Talk Conceptual vs. the Technical
  6. 6. Framework or Model for Today’s Talk
  7. 7. Defining Our Terms What do I mean “Best Practices”?  Web Standards  User-centered design  Interaction design  Accessibility
  8. 8. Universal Design for Digital Media 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
  9. 9. Web Standards / Universal Design – Definitions Using Web Standards & Universal Design as foundation  Web Standards – semantic (x)HTML markup, CSS layout, the separating of content from layout & formatting – produces the following positive outcomes  Third component: Scripting – Javascript & DOM
  10. 10. Best Practices vs. Web Standards / What is Best Practices? Web Standards User-Centered Design  User Testing  Interaction design Following design and layout principles
  11. 11. Definitions & Historic Context The Web Standards Project (WaSP) The Why  TheWay we Were – 1998  No standards  Browser wars  Code forking
  12. 12. Definitions & Historic Context The Web Standards Project (WaSP) What, Why, Who are Web Standards?  Web Standards Project - founded in 1998  reduce the cost and complexity of development  increasing the accessibility  and long-term viability of any site published on the Web.
  13. 13. (More) Benefits of Web Standards Easier for people & search engines to find your content – (including AT users) Separating structure and behavior makes your site easier and less expensive to develop & test. Lighter site (smaller file size) Semantic markup - more accessible to browsers and devices, incl. mobile devices and AT Designing with standards in ensures that your site is forward compatible.
  14. 14. 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
  15. 15. 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 users 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.
  16. 16.  Value Propositions• Accessible for deaf and hard of hearing• For ESL viewers• Flexibility to view anywhere, such as noisy environments or offices• Search• Reusability• Navigation, better UX• SEO/discoverability• Used as source for translation
  17. 17. http://www.colorado.edu/ODECE/UDAC/physics%20page-2.htm
  18. 18. http://www.colorado.edu/ODECE/UDAC/physics%20page-2.htm
  19. 19. An Overview of Web Standard Particulars Declare a proper doctype Declare a language in the doctype Declare the primary language of the site in the <head> area Title your page properly & uniquely  !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN― "http://www.w3.org/TR/html4/strict.dtd"> If your document is XHTML, use this:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head>  <html lang="en-GB">  ...  </html>
  20. 20. 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>
  21. 21. 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,sports news,live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo"> </head>
  22. 22.  Structure the page as appropriate with headers Structure hierarchically – H1, H2, etc.
  23. 23. Web Standard Particulars Structure your page with Titles, Divs, & Lists
  24. 24. Clear & Consistent Navigation
  25. 25. Demonstration CSS Zen Garden  http://www.csszengarden.com/ CU Physics page  http://www.colorado.edu/ODECE/UDAC/physi cs%20page-2.htm NY Times  www.nytimes.com Web Developer Toolbar (Firefox addon)
  26. 26. Curriculum  Chisholm, Wendy; May, Matt.Materials Universal Design for Web Applications  Zeldman, Jeffrey. Designing with Web Standards (3rd Edition)  Shea & Holzschlag. The Zen of CSS Design: Visual Enlightenment for the Web.  Norman, David A. The Design of Everyday Things (2002).  Cooper, Alan; Reimann Robert M. About Face 2.0: The Essentials of Interaction Design (2003)
  27. 27. Evaluation & Remediation Tools Wave (Toolbar) – wave.webaim.org Functional Accessibility Evaluator 1.1  https://addons.mozilla.org/en- US/firefox/addon/accessibility-evaluation- toolb/ Achecker –  http://achecker.ca/ Web Dev’l Toolbar  https://addons.mozilla.org/en- US/firefox/addon/web-developer/
  28. 28. More Evaluation & Remediation Tools & Resources 10 Evaluation Tools  http://sixrevisions.com/web- standards/accessibility_testtools/ CU Web Design Awards Page  http://www.colorado.edu/ODECE/UDAC/webc omp2012.html#resources
  29. 29. Other Curriculum Resources A List Apart - Link-Rodrigue, The Inclusion Principle,  http://www.alistapart.com/articles/the-inclusion- principle/ Dev.opera.com  http://dev.opera.com/articles/view/1-introduction- to-the-web-standards-cur/ Usability.gov  http://usability.gov/methods/test_refine/heuristic.h tml Sitepoint.com  http://articles.sitepoint.com/article/information- architecture
  30. 30. 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 Cirruculim  http://www.w3.org/community/webed/wiki/Main_P age
  31. 31. Other Resources Web Design Awards & Training at CU  http://www.colorado.edu/ODECE/UDAC/webcomp 2012.html WAVE - WebAIM.org  http://wave.webaim.org/ W3C Web Standards Cirruculim  http://www.w3.org/community/webed/wiki/Main_P age Physics Example page  http://www.colorado.edu/ODECE/UDAC/physics%2 0page-2.htm
  32. 32. 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 UD Grant - Integrating UD in Curriculum  Professional Certificate  Expand courses in UD for media design  Conference track on UD in curriculum  Repository of resources See us at Booth 204
  33. 33. 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

×