teaching web accessibility at the source

34
Teaching Web Accessibility at the Source in a University Web Design Class Howard Kramer & Vijay Patel University of Colorado-Boulder [email protected] , 303-492-8672 [email protected] , 303-735-1310

Upload: howard-kramer

Post on 13-Dec-2014

383 views

Category:

Documents


0 download

DESCRIPTION

Powerpoint for "Teaching Accessibility at the Source"

TRANSCRIPT

Page 1: Teaching web accessibility at the source

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

Page 2: Teaching web accessibility at the source

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

Page 3: Teaching web accessibility at the source

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

Page 4: Teaching web accessibility at the source

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

Page 5: Teaching web accessibility at the source

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.

Page 6: Teaching web accessibility at the source

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

Page 7: Teaching web accessibility at the source

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.

Page 8: Teaching web accessibility at the source

Universal Design vs. Web Standards vs. Accessibility

Page 9: Teaching web accessibility at the source

Universal Design vs. Web Standards vs. Accessibility

Page 10: Teaching web accessibility at the source

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>

Page 11: Teaching web accessibility at the source

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>

Page 12: Teaching web accessibility at the source

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>

Page 13: Teaching web accessibility at the source

Web Standard Particulars

Structure your page with Titles, Divs, & Lists

Page 14: Teaching web accessibility at the source

Clear & Consistent Navigation

Page 15: Teaching web accessibility at the source

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

Page 16: Teaching web accessibility at the source

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.

Page 17: Teaching web accessibility at the source

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

Page 18: Teaching web accessibility at the source

Course Content & Structure

Core Content Web Standards* Universal Design Other topics

General design Accessibility

Structure 2 lectures 1 lab

Page 19: Teaching web accessibility at the source

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)

Page 20: Teaching web accessibility at the source

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

Page 21: Teaching web accessibility at the source

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)

Page 22: Teaching web accessibility at the source

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

Page 24: Teaching web accessibility at the source

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

Page 25: Teaching web accessibility at the source
Page 26: Teaching web accessibility at the source

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

Page 27: Teaching web accessibility at the source

“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

Page 28: Teaching web accessibility at the source

Zeldman – “the blind billionaire”

Google and other search engines are, in effect, “blind users.” Structure Text/semantics

Page 29: Teaching web accessibility at the source

Areas for Improvement / Changes

Breadth of curriculum More hands-on Issues of 1st time course

Page 30: Teaching web accessibility at the source

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?

Page 31: Teaching web accessibility at the source

Advantages of Universal Design Approach

Campuses, audiences, IT, not always receptive to “disability” approach

Page 32: Teaching web accessibility at the source

Zeldman – “the blind billionaire”

Google and other search engines are, in effect, “blind users.” Structure Text/semantics

Page 33: Teaching web accessibility at the source

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

Page 34: Teaching web accessibility at the source

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