1 / 34

Teaching Web Accessibility at the Source

Teaching Web Accessibility at the Source. in a University Web Design Class. Howard Kramer & Vijay Patel University of Colorado-Boulder hkramer@colorado.edu , 303-492-8672 Vijay.patel@colorado.edu , 303-735-1310. Today’s Outline. How this course came about Overview of content of the course

keena
Télécharger la présentation

Teaching Web Accessibility at the Source

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Teaching Web Accessibility at the Source in a University Web Design Class Howard Kramer & Vijay Patel University of Colorado-Boulder hkramer@colorado.edu, 303-492-8672 Vijay.patel@colorado.edu, 303-735-1310

  2. Today’s Outline • How this course came about • Overview of content of the course • Curriculum materials used • Student response and outcomes • Successes and problem areas • Future plans for the course

  3. Goals of Presentation • Benefits & Goals of Course • Teaching an effective course on Universal Design • The larger goal of improving accessibility on campus • 3 audience objectives • How to replicate this course on your own campus • How the concepts & approach of this course can be applied as a means from promoting better accessibility and usability of web pages & digital media on your campus. • Learning more about Universal Design, Web Standards & Accessibility

  4. 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

  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 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.

  6. Web Standards / Universal Design – key course strategy • Using Web Standards & Universal Design as foundation of course • 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

  7. 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.

  8. Universal Design vs. Web Standards vs. Accessibility

  9. Universal Design vs. Web Standards vs. Accessibility

  10. 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>

  11. 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>I am a title example</title> </head> <body> </body> ... </html>

  12. 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,sportsnews,live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo"> </head>

  13. Web Standard Particulars • Structure your page with Titles, Divs, & Lists

  14. Clear & Consistent Navigation

  15. Origins of Course& Needed Resources • Proposal to ATLAS • No existing course covering this topic • Availability of expertise – access specialist, Web design specialist • Support of senior faculty

  16. This course will review standards for both usability and accessibility, using resources and texts from media design experts such as Jakob Nielson, Donald A. Norman and Alan Cooper and accessibility experts such as Wendy Chisholm, John Slatin and Jim Thatcher. • Course Objectives/Methods: Through labs, lectures and demonstration, students will learn media design methods, along with the implementation of guidelines and tools to test the usability and accessibility of web pages and other electronic media.

  17. Target Audience/StudentsRequired Student Prerequisites • 2 or 3 computer science majors • 2 or 3 coding novices • 3 or 4 liberal arts majors • 3 or 4 Technology and Media Arts • 2 staff • 1 blind student

  18. Course Content & Structure CoreContent Structure 2 lectures 1 lab • Web Standards* • Universal Design • Other topics • General design • Accessibility

  19. CourseOutline • Week 1 (Scope, who are we designing for?) • Week 2 (Learning the language of design...) • Week 3 (General design principles, introduction to web design) • Week 4 (Interaction Design & Information architecure • Week 5 (Case for web standards) • Week 7 (Structure,  xhtml...) • Week 8 (Presentation w\ a dash of Behavior, CSS) • Week 9 (Presentation continued…, behaviour) • Week 10 (Accessibility) • Week 11 (Spring Break)

  20. CourseOutline • Week 12 (Accessibility Cont’d) • Week 13 (Adding Behavior, Sound, Video & Dynamic Interaction) • Week 14 (Rich Internet Applications) • Week 15 (HTML 5) • Week 16 (Dedicated lab time for final projects) • Week 17 (Finals) – Project Presentations

  21. Curriculum Materials • Chisholm, Wendy; May, Matt. 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)

  22. 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.html • Sitepoint.com • http://articles.sitepoint.com/article/information-architecture

  23. Interact with Web Standards • Curriculum for Web Standards • http://interactwithwebstandards.com/

  24. 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/screenreadersurvey.pdf

  25. CSS Zen Garden http://www.csszengarden.com/

  26. “Course Strategy” “Keys for Success,” “Positive Aspects of Course” • Guest lectures • UDFWA Authors: Matt May, Wendy Chisholm • ZuhairMah’d – AT Expert / Consultant • Effective UI • Fluid project: AntranigBasman, Clayton Lewis • Expert on Scripting

  27. Zeldman – “the blind billionaire” • Google and other search engines are, in effect, “blind users.” • Structure • Text/semantics

  28. Areas for Improvement / Changes • Breadth of curriculum • More hands-on • Issues of 1st time course

  29. What was accomplished(above & beyond) • Outreach to campus (staff & students) • Networking, developing relationships with other key players on campus What’s Next Online version of class – fall 2011? Repeat class in 2011 or spring 2012?

  30. Advantages of Universal Design Approach • Campuses, audiences, IT, not always receptive to “disability” approach

  31. Zeldman – “the blind billionaire” • Google and other search engines are, in effect, “blind users.” • Structure • Text/semantics

  32. Implementing this on the UCB Campus • Committee on Universal Design & Accessibility • Web Design Competition • Teleconferences to campus • UCB Web Design Resource url- http://www.colorado.edu/ODECE/UDAC/webcomp.html

  33. ATHEN &AccessingHigher GroundConference Accessible Media, Web & Technology • November 14 - 18, 2011 • Hands-on sessions on Web Access, Assistive Technology • Upcoming teleconferences • Can purchase audio DVDof proceedings & access materials & handouts online • Westin Hotel - between Boulder & Denver • www.colorado.edu/ATconference

More Related