Accessible Content - Alternate Text

SFGOV (a) 1.1 - All IMG elements are required to contain either the ALT or LONGDESC attribute.

All meaningful non-text elements are required to contain a text equivalent, for example, by providing an ALT attribute, or in element content. Non-text elements include, but are not limited to, images, image map regions, applets and programmatic objects, frames, scripts, stand-alone audio files, audio tracks of video, and video.

Description

All images used in Web pages should use the alternate text attribute of the image tag (and other tags for respective objects) to provide a text equivalent in case the image can’t be displayed. The Alt-Text used should be a concise replacement for the image and should convey the purpose and meaning in a way that makes sense to the user.

Images

All images must have appropriate alternate text that effectively describes the image in a way that makes sense to the user. Alternate text should be brief, no more than a few words (150 characters):

Hand sign gesture for the letter F

<img src="handsign_f.gif" ... alt="Handsign gesture for the letter F" />

How to Add Alternate Text to an Image

  1. In Text editor, place cursor where you will be inserting image.

  2. In the Texteditor toolbar, select the insert picture button

  3. The ‘Picture Properties’ box appears. 1) Select desired image from the ‘Select New File’ button. 2) Enter alternate text in the ‘Title’ text field. 3) Select OK.

Images Using Text & Images with Links

For images that contain words or letters - use alternate text that includes the same words or letters contained in the image.

Important information

For images that are also links  - use alternate text that identifies the link's destination or function. You do not need to include the words "link to.”

 

Top of page

<a href="#content"><img src="top_page.gif" alt= "Top of Page" border= "0" /></a>

Decorative Images

For images that are invisible, purely decorative, or otherwise do not convey meaning - do not add a text description in the Title field, leave this field empty . This will indicate that the image can be safely ignored by a screen reader.

 

 

<img src="star.gif" ... alt= "" />


Return to 'How Do I Design for Accessibility Page?' page