Universal Design – for   Digital Media, forLearning, for Curriculum           Howard Kramer    University of Colorado-Boul...
Today’s Outline   What is Universal Design       For Digital Media & the Web            The role of Web Standards     ...
Powerpoint      Posted at:    http://uduc.org   http://uduc.org/coltt12/
Universal Design for Digital Media,   Learning & Course Content   What is Universal Design?       Universal design is th...
Universal Design for Digital Media   Equitable Use: The design is useful and marketable to people    with diverse abiliti...
Universal Design for Digital Media   Tolerance for Error: The design minimizes hazards and    the adverse consequences of...
Web Standards    Laying the foundation for Universal Design   Web Standards include       semantic (x)HTML markup       ...
Universal Design vs. WebStandards vs. Accessibility
Universal Design vs. WebStandards vs. Accessibility
The Semantic Web – Definitions   Semantics (from Greek sēmantiká, neuter plural of    sēmantikós - signifier)[1][2] is th...
http://www.colorado.edu/ODECE/UDAC/physics%20page-2.htm
The Benefits of Web Standards   Makes it easier for people & search engines to find    your content – (including AT users...
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 ...
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...
Zeldman – ―the blind billionaire‖   Google and other    search engines are, in    effect, ―blind users.‖       Structure...
Universal Design for Learning   Multiple means of representation   Multiple means of action & expression   Multiple mea...
Representation of Information   Provide options for perception       1) - provide same information through different mod...
Availability of Information   Is your syllabus available online   Is it updated regularly   If you use PowerPoint – are...
Promoting the Integration of Universal    Design into University Curricula (UDUC)   2-year NEA funded grant – 7/1/12   P...
Curriculum      Chisholm, Wendy; May, Matt.Materials        Universal Design for Web                 Applications        ...
Evaluation & Remediation Tools   Wave (Toolbar) –       wave.webaim.org   Functional Accessibility Evaluator 1.1      ...
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 ...
Accessing Higher Ground            Conference      Accessible Media, Web & Technology   November 12 - 16, 2012   Hands-o...
UD for Learning Resources   CAST – www.cast.org/udl   National Center on Universal Design for    Learning - http://www.u...
Ud 4 web, classroom, curriculum
Upcoming SlideShare
Loading in …5
×

Ud 4 web, classroom, curriculum

267 views

Published on

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

  • Be the first to like this

Ud 4 web, classroom, curriculum

  1. 1. Universal Design – for Digital Media, forLearning, for Curriculum Howard Kramer University of Colorado-Boulder hkramer@colorado.edu, 303-492-8672
  2. 2. Today’s Outline What is Universal Design  For Digital Media & the Web  The role of Web Standards  For Learning  For Course Content Techniques, approaches for all 3 areas Resources & suggestions for implementation  Including – UD course for Digital Media, UD project funded by NEA
  3. 3. Powerpoint Posted at: http://uduc.org http://uduc.org/coltt12/
  4. 4. Universal Design for Digital Media, Learning & Course Content 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
  5. 5. 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. Perceptible Information: The design communicates necessary information effectively to the user, regardless of ambient conditions or the users sensory abilities.  Multiple ways of presenting info that is contained in images, graphs, audio, video, or other forms of media
  6. 6. Universal Design for Digital Media Tolerance for Error: The design minimizes hazards and the adverse consequences of accidental or unintended actions. Low Physical Effort: The design can be used efficiently and comfortably and with a minimum of fatigue.  Easy tab progression to allow for quick and smooth navigation  Minimize the number of links or the amount of accessory content that the user must get through in order to find the primary content Size and Space of Content and Control Objects are Appropriate & Customizable by User:  Page is relatively scalable and can be viewed on small monitors, cell phone browsers, etc.²  File size is not prohibitive for those with slow Internet connections.
  7. 7. Web Standards Laying the foundation for Universal Design Web Standards include  semantic (x)HTML markup  (using html 4.x, xhtml 1.x or html 5)  CSS layout (the separating of content from layout & formatting)  Third component: Scripting – Javascript & DOM Web Standards + Accessibility = UD
  8. 8. Universal Design vs. WebStandards vs. Accessibility
  9. 9. Universal Design vs. WebStandards vs. Accessibility
  10. 10. 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 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 http://en.wikipedia.org/wiki/Semantics 2 http://www.w3schools.com/web/web_semantic.asp
  11. 11. http://www.colorado.edu/ODECE/UDAC/physics%20page-2.htm
  12. 12. The Benefits of Web Standards Makes it 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. (And much easier to update). Makes your site lighter (smaller file size) Semantic markup makes your site more accessible to different kinds of browsers and devices, incl. mobile devices and AT Designing with standards in ensures that your site is forward compatible.
  13. 13. 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>
  14. 14. 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> ATIA 2012</title> </head> <body> </body> ... </html>
  15. 15. 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>
  16. 16. Web Standard Particulars Structure your page with Titles, Divs, & Lists
  17. 17. Clear & Consistent Navigation
  18. 18. 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)
  19. 19. Zeldman – ―the blind billionaire‖ Google and other search engines are, in effect, ―blind users.‖  Structure  Text/semantics
  20. 20. Universal Design for Learning Multiple means of representation Multiple means of action & expression Multiple means of engagement
  21. 21. Representation of Information Provide options for perception  1) - provide same information through different modalities (e.g., through vision, hearing, or touch);  2) providing information in a format that will allow for adjustability by the user (e.g., text that can be enlarged, sounds that can be amplified) Offer ways of customizing the display of information  Display information in a flexible format so that the perceptual features can be varied  Size of text  Speed/pitch of audio  Background/Foreground contrast
  22. 22. Availability of Information Is your syllabus available online Is it updated regularly If you use PowerPoint – are these available before the class, after the class (in electronic format)
  23. 23. Promoting the Integration of Universal Design into University Curricula (UDUC) 2-year NEA funded grant – 7/1/12 Planned Activities  Establishing a formal network of faculty (FNOF)  A 2-Day Workshop: UCB community coming together around the issue of UD  Development of website and use of social media to disseminate and provide resources
  24. 24. 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)
  25. 25. 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/
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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 Curriculim  http://www.w3.org/community/webed/wiki/Main_P age Physics Example page  http://www.colorado.edu/ODECE/UDAC/physics%2 0page-2.htm
  30. 30. Accessing Higher Ground Conference Accessible Media, Web & Technology November 12 - 16, 2012 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 www.colorado.edu/ATconference
  31. 31. UD for Learning Resources CAST – www.cast.org/udl National Center on Universal Design for Learning - http://www.udlcenter.org/ Universal Design Education - http://udeducation.org/ Center for Universal Design - http://www.ncsu.edu

×