May 4th Overview | May 4th Text Chat | Accessibility 1998 Overview
The World Wide Web provides an opportunity to deliver messages not just in text format, but also in images, animation and sound. More and more web sites are using multimedia to attract and engage visitors. More often than not, these pages are designed for sighted users. This alienates users who have visual impairments, especially those who are blind.
The Hypertext Markup Language (HTML) specification used in web pages accommodates text description for images. These tags or titles (known as "ALT" tags), are visible when a browser is set to "text-only" or "do not display graphics". Using adaptive technologies such as screen readers, persons with disabilities can "read" the ALT-tags and understand the use and purpose of an image. Applying descriptions to images is the most effective way of improving accessibility to complex web pages.
In this exercise, you will learn about how to include images in a web page, and how to apply text descriptors to your images.
By themselves, text-only web pages are fully accessible. Adding images to a web page can improve its appearance, but can make it inaccessible.
Here's the HTML code for a web page that uses an image, but does not provide a description. (Note: for participants with screen readers, the "less than" and "greater than" signs may be difficult to decipher. It might be better to view the resulting page called POOR.HTM and use your browser's feature to view the source code.)
| <html> <head> <body> <h1>My Accessibility Project</h1> <img src="access99.gif"><p> The above graphic does not have an ALT descriptor.<p> by Leo Valdes - 4 May 1999, POOR.HTM<p> |
As seen above, the HTML code IMG SRC= provides the name of an image file which will be included in the web page at the current position (in this case, under the heading "My Accessibility Project"). The file ACCESS99.GIF is assumed to be in the same folder as the web page itself. If it is in another folder, the location should be included inside the quotation marks, (e.g., "/images/access99.gif")
Note that there is nothing to describe the image. Reading the code alone, we are not sure what the picture is supposed to be.
The resulting page for the code in Figure 1 is POOR.HTM.
Adding an ALT-tag behind the IMG SRC= statement will give it a description to the image. Here is the same code with the minor change to the IMG statement. (Screen reader participants may want to view the page immediately: GOOD.HTM)
| <html> <head> <body> <h1>My Accessibility Project</h1> <img src="access99.gif" alt="Accessibility 1999 Project banner"><p> The above graphic has an ALT descriptor.<p> by Leo Valdes - 4 May 1999, GOOD.HTM<p> |
That is all there is to improving accessibility to web pages with images.
The resulting page for the code in Figure 2 is GOOD.HTM.
Despite our best efforts, we may not catch all the accessibility problems in our web pages just by looking at the code. It is for this reason that some web sites have created "Accessibility Validators"; online programs that analyze and report on the accessibility issues in your web pages.
One of the most practical validators is Bobby, created by the Center for Applied Special Technology or CAST. It is located at http://www.cast.org/bobby. At the Bobby page, simply type in the URL (or web address) of the web page you would like to validate. If the page is completely accessible, you can use the Bobby Approved! banner.
These exercises give us an idea of how images can be made "readable". There are many other techniques for providing text description, including titles for tables, and "D-links" for longer text. Also, there are other aspects of web pages that need to be explored, such as video clips, audio clips, etc.