How (Not) to Teach Web Design & Development

1. How (Not) to Teach Web Design & Development Terrill Thompson Technology Accessibility Specialist University of Washington tft@uw.edu http://staff.washington.edu/tft http://terrillthompson.com

2. How to Create a Web Page

3. There are books on this topic too

4. What do these books teach?

5. How to change text sizeinMicrosoft Word

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

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

8. How to add alt text in Dreamweaver

9. How to add alt text in Dreamweaver (continued)

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

11. Another Authoritative Book

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

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

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

15. Web Design & Development I Course Curriculum http://uw.edu/accesscomputing/webd2

16. The Typical Computer User

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

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

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

22. Example 1: Adding an image <img src="/images/cstalogo.jpg" width="481" height="126">

23. Student Photo #3

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

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

26. Student Photo #2

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

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

29. Student Photo #1

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

31. Example 4: Adding Video <video controls src="myvideo.mp4"> </video>

32. MP3 in Firefox

33. Adding video more correctly <video controls> <source src="myvideo.mp4"> <source src="myvideo.webm"> </video>

34. Video without Captions

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

36. Video with Captions

37. Course Outline • Designing and Planning Web Pages • Creating Content and Structure with HTML • Formatting Web Pages with Style Sheets • Graphics • Scripting • Quality Control • Website Management and Authoring Tools • Client Website

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

39. Countries with 10 or more teachers

40. Teaching the World (Countries with one or more teachers)

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

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

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

44. Resources • The curriculum: • http://uw.edu/accesscomputing/webd2 • Accessible Technology at the UW • http://uw.edu/accessibility • These slides: • http://staff.washington.edu/tft