Making Your Site Speech Friendly

divider

There are many considerations that a lot of people don't take into consideration when composing a web site. One of these is the blind and visually impaired population who use screen readers to access the internet.

Screen readers convert what is seen on the screen into speech and those who utilize this software use keyboard commands to navigate the internet. There are several things that should be considered if you want your site to be accessible to the sighted as well as blind population who use the internet.

Screen readers read an entire line of text. Therefore, it is important that you keep this in mind when you compose your web page. If several links are on the same line, it is difficult, if not impossible to tell which link a cursor is sitting on. Links embedded in paragraphs are hard to navigate, as are graphical images and icons that are not text tagged. A final consideration is the use of forms.

small dividing image

Helpful Hints

Use tables that degenerate gracefully in lynx,
Offer a text index of your site,
and consider placing links on individual lines

small dividing image

The newest version of Lynx now offers access to tables. This is an exciting development because it now provides web designers with the use of tables as well as the usual options of text indexing and using line breaks between links. Although lynx does offer the use of tables, there are still some table variations that are not accessible to lynx users, so please check your site through a program such as bobby to be sure the tables are degenerating properly. An example of such a format can be viewed at:
Career Search Launch Pad - Speech-Friendly Version.
Terry Sullivan has cleverly incorporated tables in his index. Although they are on the same line in windows, they are placed on individual lines by lynx. It is important to note that tables should only be used in regards to links. Please don't use table formatting for text. This can create a columnar foramt which can make your page inaccessible to the blind and visually impaired who use windows screen readers. Remember that screen readers are linear in nature...

dividing image

Remember that lynx will recognize parameters such as left, right, center, width, height, cols, and rows so try to use the most generic type of table possible. An example of such a table might be: <TABLE>
<TR>
<TD ALIGN="CENTER">
<A hREF="index.html">return home</A>
<br>
</TD>
<TD ALIGN="CENTER">
<a Href="ribbon.htm">The Ribbon Award</A>
<br>
</TD>
<TD ALIGN="CENTER">
<A HREF="search.htm">Search Engines</A>
<br>
</TD>
</TR>
</TABLE>

In windows, you would see the following:

Return Home The Ribbon Award Search Engines

but, in lynx, you would see a degenerated table:

Return Home
The Ribbon Award
Search Engines

If you do not want to use tables in your page, there are other options available to you. It is far preferable to the blind and visually impaired if links are on individual lines. It is much easier to navigate because screen readers read an entire line of text at a time. You might consider using the <OL>, <UL>, or <DL> list tags on your page. By using this option your pages will be 100% accessible to everyone! If you feel that this would deter from the appearance of your site, there is an alternative!

You can offer a text index. Most sites offer an index of the site at the bottom or top of each page, most of the time the links ar placed multiple to a line, such as:

News Weather Sports News Around the State

If this is the case on your site, please consider using a text index to facilitate access by the blind. A text index consists of a separate page on your site. On this page you will place the links which occur in your index on individual lines. This can be accomplished in a variety of ways. A <p> or <br> tag between each link will work as will the <UL>, <OL> or <DL> tags. You don't have to worry about providing background colors or other adornments to your text index page, since it is just to provide access to those who have graphics disabled, or those who prefer to load pages quickly, you can leave the bells and whistles off this link, which will make your work much easier! If you have a page with links links that are specific to that particular page you might also consider adding those links beneath the page link; this will crate a table of contents type structure. The text index might appear like this:

If the links on your pages, aside from your index, are on individual lines, then simply provide a text index of your pages..

If you have multiple links on a line and would like to use the "table of contents" option, then it might appear like this:

News
In our community
in the state
in the county
Weather
United States Weather
Canada Weather
Australia Weather
Sports
Football
baseball
basketball

Finally, on each of the pages where your index occurs, just place one more link to the text index. It will barely be noticeable and will not alter the appearance of your pages, but it will be a great asset to the blind and visually impaired. Now the index on your pages would appear something like this:

Text Index
News Weather Sports Around the State

small dividing image

Avoid multiple links to a line in Paragraphs

Can you figure out which words are the actual links in the following passage?

Thanks for stopping by my site and don't forget to check out the new programs that are available for download. I am excited at the prospect of offering this exciting new service and hope that you will write to me if you have any suggestion.

The links are the words programs, download, new service and write to me, but it is difficult isn't it? Because you don't have the advantage of being able to see the hypertext links. A preferable way to handle this passage would be to place one link in each line of the paragraph that would allow the blind to understand from the context of the sentence where we will be going if we choose the link. Another option is to use an introductory paragraph followed by the links.

