The Americans with Disabilities Act was
passed in 1990 by the 101st Congress. The ADA website
states, "[The act] prohibits discrimination on the basis
of disability in 'places of public accommodation'
(businesses and non-profit agencies that serve the public)
and 'commercial facilities' (other businesses)."
A website is not a place.
That's true. However, the web also was not around in 1990.
(Technically, it was, but we won't get into that.) The ADA
has been amended several times to meet the changing face
of architecture and technology. One of these amendments
deals with the Internet. Government websites are required,
by law, to be ADA compliant. While the TXGenWeb sites are
not considered governmental, it is still vitally important
to ensure that your site meets these standards.
Curious little minx, aren't you?
Consider your users. How many of them are young with good
eyesight and excellent hearing? How many of them live in a
large city that has access to DSL and cable modem?
While we tend to think that most of our users are as web
savvy as we are, they aren't. Most genealogists are going
to be older with glasses and will probably be hard of
hearing. The majority of the people viewing your site will
really benefit ADA compliance.
The good news is that a site that is ADA compliant does
not have to be unattractive. And users who do not need
this service will still be able to use your site without
having to load special software.
People who are hearing impaired or have
vision problems need a special software that will assist
them with viewing your site. ADA compliance usually deals
with those that are visually impaired. There are several
Website Readers out there that will read a site to the
user. You will come to understand why some of these
regulations make it easier for a "reader" to understand a
website. (See Links for more info.)
· Content should use Arial, Helvetica or Verdana font (See
o Fonts with Serifs are hard to read
· Size should be no smaller than "-2".
o Don't use sizes that do not have a plus or minus in
front of them
· The overall color scheme of a site must be consistent
throughout the site
o Users who aren't familiar with the web get confused when
a page appears different and sometimes think they have
left a site
· Foreground and background colors provide sufficient
contrast when viewed by someone with color deficits
o If someone suffers from color blindness, they might not
see any text on your site if the contract isn't sufficient
o A good way to test contrast is to view it on a monotone
monitor, if you have access to one; Change your monitor to
256 colors for testing
· Color is never relied on to convey information
· A color on a PC will appear to be different on a Mac;
· Good rule of thumb: The color of the text and the
background should not be similar (a.k.a. don't have brown
text on a beige background); black text on a white
background is always a good default
· Sometimes backgrounds also cause readability issues (See
· Light text on a dark background is unprintable
The longer it takes for a page to load,
the faster you lose your users. Always remember… users are
there to get content, not to see pretty graphics and how
good of a designer you have become. You should keep your
front page load time down to 15 seconds on a 28.8 modem.
This might sound impossible, but it isn't. And the
appearance doesn't have to suffer. (See Figure 3.)
Don't know how to find out your load time?
· Some WSYWYGs, like DreamWeaver, will show you the load
· NetMechanic will do a load time test for you
· E-mail me and I will test it on DreamWeaver
The most common load time problems:
· Photos that haven't been compressed
· TOO MANY GRAPHICS
· Too much content on the front page
· Use very small animations, or none at all; some
animations can set off epileptic fits if they flicker too
· Don't use music
· Find a friend who knows how to compress images and have
them reduce the resolution; I can help out on that if need
· Try to use 5 or fewer graphics on each page and also to
find alternatives such as tables with background colors
and hr lines
· Make your front page a gateway to your site; take the
content that is there and add links to the front page that
take you to another page with the content
· Get rid of counters unless required by your sponsor
With help from Joy Fisher
The blind use screen reading software to "see" a website.
It is very annoying to try to listen to the screen reader
over the din of music you may add to your websites.
Many people add a control panel to stop the music. This is
less user friendly to the visually handicapped.
If you are going to use music on your web site, try to
make it optional instead of having is start when your page
is loaded. Such as:
· Click here for "I Love L. A."
Also, consider this… many people surf the web at work. (I
know, I know, you are very shocked to hear this.) Surfing
the web can be grounds for firing someone. If they are
surfing the web in secret and all of a sudden "Dixie"
starts play from their cubical, they could get fired.
(Yes, they shouldn't be doing it in the first place, but
let's not give more reason to get them in trouble.)
All images need to have ALT tags. ALT tags
are used to describe the image. If you have a picture of a
little girl going through a large book, you might use
<img src="girlbook.jpg" alt="Girl studying her
ancestry">. When a "reader" gets to this image, it will
actually speak these words to the user. If you have a tiny
graphic that is only used as filler, it still needs to
have an ALT tag. I usually use the word "filler" or
"separator" if it is a line to separate sections of a
page. This is extremely important and gets the big
corporations in more trouble than almost anything else. If
you have a button to go to your resources page, and there
is no alt tag, then how is someone using a reader going to
know where to go? If the graphic has a purpose, be sure to
include that as well. <img src="girlbook.jpg" alt="Girl
studying her ancestry will take you to the Records
Does your site work in IE 6.0? What about Netscape 4.7?
WebTV? AOL? PC and Macintosh? Do you graphics work on
Windows 2000? Testing your site for browser compatibility
is an easy way to ensure that you are reaching the largest
amount of users as possible. But how can you do this? You
don't have 10 computers.
There is a link at the end of this presentation to a page
that lets you know what website functions are available to
which browsers (See Figure 4.) This will be a good way to
do a quick check.
Keep a copy of the most recent Netscape on your computer
and test. You can also have multiple copies of different
versions of Netscape on your computer. However, IE
upgrades, so you can only test one version. Call some
friends who use AOL or WebTV.
One thing that we have noticed recently is that some
graphics are not formatted correctly for Windows 2000 and
they show up as broken links. The best way to test this is
to know somebody who has Windows 2000 installed on their
computer and have them view the site. This also helps for
those people who want to test on PC and Macintosh. (See
Test your site for different resolutions. Several TXGenWeb
sites have backgrounds that look great at 800 x 600, but
at 1024 x 768, they show through the content and make it
hard to read. (See Figure 6.)
Avoid using frames.
Create a simple menu from your main sections that helps
your users to understand your site and helps you to
organize. Place the menu at the top of every page so that
they can get to the main pages from any point in your
site. Always include a "Home" button. Do not use JAVA
menus as many people have it turned off in their browser.
It also helps to have a search engine and a site map on
your site for those who are confused. Be sure to have
links to them at the same place on every page. Along this
line, use Headings on every page. (See Figure 7.)
Use text that makes sense when read out of context. For
example, avoid "click here."
Be sure to include a link to your e-mail so that people
can report problems with the site. I use:
Copyright 2003 by Kimm Antell. All Rights Reserved.
Any links to an outside page should open in a new window.
This will help the user to realize that they are leaving
your site. It also gives them quick access to your site so
that they don't get lost and lose your URL.
Below are some links to some sites that will be very
helpful to you. Some of the results may be arbitrary, but
it should give you a foot in the door until you get
comfortable with your ADA knowledge. Note: I have used a
special program to shorten some of these links to make it
easier to type into your browser.
(checks links, html, browser compatibility, load time and
Website Viewer: http://www.anybrowser.com/siteviewer.html
(View your own site as your visitors do. Images may show
up broken. That is normal.)
(Check the validity of links in any static webpage.)
WebMonkey Browser Chart:
(Checklist of what works on what browsers. Includes links
for other formats such as Mac.)
(This free service will allow you to test web pages and
help expose and repair barriers to accessibility and
encourage compliance with existing accessibility
guidelines, such as Section 508 and the W3C's WCAG.)
(This is a reader that you can use to read your site for
compatibility. This will be a Demo.)
(This page will give you global statistics about web page
information such as resolution and browser use by month.)
When you change something on your web page and load it to
the server, immediately test it to make sure it loaded and
is working correctly. Even if it is just the addition of a
comma. To ensure consistency throughout your site, create
a blank template. This will make it easier to add pages
later that will be using your ADA compliant scheme.
Figure 1 – Font Type and Size
Points: Which paragraph is the easiest to read? The final
one which is Arial, size –1. (The others are Times, size
–2, Arial, size –2 and Times, size –1, respectively.)
Figure 2 – Color Scheme and Pattern
Points: The pattern behind the text makes it very hard to
read the content especially since some of the pattern has
a darker blue that blends in with the text color.
Figure 3 – Load Time
Points: This site was designed by me. It takes 12 seconds
to load on a 28.8 modem. Most of the color scheme is used
by giving a table cell a background color. There are 3
graphics on this page not including the 3 logos and the
COM award notice.
Figure 4 – Browser Compatibility
Points: Some people still use older browsers. For
statistics, please visit the Counter.com link listed in
the links section.
Figure 5 – Browser vs. Browser
PC, Windows 2000, IE Version 6.00
PC, Windows 2000, Netscape Version 7.00
Points: Both of these pages are incorrect. The first
example has broken graphics because they aren't formatted
correctly and do not show up on Windows 2000. The second
example has working graphics, but they are skewed. While
Netscape is displaying them, it isn't displaying them
Figure 6 – Resolution
Points: This site works well at 800 x 600, but when the
resolution is changed to 1024 x 768, there are major
problems. The background image is only 800 pixels wide.
Therefore, the text stretches to overlay the background
and becomes hard to read.
Figure 7 – Menus and Headers
Points: Menu is on every page and always in the top
left-hand corner. Site Map link is on every page in the
top right-hand corner. Header ("Records") is always at the
top of the content.
Points: Footer of the page is the same on every page and
is clearly separated from the content to avoid confusion.
There is a link to the web designer and also a last
updated area. (Not necessary, but helps users to see if
there is any new information.) There are two search
engines: one for the site and one for the archives. The is
also a short menu of links that are of import, but don't
belong in the menu.