SFGovAccessibility
Seal of the City and County of San Francisco
City and County of San Francisco

To view graphic version of this page, refresh this page (F5)

Skip to page body

Accessible Content - Alternate Text

Text:Text Only
Text Size: Increase Font Size Decrease Font Size

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 signing

<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 graphic

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 graphic

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

star

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

Last updated: 6/12/2014 4:12:37 PM