teaching web accessibility at the source
DESCRIPTION
Powerpoint for "Teaching Accessibility at the Source"TRANSCRIPT
Teaching Web Accessibility at the Source
in a University Web Design Class
Howard Kramer & Vijay Patel University of [email protected], 303-492-8672
[email protected], 303-735-1310
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
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
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
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.
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
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.
Universal Design vs. Web Standards vs. Accessibility
Universal Design vs. Web Standards vs. Accessibility
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>
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>
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>
Web Standard Particulars
Structure your page with Titles, Divs, & Lists
Clear & Consistent Navigation
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
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.
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
Course Content & Structure
Core Content Web Standards* Universal Design Other topics
General design Accessibility
Structure 2 lectures 1 lab
Course Outline 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)
Course Outline
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
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)
Other Curriculum Resources A List Apart - Link-Rodrigue, The
Inclusion Principle, http://www.alistapart.com/articles/the-inclusi
on-principle/
Dev.opera.com http://dev.opera.com/articles/view/1-introduc
tion-to-the-web-standards-cur/ Usability.gov
http://usability.gov/methods/test_refine/heuristic.html
Sitepoint.com http://articles.sitepoint.com/article/informati
on-architecture
Interact with Web Standards
Curriculum for Web Standards
http://interactwithwebstandards.com/
Other Curriculum Resources First Principles of Interaction Design”
(http://www.asktog.com/basics/firstPrinciples.html);
“Personas” http://wiki.fluidproject.org/display/fluid/Perso
nas WebAIM.org – The Legend of the Typical
… http://
webaim.org/presentations/2010/csun/screenreadersurvey.pdf
CSS Zen Garden http://www.csszengarden.com/
“Course Strategy” “Keys for Success,” “Positive Aspects of
Course” Guest lectures
UDFWA Authors: Matt May, Wendy Chisholm
Zuhair Mah’d – AT Expert / Consultant Effective UI Fluid project: Antranig Basman, Clayton
Lewis Expert on Scripting
Zeldman – “the blind billionaire”
Google and other search engines are, in effect, “blind users.” Structure Text/semantics
Areas for Improvement / Changes
Breadth of curriculum More hands-on Issues of 1st time course
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?
Advantages of Universal Design Approach
Campuses, audiences, IT, not always receptive to “disability” approach
Zeldman – “the blind billionaire”
Google and other search engines are, in effect, “blind users.” Structure Text/semantics
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
ATHEN &Accessing Higher Ground
ConferenceAccessible Media, Web & Technology
November 14 - 18, 2011 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