Building Web Pages
for All Students
Marsha Allen, Web Manager
Center for Assistive Technology & Environmental Access (CATEA)
Southeast Disability & Business Technical Assistance Center
Georgia Institute of Technology
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
1
But, first a word from our sponsors …
(CATEA) Georgia Tech Center for Assistive Technology and Environmental Access
 Training, research, information, and technical
assistance on disability-related issues and design.
 National public AT website: assistivetech.net
 Mobility Rehabilitation Engineering Research Center
 Workplace Rehabilitation Engineering Research Center
www.catea.org
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
2
(GRADE) Georgia Tech Research on Accessible Distance Education
•
•
•
•
Fact sheets & technical assistance
Accessible course models
Guidelines for accessible online materials
Accesselearning.net: 10 module online
tutorial on making distance ed accessible
www.catea.org/grade/
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
3
Southeast Disability and Business
Technical Assistance Center
 1 of 10 regional ADA & IT Centers funded to:
• Facilitate voluntary compliance with Americans with
Disabilities Act (ADA).
• Promote accessible education-based electronic &
information technology (IT).
800-949-4232 (v/tty/Spanish)
www.sedbtac.org
sedbtacproject@coa.gatech.edu
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
4
States Served by Southeast DBTAC








Alabama
Florida
Georgia
Kentucky
Mississippi
North Carolina
South Carolina
Tennessee
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
5
What will this workshop cover?
Applying elements to structure a web page.
Building a basic web page template.
Creating and using style sheet for web page.
Ideas for incorporating accessibility in other
classroom subjects to promote diversity and
computer literacy.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
6
How Is the Web Accessed?
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
7
Power of the Web
“ … is in its universality. Access by everyone,
“… is in its universality. Access by
regardless
of disability, technology, or environment is
everyone, regardless of disability,
an essential, integral
aspect of life.”is an
technology,
or environment
essential, integral aspect of life.”
Source: Tim Berners-Lee, W3C Director, Inventor of Web
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
8
What is the User Experience?
 Aoccdrnig to a rscheearchr at Cmabrigde
Uinervtisy, it deosn't mttaer in waht oredr the
ltteers in a wrod are, the olny iprmoetnt tihng
is taht the frist and lsat ltteer be at the rghit
pclae. The rset can be a tatol mses and you
can sitll raed it wouthit porbeslm. Tihs is
bcuseae the huamn mnid deos not raed ervey
lteter by istlef, but the wrod as a wlohe.
Amzanig huh!
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
9
How are these seats different?
 … In the mark-up.
 Same applies to
UNIVERSAL DESIGN
of web sites
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
10
Behind the Scenes of a Web Page
 Foundation on which design is built.
•
HyperText Markup Language (HTML)
 Develop in text editor (i.e. NotePad), Word,
web authoring tool, “cut-n-paste”.
•
HTML Kit www.chami.com/html-kit/
•
Many tools create “bad” or “junky” code.
–
i.e. Frontpage, “Save As Webpage”.
 Elements create framework and structure content.
•
•
All elements have a start tag <keyword>
Most, but not all elements have end tag </keyword>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
11
HTML Elements for Framework of Web Page
<html>
<head>
<title>Page Title</title>
</head>
<body>
Content goes here
</body>
</html>
Source: CommonHTML.doc
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
12
HTML Kit Interface
Source: html_kit_interface.doc
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
13
Start Your Web Page
1. Open your preferred web authoring software
(i.e. HTML Kit).
2. Open or create an HTML file.
(i.e. File > Open File, browse to
TemplateCode2Practice.htm)
3. Web pages should always have a <title>.
a. Find the <title> start tag.
b. Change “Page Title” to “Federal Court Concepts”.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
14
Writing for Web
 Different than paper; each page independent.
 Concise, “quick-to-read” chunks.
 Hierarchical content organization.
 Use standard fonts and sans-serif vs. serifs.
• i.e. Arial, Verdana, Tahoma
 Provide alternate formats.
