how (not) to teach web design & development terrill thompson technology accessibility specialist...
TRANSCRIPT
How (Not) to Teach Web Design & Development
Terrill ThompsonTechnology Accessibility Specialist
University of [email protected]
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
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
<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 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:– http://uw.edu/accesscomputing/webd2
• Accessible Technology at the UW– http://uw.edu/accessibility
• These slides:– http://staff.washington.edu/tft