The TXGenWeb
Project

 
Texas Genealogy & History
"...the people of Texas do now constitute a free, Sovereign, and independent republic..."

- from the Texas Declaration of Independence, 2 March 1836
 


ADA Compliance

Note: The images in the appendix might take awhile to load. I compressed them to ensure quicker loading, but the quality leaves a little to be desired. The websites used in the appendix were not singled out as bad websites. They have great information and the coordinators worked very hard on them. They were only used as examples for specific issues that cause ADA compliance problems.

by Kimm Antell

Most people know that ADA means Americans with Disabilities Act, but they don't know that there is a move sweeping the web to ensure that websites are ADA compliant.

What is ADA?

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)."

Why?

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.

Aha!

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.

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.)

Fonts

Content should use Arial, Helvetica or Verdana font (See Figure 1.)
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

Color Schemes

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; Don't panic
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 Figure 2)
Light text on a dark background is unprintable

Load Time

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 time
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:
Animations
Music
Photos that haven't been compressed
TOO MANY GRAPHICS
Too much content on the front page
Counters
Solutions:
Use very small animations, or none at all; some animations can set off epileptic fits if they flicker too quickly
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 be
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

Music

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.)

ALT Tags

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 Section">

Browser Compatibility

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 Figure 5.)
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.

Consistent Menus

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.)

Links

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.
NetMechanic:
http://shorl.com/humadrufrunube
(checks links, html, browser compatibility, load time and spelling)
Website Viewer: http://www.anybrowser.com/siteviewer.html
(View your own site as your visitors do. Images may show up broken. That is normal.)
Link Check:
http://www.anybrowser.com/linkchecker.html
(Check the validity of links in any static webpage.)
WebMonkey Browser Chart:
http://shorl.com/dydrafepegegi
(Checklist of what works on what browsers. Includes links for other formats such as Mac.)
Bobby:
http://shorl.com/hakybabotreka
(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.)
JAWS 4.51:
http://shorl.com/gekorovubuke
(This is a reader that you can use to read your site for compatibility. This will be a Demo.)
Statistics:
http://www.thecounter.com/stats/
(This page will give you global statistics about web page information such as resolution and browser use by month.)

Final Word

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.

Appendix

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 Conflicts



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 correctly.

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.

You may notice a message beside the county listing indicating it is available for adoption. This means that we are looking for someone to take it over on a permanent basis. If you would like to adopt a web page for one of these counties, please contact Shirley Cullum , State Coordinator.  The assistant state coordinators are  Carla Clifton and Jane Keppler.

Page Design by: Kimm Antell
Graphic Design by: Terri Brown


Copyright 1996 - 2017 The TXGenWeb Project
All Rights Reserved. Limited use rights may be granted by written or electronic permission.