- Large print: minimum 18
pt.; preferred 22 pt.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
15
K.I.S.S. Principle
Use the clearest and simplest language
appropriate for a site's content.
Keep it simple and standard.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
16
Common HTML Elements to Structure Web Content
<p>paragraph</p>
<br> = break
<ul>unordered list</ul>
<ol>ordered list</ol>
<li>list item</li>
<img src=“” alt=“”> = image
<strong>bold</strong>
<em>italics</em>
<a href=“”>web link</a>
<a href=“mailto:”>email link</a>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
17
Common HTML Elements to Structure Web Content
Headings (big  small)
<h1>heading
<h2>heading
<h3>heading
<h4>heading
<h5>heading
<h6>heading
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
18
Define acronyms and abbreviations
 Helps text-to-speech technology, cognitive disabilities
plus different language and learning styles.
 Consider providing a “glossary”.
• i.e. www.catea.org/grade/legal/glossary.html
 Spell out first instance in text.
• Way Too Much Information (WTMI)
 Use <acronym> and <abbr> tags.
<acronym title=“Also Known As”>AKA</acronym>
<abbr title=“Street”>St.</abbr>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
19
Identify Language
 Enables proper reading by text-to-speech and
screenreader technology.
 Use “lang” attribute:
• Use with <html> tag to apply to whole document
<html lang=“en”>
• Use with any tag to identify language changes
<p lang=“es”>Hola! Mi amigos!</p>
• Use with <span> tag to apply to an instance
<p>Spanish for hello: <span lang=“es”>Hola!</span></p>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
20
Use Valid Markup (Code)
 Common error… deprecated code:
• Change <b> to <strong> for BOLD
• Change <i> to <em> for italics.
• Remove <font> and bgcolor
– Handle in style sheet (css).
 Check using tools:
• W3C Markup Validator http://validator.w3.org/
• WAVE tool
• Online > W3C icon in HTML Kit
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
21
Structure the Content
1.
2.
3.
Open your preferred web authoring software (HTML Kit).
Open the file: TemplateCode2Practice.htm.
Identify the languague of the file.
4.
Make the First Level Heading <h1> of the Page.
5.
a.
b.
Find the <html> starting tag.
Within <html> tag, add lang=“en”.
1.
2.
3.
Find “Name of Page” and highlight.
Go to Tools > 2nd icon (HTML Wizard), select “h1”.
Dialog box opens, change text to “Objectives” and select OK.
Structure the content in the file to be a paragraph followed by a list with three items.
Code:
<p>After completing this module, students should be able to:</p>
<ul>
<li>Understand the differences and similarities between the various types of federal
courts.</li>
<li>Identify the levels of the federal court system.</li>
<li>Grasp the basic principles of legal research.</li>
</ul>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
22
Structure the Content
5. Find the text starting “After completing …” and ending
with “legal research” and structure it to be a paragraph
followed by a list with three items.
Code:
<p>After completing this module, students should be able
to:</p>
<ul>
<li>Understand the differences and similarities between the
various types of federal courts.</li>
<li>Identify the levels of the federal court system.</li>
<li>Grasp the basic principles of legal research.</li>
</ul>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
23
Links are Web's #1 interaction ...
 “Violating common expectations for how links
work is a sure way to confuse and delay
users, and prevent them from being able to
use your site.”
 Life is too short to click on an unknown.
Tell people where they're going and what
they'll find at the other end of the link.
Source: Jakob Nielsen (2005).
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
24
Listening vs. Seeing the Web
Screenreaders
Get
Information
One
Word
At
A
Time
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
25
-- And By Viewing Links Or Headings In A Page.
Click here
Click here
Click here
Document
Here
Download
More
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
26
Links
 Inform user if opening new window.
 Identify file type and size for non-web links and
provide link to download software.
•
i.e. My File (
, 35 KB)
 Separate adjacent links with printable characters
surrounded by space to improve readability,
target area.
 Provide distinct link text that makes sense if read
out of context (list of links).
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
27
Testing Links: WAVE tool
i.e. click here
*Link uninformative*
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
28
Testing Links: AIS Web Accessibility toolbar:
Doc Info > Meta Info > List Links
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
29
Testing Links: AIS Web Accessibility toolbar
“ List Links”
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
30
Link What You Mean
1. Open your preferred web authoring
software (i.e. HTML Kit).
2. Open or create an HTML file.
(i.e. TemplateCode2Practice.htm)
3. Find and make these links informative.
a. Click here for Previous Section.
b. Link to sponsor/funding source.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
31
Images
Images
Federal Court Concepts
 Alternative-text (alt-text) for images #1 solution
 Provide same information by context
