Note some Images on the page will be missing alternative text, this is for demonstration purposes and the text below clearly defines the problem and what the alternative text would be if the item was correct.

This guide is derived from the book Understanding Accessibility, Published by HiSoftware Publishing... The Entire book can be viewed online in accessible HTML Help format.

A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

• All IMG elements are required to contain either the 'alt' or the 'longdesc' attribute.
• All INPUT elements are required to contain the 'alt' attribute or use a LABEL.
• All OBJECT elements are required to contain element content.
• All APPLET elements are required to contain both element content and the alt attribute.
• All IFRAME elements are required to contain element content.
• All Anchor elements found within MAP elements are required to contain the 'alt' attribute.
• All AREA elements are required to contain the 'alt' attribute.  

The Examples

1. Simple image requiring alt text
2. Same Image also servers as navigation link
3. An image requiring a long description
4. Object MS Office Spread Sheet
5. Applet
6. Input Elements
7. Inline Frame
8. Image Maps
9. Image as bullet

1.  Simple Image Requiring Alternative Text

The first Image represents “conserve”. The images purpose is simply to add the meaning of conserve. The rule states all IMG elements are required to contain either the 'alt' or the 'longdesc' attribute.

This image requires alternative text.

Current HTML – EXAMPLE 1

In the current HTML the alt attribute is missing.

<img src="images/image009.gif" border="0" width="165" height="122">

Corrected HTML – EXAMPLE 1

In the corrected HTML the alt attribute is used.

<IMG border="0" src="images/image009.gif" border="0" width="165" height="122" alt=”Conserve Icon”>

top

2. Same image: also serves as a navigation link

This example demonstrates an image with a navigation purpose. The purpose is to provide a navigation link to the HiSoftware home page. The rule states all IMG elements are required to contain either the 'alt' or the 'longdesc' attribute.

Current HTML – EXAMPLE 2

In the current HTML the alt attribute is missing.

<IMG border="0" src="images/image009.gif" width="165" height="122">

Corrected HTML – EXAMPLE 2

In the corrected HTML the alt attribute is used and the alt text also shows the purpose of the image.

<a href="http://www.hisoftware.com/">

<IMG border="0" src="images/image009.gif"

alt="Conservation Symbol and link to HiSoftware Home Page" width="165" height="122"></a>

Note: To create effective alternative text for your non-text elements makes sure you:

• Follow the guide on this site for developing alternative text
• Use a spell checker

top

3. An image requiring a long description

This example demonstrates the use of “longdesc.” It would be difficult to describe this image with alternative text only. In this case a long description should be used. The rule states that all IMG elements are required to contain either the 'alt' or the 'longdesc' attribute.

Current HTML – EXAMPLE 3

In the current HTML the alt attribute is missing and there is no longdesc attribute.

<Img border="0" src="images/image010.gif" width="192" height="192"></font></p>

Corrected HTML – EXAMPLE 3

In the corrected HTML the alt attribute and longdesc attribute are used. In addition to this a d-Link was used.

<Img border="0" src="images/image010.gif" alt="Space Related Objects - See Long Description" width="192" height="192" longdesc="AboutSpace.html">

<A  href="AboutSpace.html">[D]</A>

top

4. Object MS Office Spreadsheet

Example four demonstrates the proper accessibility coding for an ActiveX object. The object is of a Microsoft Office Web component. The rule states All OBJECT elements are required to contain element content.

Current HTML – EXAMPLE 4

The element content is missing from the current HTML.

<object classid="clsid:0002E551-0000-0000-C000-000000000046" id="Spreadsheet1" width="319" height="249">

<param name="DataType" value="XMLDATA">

</object>

Corrected HTML – EXAMPLE 4

In the corrected HTML the element content is present.

<object classid="clsid:0002E551-0000-0000-C000-000000000046" id="Spreadsheet1" width="319" height="249">

<param name="DataType" value="XMLDATA">

Your browser does not support this object.

This is an object and it represents data that is also available at http://www.hisoftware.com/uaccess/demo1.htm

</object>

top

5. Applet

Example five demonstrates the proper accessibility coding for a Java applet. The rule states that all APPLET elements are required to contain both element content and the alt attribute.

Current HTML – EXAMPLE 5

In the current HTML the element content and alt attribute are missing.

<applet width="128" height="128"

code=""

codebase="http://Example.js.class/">

</applet>

Corrected HTML – EXAMPLE 5

In the corrected HTML the element content and the alt attribute are present.

<applet width="128" height="128"

code=""  alt=”My Applet Description”