An example of an introductory paragraph might be:

Hi! Welcome to my site and be sure to check out the programs I have available for download. I am excited at the prospect of offering this exciting new service and hope you will write to me if you have any suggestions!

Or, you could add a bit of pizzaz to the list by using your favorite bullet if you would prefer, just be sure to use an alt tag to erase the bullet, or place a *, --, or whatever other symbol you would like to appear in non graphical settings and place a line break between each of the lines...

dividing image New Programs
dividing image My download page
dividing image About my new service
dividing image Write Me!

small dividing image

Alt Tag all links and graphical images

Pretty Pictures and Icons can make or break a site in the world of images and graphics. The sighted world appreciates these and there is no reason to avoid using these tools to make your site attractive and enjoyable. They do not interfere in any way with the screen reader. There is one consideration, however. You see, when you don't have a text tag on these images all a text browser will display is:

[LINK] [LINK] [LINK]

or

[IMAGE] [IMAGE] [IMAGE]

or

[INLINE] [INLINE] [INLINE]

You can still use a graphic as a link on your web page, just alt tag the graphic! Alt tagging the graphic will display the image link on graphical browsers and offer the alt tag text on the non-graphical browsers. That way there is no need for you to totally reformat your page! For example, if you have a picture of your wife and the family dog, a simple alt tag of "My wife Amanda with our black lab lolly." This tells the blind and visually impaired what you have on your page, while those who can see the graphic can enjoy the visual effect.

If you use inline images on your site, such as blueball.gif or bullet.gif, or mailbox images that add little or no content to your page consider using the alt="" tag in your image tag. That would make them invisible to non-graphical browsers. Your page would also appear much cleaner. The graphical browsers would still load the image and your page would look lovely to the sighted but be far easier to navigate for the blind and visually impaired.

Another frustrating occurrence is when a site is accessed and all we hear is:

[ISMAP] or [BISMAP]

this tells us we may as well move on because this site is entirely graphical, and thus inaccessible to us.

Please consider offering a text alternative link if you decide to use an image map on your site. Image maps are absolutely inaccessible to the blind and visually-impaired. by offering a text-only link at the top of your page, you are allowing the blind and visually impaired, as well as those with their graphics disabled to access your site and will have the added benefit of allowing access to a wider audience.

If you are a graphic artist who offers graphics for download on your site, please consider the needs of the blind and visually impaired when setting up your site.

By setting up your site so that it requires a click of the right nouse button, you are excluding the blind and visually impaired from access to your graphics. Please consider making the graphics a hyptertext link: <img src="graphic.jpg" alt="A background image of roses and violets"> <HREF="graphic.jpg"></a> would not only describe the image, but also offer it for download to all of your visitors rather than just the "graphically enabled." The image would appear to the sighted, yet the alt tag would be available to those who visit with their graphics disabled.

small dividing image

Offering images for Download?

Enjoying the option of placing graphics on web pages does not belong solely in the domain of the sighted! Blind people enjoy spiffing up their web pages as well! If you are offering such items as background images or icons that are available to be used on web pages, please consider making them accessible to the blind and visually impaired!

Blind people cannot click on the right mouse button and download a file. Since our screen readers can't find it, and don't offer the right mouse button option, it would be nice if the graphic files could be actual hypertext links that would allow us to access the files even in a text only browser like lynx!

Be descriptive in your alt tag when describing such files! If you have a background that you would like to share with everyone, "a startlingly realistic rendition of a waterfall with rainbow hues scattered about the image," is far more preferable to 0234851.gif, don't you think?

small dividing image

Frames, is there an option?

Yes! Most definitely! Frames can be used on your site while still considering the needs of the visually impaired. All frames have URLs! they are simply web pages that are combined by the browser. So to provide access to those who are not "frame enabled" simply place a link to the individual pages on your home page and offer them as alternatives to the frames! Be sure to also add these links to the page that you use to inform a browser that they cannot access the frames. That way everyone can access them and the sighted can enjoy their frames without locking out those who cannot access them!

small dividing image

Refresh? Please think twice!

You may want to think twice before using the refresh option to send your visitors to another page after a specified period of time. It takes those of us who use screen readers a longer period of time to read a page and it can be very frustrating to have the page disappear and another site load when we have just discovered the link we would like to visit, or the edit box which is so difficult to find. It can be very disheartening to have to hit that back button and start our search all over again, only to be sent off again. It will mean the site is, once again, inaccessible and we will be forced to move on.

