Accessibility > Implementing Section 508 >

Implementing Rule A

§ 1194.22 Web-based intranet and internet information and applications.

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

• What Are "Non-Text Elements"?
• Text Equivalents for Images
• Technical Implementation Methods

What Are "Non-Text Elements"?

In the broad sense, non-text elements are anything and everything that are not pure text.

Images a.k.a. Graphics

Graphics include logos, fancy text, photos, spacers, navigation arrows, artwork, bullets, animated graphics, etc. These are referenced in the HTML file through the <img> tag. Not all of these objects provide information to the user. For example, spacer elements of varying sizes and colors might be used to help align content on a page. These convey no information, and should not be given a text equivalent.

Go to Text Equivalents for Images

Multimedia Objects

Multimedia objects include:

• audio objects: recordings;
• video objects: presentations; and
• combination objects, which both make sound and display video.

These are included in the page through the <object> tag.

Multimedia objects require alternate text. See Implementing Rule B for more information on making multimedia objects accessible.

Programs

Programs include applets, scripts - objects which do things, sometimes in the background (and may not require alternate text), and sometimes in the foreground, requiring user interaction (and requiring alternate text).

Note that the <applet> tag has been deprecated by the W3C; for Java applications, the <object> tag should be used.

ASCII Art

ASCII art consists of the usage of text letters, numbers, and/or symbols, arranged in a fixed format, to create a picture of something. The example below spells out the word "access" using the <pre> tags to format the picture with a fixed-spaced font.

Skip ASCII art, letters spell "access"

    A      CCC    CCC   EEEEE    SSSS     SSSS
   A A    C      C      E       S        S
  A A A   C      C      EEE      SSSS     SSSS
  A   A   C      C      E            S        S
  A   A    CCC    CCC   EEEEE    SSSS     SSSS

When this is read aloud in sequence, it produces meaningless information: "A", "CCC", "CCC", "EEEEE", "SSSS", "SSSS", "A", "A", "C", and so on.

ASCII art is cute, and can be a fun way to arrange something. If the information is arranged to form a shape, but the individual components are readable, then no alternate text is required. The browser will merely read the words in order. If the art spells something, then a text equivalent is needed.

    This is 
 an itsy-bitsy 
example of ASCII
Art in the shape 
 of a roundish
    thing... 

In the above example, an alternate text equivalent is not required.

Text Equivalents for Images

Before determining what a text equivalent is, first ask the question: What information is supposed to be conveyed through the inclusion of this image? Even better, ask: Must the object be used?

When Is alt Information Sufficient?

When does the text included with the alt attribute of an <img> tag suffice? And, when is additional information needed by another method? The answer to that depends on the type of object and the information it contains. This is determined by humans; currently, evaluation tools can only identify that something requires alt text, but cannot identify whether something requires a more expanded description of the object.

Every Non-Text Element?

The guideline calls for giving every non-text element a text equivalent. However, this is not practical if interpreted literally. Web designers often use filler elements to help lay out a page. These things do nothing but add a block of color or shift text presentation in one direction. Should these elements have a text equivalent?

The answer should be no. The usage of the alt attribute would still be required; however, the value of the text equivalent should be the null string. Whether this is allowed from a legal perspective is different issue.

The alternate text equivalents for different types of images follows.

Spacers

Spacers have no text equivalent. However, the alt attribute is required by the HTML standard, as well as to indicate to assistive technology that, yes, indeed, the spacer has been given alternate text. The value of the text equivalent is the null element. Code for null alternate text.

Artwork

Artwork that has meaning needs to be described with alternate text. Artwork which is just there for filler does not need alternate text.

Bullets

Bullets are decorative way of marking the beginning of an item in a list of items. These should not be used to convey information - they should only be used for decorative effect. Images used as bullets should be pulled from the style sheet. If the image is a picture of something - that is, if it has meaning - then the image should not be used as a bullet in a list, but should be used in a paragraph with explanatory text. If images pulled from the style sheet are colored or shaped to mean something, then equivalent text needs to be created. For example, if black round bullets mean normal stuff, and red square bullets mean special stuff, then text equivalents need to be created to distinguish between them.

If the associated style sheet is turned off, all bullet meaning will be lost, even to the user not using assistive technology.

Navigation Arrows

