Accessibility on the Internet

Return to Accessibility on the Internet Page

Presentations

Exercises

Creating Accessible Web Pages, Part 1 (Using Images)

Assignment for Part 1

Creating Accessible Web Pages, Part 2 (Using Tables)

Assignment for Part 2

Creating Accessible Web Pages,
Part 1

Introduction

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.

Adding an image to a web page

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

Table 1: Including an image in a web page.

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.

Exercise:

• View the resulting page POOR.HTM
• Turn off View Images in your browser and observe the placeholder where the image should be.  Is there anything in its place?
• Turn on View Images in your browser and return to this page.

The resulting page for the code in Figure 1 is POOR.HTM.

Adding descriptions to images

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)

Figure 2: ALT Descriptor to an image

That is all there is to improving accessibility to web pages with images.

Exercise:

• View the resulting page GOOD.HTM
• Turn off View Images in your browser and observe the placeholder where the image should be.  Is there any text in its place?
• Turn on View Images in your browser and return to this page.

The resulting page for the code in Figure 2 is GOOD.HTM.

Running an Accessibility validator on a web page

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.  The Bobby validator is also available as a standalone application that you can download for free.

Exercise:

• View the Bobby 3.1 validator page at http://www.cast.org/bobby.
• In the box called URL, type in the address: http://www.visionoffice.com/iaccess/poor.htm and click on the Submit button.  What does the validator report about the page? Are there accessibility errors and recommendations?  Note: this page may be located in a different workshop server.
• Return to the Bobby validator page. At the URL box, type in: http://www.visionoffice.com/iaccess/good.htm and click on the Submit button.  What does the validator report? What other recommendations are provided? How long will the page take to download for a person with a 28,800 baud modem? Note: this page may be located in a different workshop server.

Discussion Points

Think about the following web technologies and make an educated guess as to which are accessbile or not; and if it is not accessible, which group of people will have difficulty with the technology.

• Movie clips
• MIDI (music) files
• Adobe Acrobat Reader file (PDF file)
• Active Server Pages text
• Tables
• Javascript or Visual Basic scripts
• Java applications
• Hover buttons (pictures that change when you point to them)
• Forms using drop-down menus, check boxes, and submit buttons.
• A text link that says "Click here".

Copyright (c) 2000-2001 VisionOffice.
Last updated 07/11/99.