Select the best “alt-text” for sample image:
Mailbox
1. Mailbox
Letter entering
mailbox
2. Letter
entering
mailbox
P.O. Box 123
Anywhere, State
98765
Mailing Address
3. Mail
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
32
No alt-text = no understanding
kwajex.gif (45k)
 Without alt-text, the filename
of image or embedded type is
displayed (i.e. kwajex.gif and
inline, inline, inline, link,
inline)
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
33
Code for alt-text of Images
Federal Court Concepts
<img src=“logo.gif”
border=“0”
height=“150” width=“200”
alt=“Federal Court Concepts”>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
34
Null/Empty/Blank alt-text
 Describing decorative, spacer, or bullet images,
and repeating surrounding text annoys and
confuses users.
Bad:
no alt-text
alt=“right green corner”
alt=“Arrow On”
alt=“Bullet”
alt=“Information” Information
 Set alt so voice-enabled technology ignores and
does not display in text browsers.
Good: alt=“”
alt = “” Information
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
35
Length of alt-text
 Holds 255 characters but maximum of 150
characters allowed by some browsers.
 But, what if highly detailed like logo?
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
36
Long Description
 Use “longdesc” attribute of IMAGE (img) tag for
detailed images or graphs; goes to webpage
describing the image.
<img src=“structure.gif”
border=“0” height=“150” width=“200”
alt=“Federal Court Concepts”
longdesc=“logodescription.htm”>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
37
Additonal Ways For Long Description
 Inconsistent (but better) support for “longdesc”.
 Benefits users with cognitive disabilities, different
learning styles or language.
•
Use a “d-link”.
– Federal Court Concepts
catea.org/grade/legal/index.html
•
Link around image to another web page with description
– assistivetech.net
assistivetech.net
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
38
Caption below image for “long description”
Source: catea.org/grade/lifespan/Segment2/slide3.htm
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
39
Describe mathematical equations by case and position.
Source: catea.org/grade/mecheng/mod2/mod2.html#slide2
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
40
Testing Images:
Use validation tool:
• WAVE http://wave.webaim.org/
no alt-text
alt-text
null alt-text
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
41
Testing Images: AIS web accessibility toolbar
Images > Toggle Alt, Image List, Show Images
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
42
Testing Images: AIS web accessibility toolbar
Text-version: Tools > Other Tools > Lynx Viewer
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
43
Adding Images
1. Open web authoring software (HTML Kit).
2. Open web page file (i.e.TemplateCode2Practice.htm)
3. Add an image to the file (i.e. header2.gif )
a.
b.
c.
d.
e.
Find “ header2.gif” and highlight.
Object > 2nd icon (Images) to open dialog box.
Select “Add”, browse to images folder.
Select header2.gif.
Set "alt" attribute in <img> = “Federal Court Concepts."
4. Find “arrowleft.gif” and add alt=“”.
5. Find “arrowup.gif” and change alt=“”.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
44
Interface Design
 Consistent, logical from page to page.
 Use “expected” conventions.
 Larger buttons and icons.
 Avoid excessive use of graphics.
 Last resort make a text-only page.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
45
Use high contrast between text and background
High Contrast
High Contrast
Low Contrast
Very Low Contrast
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
46
Navigation Design
 Avoid JavaScript or Flash for menus.
 Give reasonable time and alert if timed.
 Offer consistent, logical, ready-placement.
 Offer site map and contact / help information.
 Provide search feature.
 Describe accessibility features and site design.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
47
Skip-Navigation Link
Permits users to skip repetitive navigation links
and directly access the content.
Benefits keyboard-only access, small screen
devices.
Specifically required by Section 508.
Examples:
• How skip-nav works: www.catea.org/grade/legal/
• Skip-nav link display using css: www.adagame.org/
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
48
Code for Skip-Navigation Link
 Create link as first element in web page <body>.
<a href=“#main”>Skip to Page Content</a>
 Put “anchor” just before content to be accessed.
<a name=“#main”></a><h1>Page Title</h1>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
49
Making a Skip-Navigation Link
1. Open web authoring software (HTML Kit).
2. Open web page file (i.e.TemplateCode2Practice.htm)
3. Find “uncomment to reveal skip-nav”. Remove this
text and the <!-- -- > surrounding some <a> code.
4. Find your <h1> tag. Just before that remove the <!-  surrounding some <a> code.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
50
Cascading Style Sheet (CSS)
 Document associated with a web page that