These are the basic means of navigating with arrows:

• top: top of page, top of section;
• bottom: bottom of page, bottom of section;
• next: next page, next section;
• previous: previous page, previous section;
• first: first page, first section;
• last: last page, last section.

Discussing how to implement the above from a design perspective is beyond the scope of this document.

When a graphical navigation element is used, it needs alternate text. For example, if a link associated with a right arrow glyph directs the user to the next page, then the text equivalent is "next page", and this is included in the alt attribute of the <img> tag.

On a final note, the text "next page" does not provide information as to what is on the next page. Using a more descriptive link text or alternative text would be helpful, even though it is not required.

Logos

Logos and ligatures are short-hand methods of identifying something. The text equivalent is the identification of the object. If the logo image has the full entity name embedded in it, the alt text for the logo image should include the full name. If the initials, or acronym for the entity is in the logo, then just the initials or acronym should be included in the alt text; if this is done, then somewhere nearby the full entity name should be included.

Photos

Photos usually need alternate text, and usually, a long description (either in a linked file, or elsewhere on the page) also. By "photo", I mean a picture of something in particular, such as "three women sitting at a table and talking". If a photo is used as a background texture, but is not a picture of something, it can be treated as spacer junk and not have alternate text.

Cartoons

Cartoons need alternate text, to describe what is happening, including the speech in the balloons.

Images of Charts

These are graphical representations of data with no associated underlying table included. A further discussion is included in Spatial Representation of Information. Charts and graphs need to be clearly formatted so the data is understandable, such as in a properly marked data table, or, in a descriptive narrative.

Buttons

The text, or alt text, included with a button should clearly indicate what the button is used for.

Technical Implementation Methods

1. For images (<img> tag), applets (<applet> tag, which has been deprecated in HTML 4.01 Strict; use <object> now), and objects (<object> tag), include the alt attribute. This is mandatory for HTML 4.01 Strict validation of <img> and <object> tags.

Code: <img src="imgfile.jpg" alt="image of something">

2. If the item is complex, use the longdesc attribute to link to a file with more information. Pros: link won't clutter up the page. Cons: the content manager or developer will need to remember to maintain it; this link is not visible on the page.

Code: <img src="thefile" alt="image of something" longdesc="thelongdescfile.htm">

Opinion: the use of longdesc causes the link to be hidden from visual browsers. It is possible that the narrative description might actually be useful for visual readers. So, why keep it hidden? Plus, it's easy to forget about maintaining it if one doesn't see it.

3. If the item is complex, a D-link can be put near it. A D-link is the text "[D]", with the "D" programmed to be a link. Cons: not all people know what a D-link is, and may be confused by the sight of the "[D]". A more usable way of presenting the D-link may be to put "[D] Narrative Description of Whatever" next to the non-text element.

Code: <a href="#here">[D] Narrative Description of Whatever</a>

The D-link can be displayed or hidden with styles.

Note: the D-link is conventionally implemented by putting the link on the letter "D". Presumably, a title is included with the link, because the "D" alone would be meaningless in a set of links. Imagine if there were multiple D-links on the same page!

Code: <a href="#here" title="narrative description of whatever">D</a>

4. If the item is complex, instead of worrying about D-links, just put a regular link next to the item. This solves the problem mentioned in item #2 above.

Code: <a href="#here"> Narrative Description of Whatever</a>

5. If the item is complex, put narrative text on the same page. For example, one can put a diagram of a floor plan on one side of the page, and on the other side of the page, provide text narrative to walk the reader through the plan. Pros: the developer would need to focus on what the element was all about, and possibly, in attempting to describe the element, come up with a better design or usage of it. Or, eliminate it. Cons: more clutter on the page. Good page design would help.

6. If the item conveys no information, for example, is just spacing junk, then the item should just have an alt attribute with a null value.

Code: <img src="thespacer.gif" alt="">

7. When ASCII art that spells something is included, insert a skipover before it, with text such as: "ASCII art follows; letters spell the word (insert your word or phrase here)". The anchor for the skipover destination would be the next accessible area after the ASCII art.

Code: <a href="#skiptolocation">skip ascii art<a>

The skipover link could be visible or hidden.

 

Implementing Rule B >

Skip links to other Section 508 Rules and return to main content