Table of Contents | All Slides | Link List | Examples...
Transcript of Table of Contents | All Slides | Link List | Examples...
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
1 of 118 3/14/2006 2:04 PM
Table of Contents | All Slides | Link List | Examples | CSCI E-12
Building a SiteMarch 14, 2006
Harvard UniversityDivision of Continuing Education
Extension School
Course Web Site: http://cscie12.dce.harvard.edu/
Copyright 1998-2006 David P. Heitmeyer
My email: [email protected] staff email: [email protected]
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
2 of 118 3/14/2006 2:04 PM
Building a Web SiteThe SiteInformation gathering and organizationSite and Page DesignImplementationMaintenance
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
3 of 118 3/14/2006 2:04 PM
Design and Usability Resources
Online
Web Style Guide, 2nd EditionJakob Nielsen's Useit.com
Jakob Nielsen's Alertbox ColumnUser Interface Engineering (UIE)
Books
See Assignment 2
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
4 of 118 3/14/2006 2:04 PM
Jakob Nielsen's Useit.com and AlertboxUseit.com: Alertbox
Usability 101: Introduction to UsabilityTop Ten Mistakes of Web DesignTop Ten Web Design Mistakes of 2005The Need for Web Design StandardsTop Ten Web Design Mistakes of 2003Ten Most Violated Homepage Design Guidelines, November 2003Top Ten Web Design Mistakes of 2002Top Ten Guidelines for Homepage Usability, May 2002Ten Good Deeds in Web Design, October 1999The Top Ten New Mistakes of Web Design, May 1999
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
5 of 118 3/14/2006 2:04 PM
Building a Web SiteAudience and GoalsContent and OrganizationSite and Page Design
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
6 of 118 3/14/2006 2:04 PM
Audience and GoalsWhy are you building the site? Who are you buliding the site for?
Most sites get a variety of usersSome audiences will be "primary", others "secondary"What are the target audience(s) and what are their information needs?
Most sites will have multiple audiences.
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
7 of 118 3/14/2006 2:04 PM
Michigan State UniversityWhat audiences can be identified?
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
8 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
9 of 118 3/14/2006 2:04 PM
AudienceWho are they?
language, vocabularytechnology profileWeb experience
What are their goals?What are their information needs?What are they trying to do?
Know Your Audience
User testing, market research, focus groups.Jakob Nielsen's Alertbox: Why You Only Need to Test with 5 UsersBe clear on who you are building for. Anticipate their needs.Feedback from users - chew before you swallow!Alertbox: First Rule of Usability? Don't Listen to UsersAs target audiences increase, difficulty of Web design increases.
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
10 of 118 3/14/2006 2:04 PM
Typical Audiences for an Academic DepartmentUndergraduate Students
ConcentratorsPotential concentratorsNon-concentrators
Graduate StudentsPotential Graduate StudentsFaculty
CurrentPotential
ResearchersPublic
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
11 of 118 3/14/2006 2:04 PM
Content and OrganizationWhat information is on the site?How will it be organized?
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
12 of 118 3/14/2006 2:04 PM
ContentWhat content already exists in other media types (brochures, pamphlets, statements, etc.).What content would be good to develop for the site?
Does it fit purpose of site?Does it suit the audience?Why would people come to see this item?
Define incremental goalsWhat should be published first?What can come later stages?
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
13 of 118 3/14/2006 2:04 PM
Organization of ContentFrom Information Architecture for the World Wide Web, 2nd Edition:
information architecture defined:
The combination of organization, labeling, and navigation schemes within an information system.1.The structural design of an information space to facilitate task completion and intuitive access to content.2.The art and science of structuring and classifying web sites and intranets to help people find and manage information. 3.An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.4.
Organize/CategorizeLabelNavigate
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
14 of 118 3/14/2006 2:04 PM
Organize and Label
Organize
Hi-tech tools are a mustSticky-notes or Index cardsWhiteboard
Categories, sub-categories, etc.Don't be too deep or too shallowAim for 3 to 7 (could go higher) categories per level
Plan for future growth
Label
Know your audienceTest your labels (ask your audience)
Where can I get a driver for my HP8500N?What would expect to find in the category of Synergetic Integrated Scalable Enterprise Solutions?What IT degree programs are available?
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
15 of 118 3/14/2006 2:04 PM
Too deep or too shallow?
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
16 of 118 3/14/2006 2:04 PM
The "Miscellaneous" categoryCategories have Failed. Try again.Content can be in multiple categories or linked to from multiple categories
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
17 of 118 3/14/2006 2:04 PM
Categories and Labels from News SitesCBS
CNN ABC News Fox News
MSNBC NPR
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
18 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
19 of 118 3/14/2006 2:04 PM
The Web SiteThe Web site is not just like a brochure or book, it is also like a piece of software.Visitors must learn the interface of your site.
See Jakob Nielsen's End of Web Design.Keep in mind Jakob's Law of the Internet User Experience:Users spend most of their time on other sites.
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
20 of 118 3/14/2006 2:04 PM
OrganizationHierarchicalSequential"Webs"
Reading Suggestion: Ontology is Overrated: Categories, Links, and Tags by Clay Shirkey
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
21 of 118 3/14/2006 2:04 PM
Hierarchical
Library of Congress Classification Outline
"Q" - Science
Open Directory Project
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
22 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
23 of 118 3/14/2006 2:04 PM
SequentialWhen order is important or part of presentation.Useful when "workflow" is important in web applications.
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
24 of 118 3/14/2006 2:04 PM
Webs
Wikipedia.com
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
25 of 118 3/14/2006 2:04 PM
Site Architecture
Topics
Audience
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
26 of 118 3/14/2006 2:04 PM
Task-oriented
Internal Organization Structure
Search
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
27 of 118 3/14/2006 2:04 PM
Multiple Architectures
Often a site may need to have multiple architectures.
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
28 of 118 3/14/2006 2:04 PM
Michigan State
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
29 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
30 of 118 3/14/2006 2:04 PM
IBM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
31 of 118 3/14/2006 2:04 PM
Hewlett Packard
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
32 of 118 3/14/2006 2:04 PM
Site ArchitectureCritical to site's successPrecede any design/visual elementsWork from paper or text-based Web sites
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
33 of 118 3/14/2006 2:04 PM
Navigation SystemsWhere am I?Where can I go?
What is close by?What is further away?
Where have I been?
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
34 of 118 3/14/2006 2:04 PM
Harvard College
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
35 of 118 3/14/2006 2:04 PM
Main Sections
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
36 of 118 3/14/2006 2:04 PM
Current Page and Section
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
37 of 118 3/14/2006 2:04 PM
More within Current Section
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
38 of 118 3/14/2006 2:04 PM
Global NavigationAppears on every inner page.
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
39 of 118 3/14/2006 2:04 PM
Quicklinks
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
40 of 118 3/14/2006 2:04 PM
Bread Crumb navigation"Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.", Hansel in Hansel and Gretel
DMOZ
Construction Projects at FAS, Harvard University
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
41 of 118 3/14/2006 2:04 PM
Clamshell navigation
O'Reilly Safari Harvard College
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
42 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
43 of 118 3/14/2006 2:04 PM
LinksPay attention to the scent of the site's links.
Links within navigation and content must be:
PredictableAm I getting 'closer' to my goal?DifferentiableWhat is the difference between clicking here or clicking there?
When creating links:
Be descriptiveDon't lie
Your links should have scent, and on a related note, your site should suck.
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
44 of 118 3/14/2006 2:04 PM
Please don't "Click Here"Click here to go to the course home page.Click here to go to the course syllabus page.Click here to go to the course schedule page.Click here to go to the course assignment page.
To go to the course home page click here.To go to the course syllabus page click here.To go to the course schedule page click here.To go to the course assignment page click here.
Better...
The CSCI E-12 web site contains the syllabus, schedule, and assignments.
The CSCI E-12 web site contains:
syllabusscheduleassignments
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
45 of 118 3/14/2006 2:04 PM
Use "title" attributeTitle attribute can add information so that the link is more predictable and able to be differentiated from others.
Example 6.1Example 6.1 Source:
<p><a href="http://www.college.harvard.edu/deans_office/dean_lewis/morningprayer_2_2003.html" title="Text of talk given by Dean Lewis at Morning Prayers" >Dean Harry Lewis spoke</a>
at <a href="http://www.memorialchurch.harvard.edu/services/morningprayers.shtml" title="Morning Prayers at The Memorial Church of Harvard University" >morning prayers</a>
at <a href="http://www.college.harvard.edu" title="Harvard College Home Page" >Harvard College</a>
in February 2003.</p>
Example 6.1 Rendered:
Dean Harry Lewis spoke at morning prayers at Harvard College in February 2003.
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
46 of 118 3/14/2006 2:04 PM
Deep LinkingLink directly to content within a site.Support deep linking to your site.
Alertbox: Deep Linking is Good Linking
Example 6.2Example 6.2 Source:
<a href="http://www.summer.harvard.edu/2006/register/default.jsp" >Regster for Harvard Summer School</a><a href="http://www.summer.harvard.edu/2006/courses/csci.jsp#s-l" > CSCI S-L, "Advanced Web Development Using XML"</a>
Example 6.2 Rendered:
Regster for Harvard Summer School so you can take CSCI S-L, "Advanced Web Development Using XML".
Example 6.3
Example 6.3 Source:
<a href="http://www.summer.harvard.edu/" >Register for Harvard Summer School</a><a href="http://www.summer.harvard.edu/2006/courses/" > CSCI S-L, "Advanced Web Development Using XML"</a>
Example 6.3 Rendered:
Register for Harvard Summer School so you can take CSCI S-L, "Advanced Web Development Using XML".
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
47 of 118 3/14/2006 2:04 PM
Every Page NeedsTitleCreator (person or institution)Creation or Revision dateLink to home pageURL of page (or at least home page)
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
48 of 118 3/14/2006 2:04 PM
Importance of a Good TitleBrowser
BookmarksHistoryWindow Title
Search Engine results
Search for "Untitled" in "title" element:
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
49 of 118 3/14/2006 2:04 PM
Search Enginestitlemeta descriptionmeta keywords
<head> <title>Harvard College Admissions Office</title> <meta name="keywords" content="harvard admissions, harvard college admissions, harvard admissions office, harvard college admissions office, harvard undergraduate admissions, harvard undergrad admissions, harvard undergraduate admissions office, visiting harvard, visiting harvard university, harvard university admissions, harvard university undergraduate admissions, harvard college, travel to harvard" /> <meta name="description" content="The main website for the Harvard College Admissions Office which oversees undergraduate admissions for Harvard University." /></head>
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
50 of 118 3/14/2006 2:04 PM
Visual Design
LogoTitleNavigationContent
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
51 of 118 3/14/2006 2:04 PM
Creating ContentPeople scan Web content. Content designed for print publications will need to be made Web-friendly:
Information needs to be "chunked"For existing print content, reduce word count by 50%Use bullet lists, subheadingsAdd appropriate hyperlinksProvide print-friendly (either PDF or HTML) versions for certain documents
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
52 of 118 3/14/2006 2:04 PM
Technology Constraintsmonitorbrowserinternet connection speedplugins
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
53 of 118 3/14/2006 2:04 PM
Design "Above the Fold"Check your pages for several window sizes:
640 x 480800 x 6001024 x 768
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
54 of 118 3/14/2006 2:04 PM
Below the FoldAbove the fold:
Below the fold:
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
55 of 118 3/14/2006 2:04 PM
and even more:
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
56 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
57 of 118 3/14/2006 2:04 PM
Below the Fold, Part 2Above the fold:
Below the fold:
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
58 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
59 of 118 3/14/2006 2:04 PM
Page Design: Fixed or Variable Width?Printing: 560 pixels maximum for fixed widthReading: about the sameAvoid horizontal scrollingVariable width does not waste space, but may make text lines too long.
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
60 of 118 3/14/2006 2:04 PM
CNN - fixed table width
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
61 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
62 of 118 3/14/2006 2:04 PM
W3C - flexible table width
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
63 of 118 3/14/2006 2:04 PM
Page WeightTake advantage of client-side caching: re-use URLs for CSS, images, javascript throughout the side.
Decide on per page kilobyte budget (30kb, 40kb, 50kb, etc.) which reflects your audience.
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
64 of 118 3/14/2006 2:04 PM
URLs as UIFile structure should resemble site organization.For some users, your URL can also function as a user-interface. (Alertbox: URL as UI)
http://www.macromedia.com/software/dreamweaver/http://www.macromedia.com/software/fireworks/http://www.macromedia.com/software/flash/http://www.macromedia.com/software/homesite/
Keep to less than 72 characters so that it doesn't "wrap" in an email or when printed.Often "advertised" or "published" URLs will be short and easy to remember. These URLs can be redirected to the true resource viaApache Redirect or Rewrite directivesOr use something like TinyURL.com
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
65 of 118 3/14/2006 2:04 PM
Homepage is often a different beast.
Boeing
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
66 of 118 3/14/2006 2:04 PM
Harvard College
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
67 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
68 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
69 of 118 3/14/2006 2:04 PM
An Aside: The Wayback Machine
Internet Archive Wayback Machine
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
70 of 118 3/14/2006 2:04 PM
Southwest Airlines
Southwest Airlines, 1998
Southwest Airlines, 2000
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
71 of 118 3/14/2006 2:04 PM
Southwest Airlines, 2003
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
72 of 118 3/14/2006 2:04 PM
Southwest Airlines, 2006
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
73 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
74 of 118 3/14/2006 2:04 PM
Commonwealth of Massachusetts
1998
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
75 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
76 of 118 3/14/2006 2:04 PM
1999
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
77 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
78 of 118 3/14/2006 2:04 PM
2002
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
79 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
80 of 118 3/14/2006 2:04 PM
2003
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
81 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
82 of 118 3/14/2006 2:04 PM
2004
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
83 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
84 of 118 3/14/2006 2:04 PM
2005
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
85 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
86 of 118 3/14/2006 2:04 PM
Internal Revenue Service
2001
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
87 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
88 of 118 3/14/2006 2:04 PM
2003
2005
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
89 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
90 of 118 3/14/2006 2:04 PM
Boston.com
1997
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
91 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
92 of 118 3/14/2006 2:04 PM
1999
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
93 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
94 of 118 3/14/2006 2:04 PM
2001
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
95 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
96 of 118 3/14/2006 2:04 PM
2002
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
97 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
98 of 118 3/14/2006 2:04 PM
2003
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
99 of 118 3/14/2006 2:04 PM
2004
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
100 of 118 3/14/2006 2:04 PM
2005
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
101 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
102 of 118 3/14/2006 2:04 PM
Accessibility"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web
Two initiatives to be aware of:
W3C Web Accessibility Initiative (WAI)United States Government Section 508
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
103 of 118 3/14/2006 2:04 PM
W3C Web Accessibility Initiative (WAI)W3C's Web Accessibility Initiative (WAI)http://www.w3.org/WAI/
WAI Resources on Introducing Web AccessibilityQuick Tips to Make Accessible Web Sites
The Details
Web Content Acccessibility Guidelines 1.0 (WCAG 1.0)http://www.w3.org/TR/WAI-WEBCONTENTTechniques for Web Content Accessibility 1.0http://www.w3.org/TR/WAI-WEBCONTENT-TECHSList of Checkpoints for Web Content Accessibillity Guidelines 1.0http://www.w3.org/TR/WAI-WEBCONTENT-19990505/checkpoint-listChecklist of Checkpoints for Web Content Accessibility Guidelines 1.0http://www.w3.org/TR/WAI-WEBCONTENT-19990505/full-checklist
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
104 of 118 3/14/2006 2:04 PM
W3C WAI Guidelines: ThemesEnsuring Graceful TransformationGuidelines 1 to 11Making Content Understandable and NavigableGuidelines 12 to 14
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
105 of 118 3/14/2006 2:04 PM
W3C WAI Guidelines14 Guidelines
Three levels of conformance:
Priority 1: must16 checkpoints
Priority 2: should30 checkpoints
Priority 3: may19 checkpoints
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
106 of 118 3/14/2006 2:04 PM
10 Quick Tips to Make Accessible Web Sites from the W3C
This content taken from WAI, Quick Tips to Make Accessible Web Sites, http://www.w3.org/WAI/References/QuickTips/Overview.php
The links in the Quick Tips below mostly go to the techniques documents that provide implementation guidance - including explanations,strategies, and detailed markup examples.
Images & animations: Use the alt attribute to describe the function of each visual.1.Image maps. Use the client-side map and text for hotspots.2.Multimedia. Provide captioning and transcripts of audio, and descriptions of video.3.Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."4.Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.5.Graphs & charts. Summarize or use the longdesc attribute.6.Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.7.Frames. Use the noframes element and meaningful titles.8.Tables. Make line-by-line reading sensible. Summarize.9.Check your work.Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG10.
© W3C (MIT, INRIA, Keio) 2001/01
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
107 of 118 3/14/2006 2:04 PM
Section 508United States Federal Government Section 508: "The Road to Accessibility"http://www.section508.gov/
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
108 of 118 3/14/2006 2:04 PM
Accessibility ImplementationOrganizations
W3C WAICenter for Applied Special Technology (CAST)Web Accessibility in Mind (WebAIM)
Tools and ResourcesResource List: WAI ResourcesOpera Browser: Using Opera to Check for AccessibilityTool: WAVE 3.0 from WebAIMTool: WebXACT from Watchfire
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
109 of 118 3/14/2006 2:04 PM
Example: ready.govReady.gov: From the U.S. Department of Homeland Security
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
110 of 118 3/14/2006 2:04 PM
Text ViewOpera User Style Sheet, "Text" view:
<body><a href="#mainnav"><img src="_images/s.gif" alt="Skip to main navigation"></a><a href="#content"><img src="_images/s.gif" alt="Skip to main content"></a>
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
111 of 118 3/14/2006 2:04 PM
Ready.gov: From the U.S. Department of Homeland Security
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
112 of 118 3/14/2006 2:04 PM
High Contrast ViewOpera User Style Sheet, "High Contrast (W/B)" view:
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
113 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
114 of 118 3/14/2006 2:04 PM
Ready.gov: From the U.S. Department of Homeland Security
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
115 of 118 3/14/2006 2:04 PM
Images OffImages disabled (Opera or Firefox Web Developer Extension)
Ready.gov: From the U.S. Department of Homeland Security
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
116 of 118 3/14/2006 2:04 PM
Small ScreenOpera "small screen" view
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
117 of 118 3/14/2006 2:04 PM
http://localhost:8080/cocoon/projects/cscie12/slides/20060314/handout.html
118 of 118 3/14/2006 2:04 PM
Ready.gov: From the U.S. Department of Homeland Security
Table of Contents | All Slides | Link List | Examples | CSCI E-12