codebase="http://Example.js.class/">

This is a navigation applet. Alternative navigation can be found at: http://www.hisoftware.com/uaccess/navigate.html

</applet>

top

6. Input Elements (also 508 (n))

Example six demonstrates the proper accessibility coding for a standard HTML form. The rule states that all INPUT elements are required to contain the 'alt' attribute or use a LABEL.

Current HTML – EXAMPLE 6

In the current HTML the alternative text for the input element is not present.

 <Form method="POST" action="-WEBBOT-">

<Input type="text" name="T1" size="20">

</form>

Corrected HTML – EXAMPLE 6

<Form method="POST" action="-WEBBOT-">

<Label for="T1"> User Name: </label>

<Input type="text" name="T1" size="20" alt=”First Name”> </form>

top

7. Inline Frame (IFRAME)

Example seven demonstrates the proper accessibility coding for Inline frames. Inline frames prove an excellent TABLE or FRAME alternative. The rule states that all IFRAME elements are required to contain element content.

Current HTML – EXAMPLE 7

In the current HTML the element content for the IFRAME element is not present.

<Iframe name="I1" SRC="sample.htm">

</iframe>

Corrected HTML– EXAMPLE 7

In the corrected HTML the element content is present.

<Iframe name="I1" SRC="sample.htm">

Your browser does not support inline frames or is currently configured not to display inline frames. Content can be viewed at actual source page: http://www.hisoftware.com/sample.htm

</iframe>

top

8. Image Map Example (Section 508 (f))

Example eight demonstrates the proper accessibility coding for an Image Map. The rule states that all AREA elements are required to contain the 'alt' attribute.  

Current HTML – EXAMPLE 8

In the current HTML the alternative text for the area elements and alternative text for the image are not present.

<map name="FPMap0">

<area href="#Go Here for Links!!!" shape="rect" coords="13, 5, 172, 75">

<area href="#Go Here for Links!!!" shape="rect" coords="8, 92, 119, 187">

<area href="#Go Here for Links!!!" shape="rect" coords="125, 91, 191, 180">

</map>

<img border="0" src="../../images/j0301076.gif" usemap="#FPMap0" width="192" height="192">

Corrected HTML – EXAMPLE 8

In the corrected HTML the alternative text for the area elements and alternative text for the image are present.

<map name="FPMap0">

<area href="#Go Here for Links!!!" shape="rect" coords="13, 5, 172, 75" alt=”My Alternative Text”>

<area href="#Go Here for Links!!!" shape="rect" coords="8, 92, 119, 187" alt=”My Alternative Text”

<area href="#Go Here for Links!!!" shape="rect" coords="125, 91, 191, 180" alt=”My Alternative Text”>

</map>

<img border="0" src="../../images/j0301076.gif" usemap="#FPMap0" width="192" height="192" alt=”Space Image”>

top

9. Images As Bullets Example

Example nine demonstrates the proper accessibility coding for a bullet list, where the bullets are actually images. The rule states All IMG elements are required to contain either the 'alt' or the 'longdesc' attribute.

Current HTML – EXAMPLE 9

In the current HTML there are five products listed, these products have an image before the product name to create a fashionable bulleted list.

<p>HiSoftware Accessibility Products</p>

<p><img border="0" src="BD10263_.GIF">

Understanding Accessibility Book</p>

<p><img border="0" src="BD10263_.GIF">

AccVerify</p>

<p><img border="0" src="BD10263_.GIF">

AccRepair</p>

<p><img border="0" src="BD10263_.GIF">

AccMonitor</p>

<p><img border="0" src="BD10263_.GIF">

AccessibilityWATCH</p>

Corrected HTML – EXAMPLE 9

The guidelines state that the purpose of the image is very important, the purpose in this case has nothing to do with the visual representation, and it is merely a bullet. This is definitely an exception to previously stated rules. The exception is: describing the image in the alternative text would not be effective instead we will describe the purpose.

HiSoftware Accessibility Products

<p><img border="0" src="BD10263_.GIF" alt=”*”>

Understanding Accessibility Book</p>

 

<p><img border="0" src="BD10263_.GIF" alt=”*”>

AccVerify</p>

 

<p><img border="0" src="BD10263_.GIF" alt=”*”>

AccRepair</p>

 

<p><img border="0" src="BD10263_.GIF" alt=”*”>

AccMonitor</p>

 

<p><img border="0" src="BD10263_.GIF" alt=”*”>

AccessibilityWATCH</p>

In this case the asterisks clearly describe the value and purpose of the images as bullets. 

top
 

Printer Friendly Version...