small dividing image

Forms! The Bane of our existence!

Forms! You can never imagine the frustration of trying to figure these things out! How many lines do we have to write on? When have we reached the end of the line? Is this a box to make a choice or a serial button? It can be truly maddenning to try and figure these things out! The first thing to do when you create a page with a form on it is to be sure that you offer an e-mail link as well. If it is a guestbook, people can offer you their comments even if they cannot access the form. If you are offering a survey or offering products for sale, consider the option of having the visitor request the item in the form of an attached file. You can send them the file and recieve the information via return e-mail. You might find your business increases dramatically with this option! You will reach every potential customer who visits your site! It is also possible, in addition to the e-mail link, to make the form somewhat accessible to the blind.

One way to aid the blind and visually impaired when it comes to forms is to place each text entry field on an individual line. Place a <BR> or <p> tag between the text entry fields. Also place a <br> or <p> tag between radio buttons and selection boxes. this will give us a fighting chance at filling those things out!

for example:

Name: ____________________
Address: _________________
City: ____________________
Submit
Reset

Is much easier to navigate than:
Name
____________________
Address
____________________
City
____________________
Submit Reset

For an example of speech friendly forms, you might check out
the speech friendly search engine page

If you are using some internet guestbook servers you may not have the option of formatting your forms to be accessible. In this case, make sure there is an e-mail link on your home page so that your visitors can contact you.

small dividing image

What about Real Audio and Sound Files?

Actually, Real Audio and other types of sound are very popular among the blind and visually impaired. The main problem encountered with accessing Real Audio links is that they are usually graphical in nature. These graphics are much like any other graphic, if they are alt tagged, we can access them! So please remember to use those alt tags religiously!

small dividing image

Forcing a New Browser Window

Although some designers enjoy the ability to force a enw browser window to display their page, please consider avoiding this trick. It can be really confusing to the blind and visually impaired. When one of these sites open we are left with no history list, which means we cannot use our back function to navigate to the previous page. Becasue a lot of blind people navigate with the use of the history list it is really frustrating to lose it and not understand what is happening. Although some web browsers enjoy tiling or cascading their windows blind people usually do not do this. It is difficult enough to read a windows application without having to deal with multiple windows. Please be considerate and avoid this trick at all costs.

small dividing image

What if I want my site totally graphic?

Well there is still another option, if you absolutely feel that your site is best viewed in a graphical version, but you would like to offer complete accessibility! Simply strip the graphics, add the appropriate tags, and line breaks, <UL>, or <OL> tags and offer it as a text-only, speech friendly version of your site! A simple link, at the top of your graphical site will link those of us with text browsers to your text-only link! It is basically a text index as described above except it will be in the "table of contents" structure mentioned earlier!

If you do not have access to a text only browser but would still like to see what your site would look like on lynx, you could try Bobby.

It is a little program that will convert your site to text so you can see what your site would appear like on a text only browser. if you see [LINK] or [ISMAP] you can be pretty much assured that the lynx browser, and the visually impaired would have difficulty navigating the site.

If you would like to take it one step further and see how your site would look in lynx, you may wish to check out the Windows 95 version of Lynx. Lynx for Windows 95 is available in the "files to download" section of Tom Baccanti's Outpost.

If you feel your site is speech friendly and would like to help spread the word on accessibility, consider joining the "Speech Friendly Web Ring!"

I hope these tips have helped you and that you will consider making your site accessible to everyone. If you have any questions or concerns or just can't figure out what I am talking about please feel free to write me and I will do my best to answer your question or find someone who can! Happy surfing and thanks for taking the time to develop a site that is attractive as well as accessible!

Cathy Anne Murtha

Web Design and Access Specialist
Magical Mist Creations

horizontal divider

This page was originally designed and put together by Cathy Anne Murtha. In the site map below you will find a link to the rest of her site which I recommend without hesitation. All I did with this page was to change the background and some of the graphics to match my site, the hard work and inspiration all came from her. With great grace she instantly gave her permission to use this page when I asked her, something that must always be done when using someone elses work, whether it be words or graphics.To visit the rest of her excellent site go here

large thistle

site map

Personal Home page | Contact info | Cool Sites
Diabetes Links | My Dwight Yoakam page | Iris Dement
Football links | Speech friendly sitebuilding | Carozand
Awards page | Inkabijou | HTML and Graphics links
Scottish links | Religious links

This page hosted by Get your own Free Home Page

This site maintained by logo.
This page Copyright © 1998 Cathy Anne Murtha