Post on 23-Feb-2016
description
transcript
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