holds its “look and feel.”
 Separates content from presentation.
 Required by 508 and WCAG to test if web page
is readable with style sheets “turned off”
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
51
Benefits of CSS
 Ensures all pages consistent look and feel.
 Saves time and money in coding and editing design
and formatting for all web pages .
 Standards require; resolves most accessibility and
usability issues ahead of time.
 Results in faster download.
 Allows flexibility to user view (color, size, font, screen).
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
52
CSS In Action
 CSS Zen Garden
www.csszengarden.com
 ADA & IT Technical Assistance Centers
http://adata.org/
 Federal Court Concept (alt viewing)
www.catea.org/grade/legal/accessibility2.html
 How to create a css and styles
 Applying css in HTML file
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
53
Testing CSS
 View without style sheets by:
• “Turning-off” style sheet in browser.
– Tools > Internet Options
•
Use text-only browser
– Lynx Viewer
•
AIS Web Accessibility Toolbar
– Tools > Simulations > Lynx Viewer

Use W3C CSS Validator to check code.
http://jigsaw.w3.org/css-validator/
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
54
Testing CSS: Graphical View of web site
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
55
Testing CSS: Using AIS web accessibility toolbar
CSS > Disable CSS
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
56
How to create css and styles in css file
1. Open text editor or web authoring tool.
2. Save file in images folder as styles.css.
3. Enter an element used in web page
i.e. p (for paragraph)
4. Start style with left curly bracket { .
5. Provide each desired attribute by name,
colon(:), value, and end with a
semicolon (;).
6. End style with right curly bracket } .
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
57
Example of style in css
 Paragraphs large-print, red in Futura font on a
