|
Updated, March 2003!
Amazon.com has now incorporated a text only web site. See Alan's March 2003
article for details: Amazon's
New Alternative—Text Only!
Creating a web site that is accessible to the blind is not as hard as you might
think!
Have you ever gone to a really big store to find something, only to become
frustrated because you had no clue where that something was located? Did you
have to waste your time looking around through all that other stuff to find
the item you wanted? Even worse, if you decided to keep looking, did you become
even more frustrated because the sections in the stores weren't clearly
marked?
That's the type of frustration a blind person usually experiences when they
need to use the Internet. Even with the best screen-reader software, if the
site isn't designed well, it can be a very frustrating experience! Most web
designers, much like many designers who create stores layouts, don't recognize
the importance of how a good layout directly relates to attracting and keeping
customer (users).
In the case of web designers, when asked why they don't make a site more user
friendly to the blind or other disabled persons, the common hue and cry is "If
I do that, it will stifle my creativity". There's no real truth to this
claim, however. In fact, it is simple to make a web site user friendly. HTML
provides options for better accessibility to those designers who are savvy
enough to know how to write the code in such a way that allows for better
usability by the blind.
Alt Tags
An Alt tag is an HTML code that allows a web designer to provide a additional
text explanation for the express purpose of giving a text label to a link, graphic,
or picture. Without the alt tags, blind people may have no clue what
link they are clicking on.
Here's an example of a well-done web page:
For those of you using a screen reader, the words below, preceded by stars,
are what you would read from the Alt Tags on the site:
Welcome to Chicago Ridge Mall
*View Store Directory
*View Mall Services
*View Mall Events
*View Mall Hours
*View Directions to the Mall
*Contact Us
*View Mall Hours
Now this is an easy site to read! And the web page is very clean, which makes
navigation and reading of this site even better. More about web page cleanliness
in just a bit.
First, however, let's see what a web page with less than perfect, or no alt
tags, would be like. The problem here at www.amazon.com is that you might be
able to figure out which link you're clicking on (as a blind user), but there
is a certain level of uncertainty.
Here's a screen shot of a problematic web page, and it is also one of the most
popular on the web today:
Now for the screen-reader users. Again, the asterisk text below indicates what
links you would read:
Amazon.com—Earth's Biggest Selection
*ref=top_nav_sb_gateway/103-6272663-1976629
*ref=cm_wl_topnav_gateway/103-6272663-1976629
*ref=top_nav_ya_gateway/103-6272663-1976629
*ref=top_nav_hp_gateway/103-6272663-1976629
*ref=gw_subnav_in/103-6272663-1976629
*ref=gw_subnav_ts/103-6272663-1976629
*ref=gw_subnav_target/103-6272663-1976629
*ref=stuffandsubnav_td1_/103-6272663-1976629
*ref=subnav_sys_/103-6272663-1976629
*ref=nh_gateway/103-6272663-1976629
*ref%3Dtab%5Fgw%5Fgw%5F1/103-6272663-1976629
*tabs/yourstore-unrec-off-sliced
*tabs/books-off-sliced
*tabs/electronics-off-sliced
*tabs/dvd-off-sliced
*tabs/toys-off-sliced
*tabs/magazines-off-sliced
*tabs/baby-off-sliced
*ref%3Dtab_gw_storesdirectory/103-6272663-1976629
You see a noticeable difference between the two sites and the information they
provide to someone using a screen reader. Yes, the blind user can make an educated
guess at what the link is about, but it isn't always possible with every site.
Adding simple alt tags would avoid all potential confusion. And Amazon.com would
attract more screen reader users.
Inserting Alt Tags
Adding an Alt tag is very easy. And most HTML editor programs make it even easier
for the designer to add this additional information. After inserting an image
in, say DreamWeaver, you can select the image and easily add detailed information
to tell a blind person, or someone using a text only reader, what information
is being displayed in the image. The image below shows the property dialog box
for an image in DreamWeaver. Notice the Alt input box that has information entered
to tell us that the selected image is of www.chicagoridgemall.com
home page. If you move your mouse over that above image, you'll see that this
information will be displayed. A blind user would have that information read
to them.
To add an Alt tag manually, you just add the information within the
code. The HTML code would look like this:
<img src="userimages/ai123.gif" width="648" height="481"
alt="Image of www.chicagoridgemall.com home page.">
Cleanliness Next to Perfect Web Pages?
A lot of sites have graphical representations of blank lines that clutter up
the screen, at least for the blind user. Again, alt tags come to the rescue.
If you label something blank line, as opposed to leaving it blank, the
screen reading software will say spacer.gif or something to that effect.
This type of information provides better usability for the blind user.
On the subject of ease of use, let's briefly discuss search engines. A common
complaint I have heard when people who are blind attempt to do an Internet search
at a site like Yahoo or Altavista, is that there are too many links at the top
of the page. I tend to agree. Yes, it can be easy to access the search by using
the keystrokes your screen reader provides (as in Ctrl/Insert/Home for
JFW users), but there is, as always, another way.
There are at least two search engines that don't have an abundance of links
at the top. They are as follows, in order of popularity:
http://www.google.com
or http://www.raging.com/
You will notice that the search field, the main goal of a search engine, is
right near the top. No ads, and no excessive redundancy of links.
All of this is part of complying with the World Wide Web Consortium's guidelines
for web site accessibility. You can find more information about web accessibility
at http://www.w3.org/.
|
