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.
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.
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):
<img src="handsign_f.gif" ... alt="Handsign gesture for the letter F" />
How to Add Alternate Text to an Image
In Text editor, place cursor where you will be inserting image.
In the Texteditor toolbar, select the insert picture button
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.
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.”
<a href="#content"><img src="top_page.gif" alt= "Top of Page" border= "0" /></a>
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= "" />