How (Not) to Teach Web Design & Development

Terrill ThompsonTechnology Accessibility Specialist

University of Washingtontft@uw.edu

http://staff.washington.edu/tfthttp://terrillthompson.com

How to Create a Web Page

There are books on this topic too

What do these books teach?

How to change text size inMicrosoft 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 <track> 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 378-379– (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 takento 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

http://uw.edu/accesscomputing/webd2

The Typical Computer User

Ability on a continuum

SeeHearWalk

Read printWrite with pen or pencilCommunicate verbally

Tune out distractionetc.

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

<img src="/images/cstalogo.jpg" width="481" height="126">

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

<video controls src="myvideo.mp4"></video>

MP3 in Firefox

Adding video more correctly

<video controls> <source src="myvideo.mp4"> <source src="myvideo.webm"></video>

Video without Captions

Adding video correctly

<video controls> <source src="myvideo.mp4"> <source src="myvideo.webm"> <track kind="captions" src="mycaps.vtt"></video>

Video with Captions

Course Outline

1. Designing and Planning Web Pages 2. Creating Content and Structure with HTML3. Formatting Web Pages with Style Sheets4. Graphics5. Scripting6. Quality Control7. Website Management and Authoring Tools8. 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 StatementAll 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:– http://uw.edu/accesscomputing/webd2

• Accessible Technology at the UW– http://uw.edu/accessibility

• These slides:– http://staff.washington.edu/tft