Skip to Local Navigation
Skip to Content
California State University, Long Beach
Disabled Student Services
Print this pageAdd this page to your favoritesSelect a small fontSelect a medium fontSelect a large font
 

Alternative Text Descriptions (Alt Text)

What is Alt Text?

Alternative Text (alt=“ ”) is a short description or label that identifies an image, Java applet, flash file, video file, audio file, links, or plug-in. Alt text pops up on the screen as the mouse pointer rolls over the alt text area it is currently over. The alt text label displays to a screen reader the description of what is currently selected.

Why is Alt Text Important?

Alternative text is very important. It is a way to identify your images, links, etc., which have no text associated them. People using screen reader programs, such as JAWS, to browse the web cannot hear or read what the image represents unless a short label using the alt text code to describe it is included. Screen readers interface with and reads of HTML code and alt text that is added to an image, link, etc.

How do I insert Alt Text?

The following example is the HTML code without alt text.
*Notice how the <alt=""> is blank. No information is provided as an interface with a screen reader.

<img src="Graphics/dsslogo.jpg" alt="" width="198" height="234">

In the example below, the DSS logo image is labeled using the alt text code:

<img src="Graphics/dsslogo.jpg" alt="Disabled Student Services Icon" width="198" height="234">

Below is an example of an image that is not accessible to a screen reader:

This image has no alternative text. When you roll the mouse over the image, no label will be displayed to describe the image or alert the user about information the user may need to know to navigate the site.


Below is an example of an image that is accessible to a screen reader:

When you roll the mouse over this image you can see the display label of what the image is or means to the end user who uses a screen reader to access you web pages.

Disabled Student Services logo

*For an expanded explanation on this procedure, click here.


< Back to web accessibility table of contents Next page >