How (Not) to Teach Web Design & Development Terrill Thompson Technology Accessibility Specialist University of Washington

How to Create a Web Page

There are books on this topic too

What do these books teach?

How to change text size in Microsoft Word

Informal Survey of Books on Word/Office Sample size: 9 books –3 each for Office 2007, 2010, and 2013 Number that mentioned alt text for images: 0 Number that emphasized Heading styles for document structure: 2

The Most Authoritative Book on Office 2013 I Could Find 1024 pages Like the others, does not mention alt text for images

How to add alt text in Dreamweaver

How to add alt text in Dreamweaver (continued)

Informal Survey of Books on HTML Sample size: 5 books (3 on HTML5) Number that mentioned accessibility markup (e.g., scope, headers) in chapter on tables: 0 Number that mentioned element for closed captions or descriptions in chapter on HTML5 video: 0

Another Authoritative Book

But that authoritative book… Never mentions ARIA Does have a section on Accessibility! –Three paragraphs on pages –(The book has 380 pages) –The section begins: “An accessible application is one that accommodates people with special needs.” –The phrase “special needs” occurs 7 times in these three paragraphs

Information is Everywhere Books Web pages Web design course curriculum Curriculum for faculty and staff trainings Help docs for using IT products (Mis) (Missing)

Three steps we’ve taken to address this problem 1.Develop our own web design and development curriculum 2.Inject accessibility into training materials for faculty and staff 3.Inject accessibility into online help docs (part of a larger standardization effort)

Web Design & Development I Course Curriculum

The Typical Computer User

Ability on a continuum See Hear Walk Read print Write with pen or pencil Communicate verbally Tune out distraction etc.

Teaching Respect for Diversity while Teaching Coding All this diversity provides technology teachers with a great opportunity! There is no technology without users Each user is different When learning to code, students should actively consider their users, including user differences

Features Teaches standards-based and accessible web design Is platform and vendor-neutral (teaches concepts, not specific tools) Standards-based, accessible design is taught early as a core design principle, and reinforced throughout the course For assignments students must use valid code & conform to accessibility standards

Example 1: Adding an image

Student Photo #3

Adding an image correctly <img src="/images/cstalogo.jpg" width="481" height="126" alt="CSTA: Computer Science Teachers Association">

Example 2: Adding functional images <img src="leftarrow.png" alt="Left arrow"> <img src="rightarrow.png" alt="Right arrow">

Student Photo #2

Adding functional images correctly <img src="leftarrow.png" alt="Previous"> <img src="rightarrow.png" alt="Next">

Example 3: Adding CSS hover effects a:hover { color: white; background-color: #8E6DD7; }

Student Photo #1

Adding CSS hover effects correctly a:hover, a:focus { color: white; background-color: #8E6DD7; }

Example 4: Adding Video

MP3 in Firefox

Adding video more correctly

Video without Captions

Adding video correctly

Video with Captions

Course Outline 1.Designing and Planning Web Pages 2.Creating Content and Structure with HTML 3.Formatting Web Pages with Style Sheets 4.Graphics 5.Scripting 6.Quality Control 7.Website Management and Authoring Tools 8.Client Website

Not Just a Curriculum, A Community Over 4000 registered teachers worldwide Discussion list with 400+ subscribers Students and teachers are learning about standards-based, accessible web design and development

Countries with 10 or more teachers

Teaching the World (Countries with one or more teachers)

Inject accessibility into training materials for faculty and staff UW-IT Learning Technologies –Computing workshops Canvas LMS Catalyst Web Tools Tegrity Lecture Capture Google Apps –Faculty Fellows Program New faculty orientation One-week intensive program including teaching strategies and education technologies

Inject accessibility into online tutorials and help docs Academic Services External Document Review Task Force –Learning Technologies, Instructional Technology Support and Training –Academic and Collaborative Applications –Classroom Support Services –Student Program (Kuali Student) –Communications –Accessible Technology Services

Goal Statement All groups within Academic Services (AS) have web content. The goal of this project is to inventory, review, and support improvements to external-facing documentation of Academic Services, including website content. The activities of the task force should result in improvements to the collection of materials as a whole, making help easier to find for our users and more useful once they find it and the collection of teaching and learning materials more complete, cohesive, and consistent. The task force will also make recommendations to the project sponsor [Associate Vice Provost for Academic Technologies] regarding ongoing work in these areas.

Resources The curriculum: – Accessible Technology at the UW – These slides: –