Transcript No Slide Title

GENASYS
University of Southern Maine
301C Bailey Hall
37 College Avenue, Gorham, ME
04038
Generating Assistive Technology Systemically
Where powerful, long-term, systemic changes
in teacher education are stimulated
GENASYS.usm.maine.edu
PT3 Catalyst Grant
1
Web
Accessibility
Developed by: Doug Kahill
What are the most important things to
understand in terms of making a Web site
accessible?
People access the Web in very different ways.
Web sites should be designed in ways that
enable access by all people.
regardless of what kind of hardware or software is
used
3
Why?
It’s the right thing to do & it’s the law!
The Rehabilitation Act
Section 504 (1973)
Section 508 (1998)
The Individuals with Disabilities Education Act (IDEA)
(1975, 1990, 1997)
The Americans with Disabilities Act of 1990 (ADA)
The Telecommunications Act of 1996
Section 255
The Assistive Technology Act of 1998 (ATA)
4
Who is Affected?
Persons who:
may not be able to see, hear, move, or be
able to process some types of information
easily or at all
may not have or be able to use a
keyboard or mouse
may have difficulty reading or
comprehending text
5
Who is Affected? (cont’d)
Persons who:
may have a text-only screen, a small
screen, or a slow Internet connection
may not speak or understand fluently
the language in which the document
is written
may have an early version of a browser,
a different browser entirely, a voice
browser, or a different operating system
6
World Wide Web Consortium (W3C)
Web Accessibility Initiative (WAI)
www.w3.org/wai
Detailed guidelines on Web accessibility
Guidelines will change as technology advances
7
Accessibility
Guideline 1
Provide equivalent
alternatives to auditory and
visual content.
8
Examples of Equivalent Alternatives
Navigational Elements
In this example, navigational elements are
displayed both as text and image. Persons
who have difficulty processing textual
information may benefit from viewing the
icons, and vice-versa.
9
Examples of Equivalent Alternatives
Transcripts
A text transcript should accompany a
media clip that includes speech.
10
Examples of Equivalent Alternatives
Descriptions
Video clips with
descriptions in sign
language may help
individuals who are
deaf who are
unfamiliar with
spoken or written
English.
11
Examples of Equivalent Alternatives
Captioning
Video clips, especially
those containing
spoken language,
should include
captioning.
12
Examples of Equivalent Alternatives
ALT tags
13
Examples of Equivalent Alternatives
ALT tags are important for users of:
Screen reading software
Slow modems
Computers with slow processors and/or
low RAM
14
Examples of Equivalent Alternatives
15
Examples of Equivalent Alternatives
Images and ALT tags
This Web page
contains a variety of
images, dispersed
throughout the text.
Here’s a closer look at
one of the individual
images.
16
Examples of Equivalent Alternatives
Images and ALT tags (cont’d)
Here’s the same page
viewed without images.
Notice the presence of a
text placeholder where
the image should appear.
This is the ALT tag.
17
Examples of Equivalent Alternatives
Images and ALT tags (cont’d)
If no ALT tag had been
attached to the image,
it would appear
completely blank with
images turned off,
giving the user no
information about its
content.
18
Accessibility
Guideline 2
Don’t rely on color alone.
19
Example of WAI Guideline 2
Sufficient contrast between
background and text
This text would
be quite difficult
for most people
to read. There is
little contrast
between text and
background.
Here, there is
sufficient
contrast
between text
and
background.
20
Example of WAI Guideline 2
Text format and quality of content
This text
needs
emphasis.
Here, the emphasis is
conveyed only by
changing the color of the
text. Persons who are
color blind may have
difficulty noticing the
change.
This text
needs
emphasis.
Here, there are other changes
to the text: underlines, italics,
and bold. Any of these
different text formats will work
to alert the user who has
difficulty distinguishing
between colors.
21
Accessibility
Guideline 3
Use markup and style sheets
and do so properly.
22
Example of WAI Guideline 3
Choice of HTML tags
BOLD
Vs.
STRONG
23
Accessibility
Guideline 4
Clarify natural language.
24
Example of WAI Guideline 4
Identify changes in natural language.
This list would not
be read properly
unless the
language changes
were identified
• Jardinería en España
• Trädgårdsskötsel i Sverige
• European Rose Forum
• Gardening in the United Kingdom
• Gärtnern in Deutschland
• Le Jardinage en France
• Giardinaggio in Italia
25
Accessibility
Guideline 5
Create tables that
transform gracefully.
26
Example of WAI Guideline 5
Ensure
necessary
mark-up for
tables.
Author’s intent:
Once upon a time, in a
land far, far away...
Interpretation by screen reader:
Once in a land upon far, a
time, far away...
27
Accessibility
Guideline 6
Ensure that pages
featuring new technologies
transform gracefully.
28
Example of WAI Guideline 6
Ensure that links are usable when
Javascript is not supported.
29
Accessibility
Guideline 7
Ensure user control of
time-sensitive content
changes.
30
Example of WAI Guideline 7
Avoid causing the screen to flicker.
31
Accessibility
Guideline 8
Ensure direct accessibility
of embedded user
interfaces.
32
Example of WAI Guideline 8
Embedded media interfaces
QuickTime™ can be
accessed via simple
keyboard commands, such
as hitting the return or
arrow keys.
RealPlayer™
cannot be accessed
via the keyboard.
33
Accessibility
Guideline 9
Design for
device-independence.
34
Example of WAI Guideline 9
Alternative navigation for server-side image
maps
Server-side image map
from the National Weather
Service.
http://www.state.me.us/m
ema/weather/weather.htm
35
Example of WAI Guideline 9 (cont’d)
Below the
image map
from the
National
Weather
Service, a
table of
textual links is
included,
corresponding
to each link
from the
image map.
36
Accessibility
Guideline 10
Use interim solutions.
37
Example of WAI Guideline 10
Use of non-linked characters
A screen reader might not be able to separate these links
properly because there are no non-link characters
between them.
This navigation bar includes non-link, printable
characters between adjacent links, so a screen reader
would be able to separate the links, as intended.
38
Accessibility
Guideline 11
Use W3C technologies and
guidelines.
39
Example of WAI Guideline 11
Equivalent accessible pages
40
Accessibility
Guideline 12
Provide context and
orientation information.
41
Example of WAI Guideline 12
Frame identification and navigation
Title each frame.
Describe the relationships between frames.
42
Example of WAI Guideline 12 (cont’d)
Page Navigation
This page
contains
headings, which
help the user to
navigate
between distinct
ideas or
sections.
43
Accessibility
Guideline 13
Provide clear navigation
mechanisms.
44
Example of WAI Guideline 13
Clearly identify targets of links.
The words, “click here,” as shown in
this ad banner, tell the user nothing
about the link. A person using a
screen reader would have no idea
where this link goes.
Here’s an example of a good link description. The user
has a very good idea where this link will go.
45
Accessibility
Guideline 14
Ensure that documents
are clear and simple.
46
Example of WAI Guideline 14
This Web site
has a simple,
consistent
page layout
and
navigational
system, and
uses alt text
for images.
47
Web Access Icons
Center for Applied
Special Technology
(CAST)
www.cast.org
National Center for
Accessible Media
(NCAM)
www.wgbh.org/ncam
48
For further information
World Wide Web Consortium (W3C)
www.w3.org/WAI/
Equal Access to Software and Information (EASI)
www.rit.edu/~easi/
National Center for Accessible Media (NCAM)
www.wgbh.org/ncam
Center for Applied Special Technology (CAST)
www.cast.org
Generating Assistive Technology Systemically (GENASYS)
genasys.usm.maine.edu
49