32 Creating Alt Text for Functional Images

Functional images are images that are linked or initiate an action, such as submission of a form or a search query. If the image isn’t beside text that conveys the same function, then it will need alt text.

Below are some examples of functional image situations.

A Logo and Seal Image

In general, it’s best not to use text inside images for buttons, or links. If you can create these buttons or links with HTML and CSS, they should be created this way. Logos are exceptions. In the case of a logo, the alt text should convey what the image conveys. For example, if it is Cleveland State University’s logo or seal, you can simply use alt=”Cleveland State University” rather than describing it. You wouldn’t want to write alt=”Cleveland State University logo and seal“. The code for the image above is:

<img src=”https://bb–csuohio.blackboard.com/courses/1/Inclusive_Online_Design_1/content/_2033036_1/embedded/CSU-Logo-NoTag-Split-2015.png” alt=”Cleveland State University” style=”margin: 5px; border: 1px solid black;” width=”260″ height=”54″ />

Logo Image that Links to a Home Page

If the Cleveland State University logo is linked and leads to the CSU home page, you can use the destination of the action the image performs, alt=”Cleveland State University Home Page”.

The code for this situation would look like the following:

<a href=”http://www.csuohio.edu” title=”This link takes you to Cleveland State University’s Home Page” target=”_blank”><img src=”https://bb-csuohio.blackboard.com/bbcswebdav/pid-2171116-dt-content-rid-11787785_1/xid-11787785_1″ alt=”Cleveland State University Home Page” title=”This link takes you to CSU’s home page” style=”margin: 5px; border: 1px solid black;” height=”54″ width=”260″ /></a>

If a College or School logo is used with the CSU seal, as in the following example, you can use the destination of the action the image performs, alt=”Cleveland State University School of Nursing Home Page”.

The code for the example above looks like the following:

<a href=”http://www.csuohio.edu/nursing/home” target=”_blank”><img src=”https://bb-csuohio.blackboard.com/bbcswebdav/pid-2171116-dt-content-rid-11787936_1/xid-11787936_1″ alt=”Cleveland State University School of Nursing Home Page” style=”margin: 5px; border: 1px solid black;” height=”84″ width=”240″ /></a>

Icons to Inform File Type

Sometimes, you’ll use icons to represent what a linked file type for download is. These icons may be for Word, PowerPoint or PDF formats, for example. The example below represents this.

Nursing Graduate Student Handbook 

The code for this example looks like the following:

<a href=”http://www.csuohio.edu/nursing/sites/csuohio.edu.nursing/files/media/graduate_programs/documents/GNR%20Student%20Handbook.pdf” target=”_blank”>Nursing Graduate Student Handbook <img src=”https://bb–csuohio.blackboard.com/bbcswebdav/pid-2033036-dt-content-rid-11256471_1/xid-11256471_1″ alt=”PDF” style=”margin: 1px;” width=”50″ height=”50″ /></a>

Notice that the alt text, “PDF” doesn’t repeat text that is used for the link, which is good practice.

Icons that Represent an Action

Icons that represent an action could be a magnifying glass to submit a search, a printer icon to print a page, a phone icon to call a phone number, a twitter icon to send a tweet, a submit image to submit a form. In these cases, for alt text, we would not describe what the icon looks like, but what it will do. Therefor, we would not write alt=”magnifying glass” for the magnifying glass icon that submits a search term, but we would write alt=”search”.

In the example below, the phone icon launches a phone application to call someone, the email icon launches an email application to email someone, and the twitter icon opens twitter to send a tweet to someone. In each case, the icon is linked but the text beside is not. If the text beside it were descriptive links, we could use alt=”” for the images if they were included inside the html link. To give them the same alt attribute as the descriptive link, would be redundant.

Contact Information:

 1 (216) 687-3960

elearning@csuohio.edu

@eLearningCSU

The code for these looks like the following:

<p>Contact Information:</p>

<p><a href=”tel:+12166873960″ title=”This link telephones 12166873960″><img src=”https://bb-csuohio.blackboard.com/bbcswebdav/pid-2171116-dt-content-rid-11788045_1/xid-11788045_1″ alt=”Phone elearning” style=”margin: 2px 5px;” width=”40″ height=”40″ /></a>1 (216) 687-3960</p>

<p><a href=”mailto:elearning@csuohio.edu” title=”This link opens an email to the CSU Center for eLearning” target=”_blank”><img src=”https://bb-csuohio.blackboard.com/bbcswebdav/pid-2171116-dt-content-rid-11787791_1/xid-11787791_1″ alt=”email elearning” style=”margin: 2px 5px;” width=”40″ height=”40″ /></a>elearning@csuohio.edu</p>

<p><a href=”https://twitter.com/intent/tweet?screen_name=eLearningCSU” data-show-count=”false”><img src=”https://bb-csuohio.blackboard.com/bbcswebdav/pid-2171116-dt-content-rid-11788137_1/xid-11788137_1″ alt=”Send Tweet to @eLearningCSU” title=”This link opens a tweet in twitter” style=”margin: 2px 5px;” height=”32″ width=”40″ /></a> @eLearningCSU</p>

<script async=”” src=”//platform.twitter.com/widgets.js” charset=”utf-8″ type=”text/javascript”>/*<![CDATA[*/
/*]]>*/</script>

The code inside the <script> element is a JavaScript widget to open Twitter.