white background:
p {font-size: 90%; color: #cc0033; font-family:Futura
Extra Bold; background: #fff; }
 Create own style for "noted" text centered and
black in bold print on a gray background.
.notetext { text-align:center; color: #000; font-weight:
bold; background: #efefef;}
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
58
Applying css
 Link to external css in <head> of HTML file:
<head><link href=“styles.css" rel="stylesheet"
type="text/css"></head> .
 For HTML elements, no additional coding for styles.
 To apply created styles to web page content, use:
class in start tag, span, or div :
<p class="notetext">
<span class=“notetext”>
<div class=“notetext”>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
59
Creating the Style
1. Open web authoring software (HTML Kit).
2. Open web page file (i.e.stylesTemplate.css)
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
60
Setting the Table: Data vs. Layout
Section 508 checkpoint applies to data
tables, and not layout tables commonly
used in HTML design.
WCAG 5.3 discourages the use of layout
tables.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
61
Reading Order of Tables
Screen
readers
read
information
across
tables
in a
linear
way
thereby
difficult
making
to
it
understand
information
contained
in tables.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
62
Example: Screenreader Table View
“There is a 30% chance of Classes at the
University of rain showers this morning, Wisconsin
will resume on but they should stop before
September 3rd. the weekend.”
There is a 30% chance of
rain showers this morning,
but they should stop before
the weekend.
Classes at the University of
Wisconsin will resume on
September 3rd.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
63
Data Table
Example:
Type of
Meat
Bologna
First
Name
Oscar
Second
Name
Meyer
 Make accessible as shown on next slide …
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
64
Identify Headings and Summary for Data Tables
Use <th> tags around heading cells.
Use “summary” attribute of table tag.
If layout table, set summary to null:
<table summary=“”>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
65
Code: Data Table ; Headings & Summary
<table summary=“Full
Name of My Favorite
Meat”>
Type of First
<tr>
Meat
Name
<th>Type of Meat</th>
<th>First Name</th>
<th>Second Name</th>
Bologna Oscar
</tr>
<tr>
<td>Bologna</td>
<td>Oscar</td>
<td>Meyer</td>
</tr>
</table> Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
Second
Name
Meyer
66
Identify Scope of Data Table Cells
For each <th> tag
<th scope = “col”>
In the first cell of row
<td scope = “row”>
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
67
Code: Simple Data Table - Scope
<table summary=“Full name
of my favorite meat”>
<tr>
<th scope=“col”>Type of
Meat</th>
<th scope=“col”>First
Name</th>
<th scope=“col”>Second
Name</th>
</tr>
<tr>
<td
scope=“row”>Bologna</td>
<td>Oscar</td>
<td>Meyer</td>
</tr>
</table>
Type
of
Meat
First
Name
Bologna Oscar
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
Second
Name
Meyer
68
Testing Tables
 Use a validation tool: WAVE
 View in text browser: Lynx Viewer
 Listen with screenreader.
 Run paper down page and read table line by
line.
 Use AIS Web Accessibility Toolbar
•
Table > Simple, Complex, Cell Order, Linearize,
Borders
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
69
Example of Table Testing using WAVE
Type of Meat
Bologna
First Name Second
Name
Oscar
Meyer
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
70
15 Minute Break
?Questions or Comments!
Come back recharged and rarin’ for more!
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
71
Passing the Test
 Evaluate and repair errors:
• Style sheet.
• Coding.
• Color and contrast.
• Accessibility standards (W3C, 508).
 Perform manually and with tools.
 User Testing.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
72
Quick Usability Review
1. What site is this?
2. What page am I on?
3. What are the major sections of this site?
4. What are my options at this level?
5. Where am I in the scheme of things?
6. How can I search?
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
73
Test to Accessibility Standards
 Catch the WAVE: wave.webaim.org/index.jsp
 Be Hermish
www.hermish.com/check_access.cfm
 Use the AIS Web Accessibility Toolbar
www.nils.org.au/ais/
 Check out Evaluation and Repair Tools List
www.w3c.org/WAI/ER/existingtools.html
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
74
Laws, Standards, & Policies on Accessibility
 Individuals with Disabilities Education Act
www.usdoj.gov/crt/ada/cguide.htm#anchor65310
 Section 504 of the Rehabilitation Act of 1973
www.hhs.gov/ocr/504.html
 Section 508
www.section508.gov
 Americans with Disabilities Act (ADA)
www.adabasics.org
 W3C WAI Web Content Accessibility Guidelines
www.w3c.org/WAI/
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
75
More Resources: Laws, Standards, & Policies
Overview of ADA, IDEA, Section 504
www.kidsource.com/kidsource/content3/ada.idea.html
State Law
www.ittatc.org/laws/state_prototype.php
IMS Guidelines: Accessible Learning Apps
www.imsglobal.org/accessibility/accessiblevers/
Frequently Asked Questions on Policy Issues
www.washington.edu/accessit/faqs.php#Policy%20Issues
 Web Access Policy & Standards Construction Tool
www.ittatc.org/state/policy/
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
76
Accessibility Guidelines for Distance Learning
Developed by: GRADE Project and MERLOT
 Format: Must, Should, May
• PDF Files
• Excel Documents
• Flash Applications
• PowerPoint Files
• Video and Media
• Word Documents
www.catea.org/grade/guides/introduction.php
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
77
More Tools and Resources …
Creating Accessible Flash
citt.ufl.edu/Marcela/accessibility/index.html
Illinois Accessible Web Publishing
Wizard for Microsoft Office
cita.disability.uiuc.edu/software/office/index.php
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
78
Publicizing Accessibility
Use appropriate symbols on all promotion,
registration, and information materials, plus
facility signage.
Disability Access Symbols
• Graphic Artists Guild www.gag.org/resources/das.php
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
79
Reach for Holy Grail of Web Site Access
 Distinct, informative links.
 Consistent navigation mechanisms.
 Logically structured page layouts.
 Clear color contrast.
 Flexible style and alternate formats.
 Straight-forward language – K.I.S.S. Principle
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
80
Challenge To You … Universal Design
Accessibility, usability,
and aesthetics
go hand in hand.
Think outside of the box.
Remember no pat
“cookie-cutting” recipe
or tools for ensuring
success.
THINK
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
81
Ideas for Incorporating
Accessibility to Promote
Diversity and Computer
Literacy
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
Turtle Vs. Hare
Test download speed:
• Web Page Analyzer
www.websiteoptimization.com/services/analyze/
Students can chart average times, compare
speeds of different types of pages and
Internet connections.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
83
Broken Trail
Test bad links:
• Link Checker:
www.anybrowser.com/linkchecker.html
Students can calculate good/bad links by
count, percentage on page, and rank.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
84
On the Blink
Test the flicker rate of animation:
• If do not have photosensitive epilepsy,
illustration of flicker standards:
ncam.wgbh.org/richmedia/flicker_demo_start.html
• AIS Web Accessiblity Toolbar
– Tools > Simulations > Flickering Images Demo
 Students can compare and chart the animation
rates to the standards.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
85
Running a Tab
Navigate with keyboard only, tab through
the web page.
Students can calculate count to get to page
content, percentage for pages or web sites,
and rank.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
86
Coloring with Style
 Test color/contrast:
• Vischeck Color Blindness Tool www.vischeck.com
• AIS Web Accessibility Toolbar
– Tools > Simulations > choose various visual disabilities
– Color > Greyscale, Contrast Analyzer, Vischeck
 Students can compare/contrast color
combinations and different views of web pages,
create color wheel, and rank.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
87
Testing Screen Size:
 View in different screen sizes
• Adjust size of browser window.
•
– Middle icon in upper left corner of window.
– Place pointing cursor on side of window till doublesided arrow appears. “Click” hold and then move
side of window to smaller size.
Adjust font size.
–
–
•
Internet Explorer: View > Text Size
Other browsers: Ctrl/alt and +/- keys
Use AIS Web Accessibility Toolbar
– Resize > various screen sizes
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
88
Testing Screen Size:
Opera browser: Shift + F12 for small screen
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
89
Hit the Lynx
Test text browser:
• Lynx Viewer
www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
Students can compare/contrast the text vs.
graphic view to see if same information.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
90
Hearing is Seeing
 Use screenreader or voice-enabled tool.
• IBM Home Page Reader
www-306.ibm.com/able/dwnlds/index.html
•
•
Have students turn off monitors and listen to a web
page then write a paragraph describing what they heard
and/or have them answer a set of questions, i.e. name
of the website? – compare and contrast answers.
Create a text transcript of an audio recording.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
91
Seeing is Hearing
 Have students use free software to caption
multimedia program.
• Windows Media On-Demand Producer (WMODP).
• Media Access Generator (MAGpie)
 Consider file formats need certain software to
play or edit:
•
•
•
•
MOV files (Quicktime)
RM files (Real Player)
ASF and WMV files (Windows Media Player)
MPG and AVI files playable by most
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
92
Hang Out with Acrobat
Test PDF files:
• Adobe PDF Online Conversion Tools
www.adobe.com/products/acrobat/access_onlinetools.html
Students can compare/contrast the text or
web-based version to the PDF file.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
93
Breaking Down Barriers in K-12 Education
Southeast DBTAC
Georgia Tech CATEA
Georgia Tech
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
94
Southeast DBTAC Approach
Educational Leadership Team (ELT)
• Find leaders in the field and work with them.
• Approach since 1991 for ADA Network.
• 2001: Accessible Information Technology.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
K-12 Project Objectives for ELT
Increase awareness.
Establish expectations for access.
Enhance existing efforts.
Document practices for replication.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
K-12 Project Objectives for ELT
Educate school principals, teachers,
parents and students.
Include accessible technology in teacher
licensing.
Facilitate changes in policy that increase
access.
Apply Section 508 standards as guide.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
K-12 Project Objectives for ELT
Create and maintain a clearinghouse.
Create alliances, enhance collaborations.
Identify promising practices.
Establish model institutions.
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
Southeast DBTAC Accessible IT in Education Training
 Customized training to participant needs throughout the
Southeast, including resources:
• AccessIT Knowledge Base
www.washington.edu/accessit/kb.php
• Breaking Down Barriers: K-12 and Beyond
www.washington.edu/accessit/it-checklist/
• Promising Practices of Accessible IT in K-12 Settings
sedbtac.org/ed/edaction/promising_practices_K12.doc
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
?Questions and Comments!
Marsha Allen, Web Manager, CTRS
marsha.allen@coa.gatech.edu
Kevin Price, Education and IT Technology Specialist
kevin.price@coa.gatech.edu
Center for AT & Environmental Access (CATEA)
Southeast Disability and Business Technical Assistance Center
Georgia Tech, College of Architecture,
490 Tenth Street, Atlanta, Georgia 30318
Fax: 404-385-0641
Phone: 800-949-4232 (v/tty)
www.sedbtac.org
Developed by the Southeast DBTAC Project at Georgia Tech CATEA
With funding from NIDRR, U.S Dept of Education Grant
© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.
100