Transcript Barrier-free Web design - Kansas State University

EASI
Equal Access to Software
and Information
EASI is the premier provider of
online training about
accessible information
technology
EASI COURSES
www.rit.edu/~easi







Barrier-free Info Tech
Barrier-free Web Design
Advanced Web Design
Barrier-free E-learning
Train the Trainer
LD & Accessible IT
Business Benefits of Accessible
Design
2
BARRIER-FREE WEB
DESIGN




Resources
WAI www.w3.org/wai
EASI www.rit.edu/~easi
www.access-board.gov
3
WAI


The Web Access Initiative was
established by the World Wide
Web Consortium to develop
guidelines on making the web
accessible to users with
disabilities
http://www.w3.org/wai
4
WAI




WAI has created many useful
resources including:
Authoring tool guidelines
Web design guidelines
Web quick tips
5
WHY UNIVERSAL DESIGN?




It’s the Right Thing TO DO
It Makes Ecconomic Sense
It’s the Law
Do It For Yourself
6
ACCEESS FOR ALL
Disabled users surf your pages
with:
 Screen Magnification Software
 Screen Reading Software
 Alternative Browsers
 Alternative Keyboards
 Alternative mouses
7
IMAGES AND ANIMATIONS

Use the alt attribute to describe
the function of all visuals
8
WEB PAGE AS IMAGE
9
SAME PAGE GRAPHICS
OFF
10
ALT TAG HTML CODE
<img src="alt2.gif" width=417 height=128
alt="EASI
Banner, with words EASI Equal Access to
Software
and information" border=0 align="middle">
<p>
<img src="alt3.gif" width=285 height=143
alt="Picture of Dr.Norman Coombs and
Dick Banks" border=0 align="middle">
11
IMAGE MAPS

Use client-side maps and text
for hotspots
12
MULTIMEDIA

Provide captioning and
transcripts of audio and
descriptions of video
13
HYPERTEXT LINKS


Use text that makes sense
when read out of context
For example, avoid “click here”
14
Links That Make Sense
Click Here to view EASI video on
Adaptive Computing
Click Here to view video on
Adaptive Computing
15
PAGE ORGANIZATION
• Use headings, lists and consistent
structure
• Use CSS for layout and style
where possible
16
GRAPHS AND CHARTS

Summarize or use the longdesc
attribute
17
SCRIPTS, APPLETS AND
PLUG-INS

Provide alternate content in
case active features are
inaccessible or unsupported
18
FRAMES

Use noframes and meaningful
titles
Example of NOFRAMES and
TITLE Code
19
TABLES


Make line by line reading
sensible
Summarize
20
CHECK YOUR WORK





Validate for HTML
Validate for access features
View with several browsers
View using browser with
graphics off
Use WAI checklist and
guidelines
21
ACCESS CHECKERS

Bobby
http://www.cast.org/bobby/

WAVE

A-PROMPT

22
THANK YOU FOR CARING
We thank you for caring enough to
make the world of information a
better place for us personally
and millions of people just like
us.
23
CONTACT INFORMATION



My e-mail: [email protected]
EASI www.rit.edu/~easiNational
Center for Accessible Elearning:
Easi-elearn.org
24