Texas Tech University.

Designing Accessible Web Pages - An Overview

You don't have to be a computer expert to check the accessibility of a web site. You may need the assistance of your web master to make necessary changes, but finding where changes should be made is the first important step.

Alternative Text

Hover your mouse over the pictures below to see the "alt text".

Bad:

picture

Good:

Students showing their spirit at a football game with their chests painted T T U.

Hover your mouse over any pictures on your site. Depending on your browser, a text box will pop up showing the "alternative text" or "alt text" for the picture. If you do not see the text box, turn off images in your browser. The text will appear where the pictures were.

Ideally, this text will convey important information about the picture. If it says something like "pic00123.jpg" or "Picture 1", more informative alternative text needs to be provided.

Consider the purpose of the picture. What information are you trying to convey? How can you present the same information in a few words?

If the important information cannot be conveyed in a few words, another way of presenting this detailed information may be needed. For example, it may be discussed in the text on the page, or you can link to a secondary page which contains more information.

Also, look for words that are actually images, such as a graphic of the word "Home". Alternative text for these word images should match the word (i.e. "Home" not "Picture of the word Home").

Note: For modern browsers, it is also important to utilize the "title" attribute in order to show the text box when the mouse is over an image.

More Information on Working with Images »

Multimedia Presentations

If you have multimedia on your site, consider how a person who cannot hear the audio or see the video will access the information. If you only have audio, providing a transcript is probably sufficient.

However, if you have a video, captions must be added that are synchronized with the video.

There are a number of different software programs that can be used to do this as well as services that will caption for you. Similarly, if information is conveyed visually, you may need to add a second auditory track with audio descriptions for the blind.

Use of Color

Bad:

An example of poor color use, using only color to convey meaning.

Good:

An example of good color use, using color and symbols to convey meaning.

Consider whether information is conveyed only through color.

For example, does a form require that all fields marked in red be completed? Does the user have to press the green button to start an exercise?

You don't have to avoid the use of color in these ways, but you do need to provide an alternative way to get the information.

For example, also mark the red fields with an asterisk or have the word "START" on the green button.

More Information on Working with Color and Contrast »

Color Contrast

An example of low contrast and high contrast.

It's important that the text on your sight contrasts clearly with the background so it is easy to read.

It's best to avoid patterned backgrounds.

Realize that contrast that seems easy to read for someone with normal vision might not be so easy for someone with vision problems

A quick and dirty test for contrast is to print the page in black and white, and make several generations of copies to see if the text becomes difficult to read after a few generations.

Data Tables

Bad:

IT Help Central 806-742-HELP (4357) ithelpcentral@ttu.edu
IT Team Web 806-472-1180 itteamweb@ttu.edu
Technology Support 806-742-1650 itteamweb@ttu.edu

Good:

Contact Information
  Name Phone# Email

1.

IT Help Central 806-742-HELP (4357) ithelpcentral@ttu.edu

2.

IT Team Web 806-472-1180 itteamweb@ttu.edu

3.

Technology Support 806-742-1650 itteamweb@ttu.edu

Tables should be used to show information that makes sense to put in a chart, not just used for formatting.

Include headings to indicate the contents of each column or row.

For example, instead of just a chart of names, addresses and phone numbers, have a header row that says "Name", "Address" and "Phone". To someone who can see the chart, it's obvious, but adding the headers makes it easier for a blind person to navigate the chart.

To really make tables and charts work well for blind individuals, additional "behind the scenes" coding is required by your web master, but you can tell whether headers would be helpful.

More Information on Working with Tables »

Forms

Like tables and charts, there are some things that only your web master can do to make forms truly accessible, but you can check some features.

For example:

Drop Down Menus

When using drop down menus, require the user to press a "Go" or "Submit" button after highlighting their choice. Drop down menus that automatically send users to the highlighted location when they release the mouse button cause problems for visitors using screen readers, always sending them to the first option.

Appropriate Links

In the early days of the Internet, almost every link said "click here". But when someone using assistive technology pulls up a list of all the links on a page, it's confusing (all they see is a list of links that say "click here"!).

The link text should be descriptive of where it leads, such as "Home", "Apply for admission" or "Contact us".

More Information on Working with Links »

Navigation

Start at the top of the page and press the TAB key to move through the document. The cursor should move from section to section in a logical manner.

If there are navigation links at the top of each page, there should be a way to quickly and easily skip over them, so a person using a screen reader doesn't have to listen to them again and again.

PDF Files

Many PDFs are not actually text, but an image of text, similar to taking a picture of a document. Unfortunately, these PDFs are inaccessible because screen readers and other assistive technology cannot interpret them.

To see whether your PDF is text or an image of text, try to highlight some words in the document. If you can, then your file may be accessible. If you can't, then you have an image and it is not accessible.

Making Word and PDFs Accessible »

PowerPoint Presentations

Power Point presentations present problems for some screen readers. To help ensure accessibility of your information to all students, create Word file of the same information for screen reader users.

To do this easily, view your presentation in outline view, copy and paste the text into a Word document, and format within Word. Compare your text to the original to make sure there aren't any graphics that need to be explained, as this method only copies the text.

Making Powerpoint Presentations Accessible »

Mouse Dependency

Test to see whether you can navigate the site and do everything needed without using the mouse. If there are "mouse over" links, those same links should be duplicated elsewhere on the page.