How to create website for everyone designing sites for universal access
The
web is a magical place, a place where you can be
transported to places you have never before seen. It is
growing rapidly, as magical places do, limited only by
the imagination of the web site creators. As it
continues to grow, users with special needs will
increase. 1 in 5 Americans between the ages of 15 and 64
years has a web design disability. Almost 30 percent of all
families in the United States are affected by a member
who has some type of disability. (as measured by having
an activity limitation - see the blue box at the end of
this article.).
Web
site creators when they
create website
will need to rethink their designs to
accommodate them. Fortunately, designing a site for
visitors with special needs is not difficult and often
results in a much cleaner and more usable site. By
making a few simple changes to the site web site
designers will be able to enjoy visits from people from
all walks of life.
What
are these special needs likely to be?
-
Visually impaired (blind, color-blind)
-
Deaf
-
Motion impaired; difficulty using a keyboard or
mouse
-
Cognitive impairments
-
Text only browsers (Lynx)
Good
web design will automatically accommodate many special
needs visitors. For example, clearly specifying the
purpose of a page and laying out the navigation
logically without relying solely on Java-Script, as well
as using alt tags for images, would help all visitors.
After all, you never know who will be visiting with
their graphics turned off because they must pay for
every microsecond of time. Or perhaps they will be using
an older browser that does not recognize java scripts.
Designing accessible sites often means offering two
different web design methods to achieve the same goal.
It
helps to understand how people with special needs
envision the web. Blind people typically use screen
reader software, which reads the page to them one word
at a time, row by row. Think about this for a moment.
When you first see a web page, your eyes take in the
whole layout - the headers, subheaders, side topics,
advertisements, etc. You can quickly see the purpose and
organization of the page and skip right to the
information you need.
The
speech synthesizer will read the alt tag information and
then the create website links. Invisible to the sighted user, this
trick is invaluable to those trying to make sense out of
a series of seemingly unrelated words being spoken by a
speech synthesizer. You could also use a bracketed
layout, like this: [link] [link] [link]. The speech
synthesizer will read this as, "bracket link bracket
bracket link bracket bracket link bracket."
Using
ALT text is the primary method of explaining graphics
used on the site. If the image is just decoration, use
the description "" so the speech synthesizer will ignore
it. If the images are links placed next to each other,
make sure the create website html ALT text has a trailing space, or is
surrounded with brackets. Otherwise, the speech
synthesizer will attempt to read all the alt texts as
one long word. If the graphics are image maps needed for
navigation or information, be sure to label each section
with the appropriate html ALT text and make sure the
information is available in another way as well.
Consider using good sized buttons as the alternate
method of access. This provides help to those with
motion impairments who can’t click on a small area of a
map as well as those that need the visual cues. Page
layout and navigation should be consistent on all pages,
i.e., always on top or on the left. This will aid
visitors using small screens such as telephone devices,
as well as visitors with special web design needs. If your links
are going to open a new window or activate a
Java-Script, make sure and tell that to your visitors.
Clearly
labeled navigation is important to all
create website
users, not only
those with special needs. While not underlining your
links but showing them in a different color looks really
cool, it is confusing for new users of the net who are
looking for underlined links and impossible to interpret
for users who are color-blind or using a black and white
display.
Use
color carefully. Approximately 8% of web users have
difficulty distinguishing colors to some extent. Your
colors should not be so dense as to appear black to a
black-and-white screen, nor so alike in value as to
appear identical to viewers who can’t differentiate
between red and green, the most common form of color
blindness. The foreground and background colors should
contrast sufficiently with each other. Don’t use
mystery links. If you need to put your cursor over a
link to see where it goes, you are going to not only
confuse new users of the web but also make it difficult
for visitors with motion impairments. Try to
create website with
web safe colors - older screen readers have problems
with non web safe colors. Web safe colors are easy to
identify - the hexadecimal number will be three pairs of
matching digits. The only digits you will see in a web
safe color are: 00, 33, 66, 99, CC and FF.
A
logical navigation layout, besides being good design,
create website
is
essential for viewers who might be learning disabled, or
using a speech synthesizer. A logical design uses HTML
tags that identify text for what it is and not just how
it looks. For example, headings should be marked up
using proper <H> tags. Speech synthesizers can read this
HTML and will give proper emphasis to headings and
subheadings if they are marked up with the <H>
attribute. A properly marked up web page can be imported
into Word with the headings create website (H1) and subheadings (H2
etc.) displaying as an outline. Again, a benefit for
the visually impaired who may need a quick review of
your site. Incidentally, images can be surrounded with
<H> tags if you wish to give the images’ ALT text
special emphasis.
Another
example of a logical markup is the use of the <EM> tag
rather then the <I> tag. The <I> tag gives text an
italic look. The <EM> tag gives text an italic look and
an emphasis while being read by a speech synthesizer.
<STRONG> works in place of <B> the same way. Also, all
attribute values must be quoted, even those which appear
to be numeric, as many screen readers rely on those
quotes. They maybe required for sites having to abide by
government guidelines fo accessibility, too. For
example, a correctly quoted attribute value would be
<table rows="3"> not <table rows=3>.
Does
your site rely on scripts, applets, plug-ins or frames
for navigation and/or information? Provide a second way
for users to obtain the same information. For example,
audio clips should be accompanied by a transcript for
the deaf user. Video clips should not be essential to
the information presented on the site. If they are, you
may want to consider including a hyperlink to an
information page which will convey the web design information in a
create website
textual manner. Animated presentations should have an
explanatory html ALT description for the visually impaired.
Don’t make this description too long, however, some
speech synthesizers have size limits.
Keep in
mind that your text will be read straight across - if
you have a picture in the middle of text, the speech
synthesizer will read, "text text text picture
description text text." It’s often best to align the
picture to the right or left of the text so the alt
description is read separately. If you really like the
look of the surrounded picture, use brackets in your alt
description so it will be read as, "text text text
bracket picture description bracket text text." Frames
are difficult for a speech synthesizer to interpret. If
you must design your site in frames, label the top frame
clearly with alternate navigational methods.
To
assist motion impaired users, navigation options should
be clearly labeled and easy to click on. The words
"click here" are not the best choice as a
web design motion-impaired user may not be able to hit a target
that small. Use descriptive text instead. Avoid the use
of the html "drop down-box-and-[GO]-button." This is an
unnecessary bit of extra clicks even for people without
motion impairments.
If you
use tables for
create website
your layout, keep all the information
pertaining to a topic in one cell. Remember that a
speech synthesizer will read cells next to each other in
sequence. If you have information that is more than one
cell long, use shift-enter to keep all the material in
the same cell. Avoid very complex tables to display
create website
content, if possible. If the table is too complicated,
it may confuse the screen reader. If you must use these
tables, set short-cut keys and specify the tab order of
your elements.
Using
bulleted lists are often a good way to present
information. Besides being visually attractive and
easier to read, numbered lists make it easier for people
who are listening to the information. If you use an
image as your bullet, be sure to give each image the
appropriate ALT text.
As a
double check, run your text through a spelling and
grammar checker. Speech synthesizers will always try to
read a word, even if it is misspelled. Run your page
through the validator at
http://www.cast.org/bobby/. Bobby is a Web-based
web design tool that analyzes web pages for their accessibility to
people with disabilities. Bobby will examine your site
and give you a report indicating any accessibility and
browser compatibility errors found on the page. Once all
the pages of your site receive a Bobby Approved rating,
you are entitled to display a Bobby Approved icon. This
is a real feather in your cap, so do it today!
Physical
impairments are wide and varied. They
include conditions such as muscle weakness,
paralysis, joint discomfort, and spinal
injuries, or disease processes such as
arthritis and muscular dystrophy. cerebral
palsy, mental retardation, autism, traumatic
brain injury, or stroke. Speech problems can
also result from several disorders affecting
nerves and muscles including ALS, dystonia,
Huntington's disease, multiple sclerosis,
and muscular dystrophy.
People Who Are
Deaf or Hard of Hearing or have a speech
disability
Increasing prevalence of Web multimedia
content that includes dialogue and sound but
does not include captioning. Additionally,
with the growing popularity of speech
recognition interfaces, people within the
deaf culture who have limited speech
capacity
People with
Physical Disabilities and Motor Impairments
For people with physical disabilities or
motor impairments, accessibility issues can
take on a wide range of challenges. Some
create website
people have use of their hands while others
do not. Some have the ability to use mouth
sticks and head pointers while others rely
on infrared devices.
People with
Cognitive or Neurological Disabilities
Individuals with dyslexia, dyscalculia, and
auditory perception difficulties benefit
from information being presented in short,
discrete units. Easily digestible chunks of
data make the important points in your
content stand out as well. Some neurological
conditions can result in users being
sensitive to excessive flashing in
animations or blinking that occurs within
certain ranges of frequencies. Seizure
disorders have been known to be triggered by
such events. Any time that the eye is
distracted from the real content of the
page, your meaning may be lost. |
|