Alt text stands for alternative text. It’s usually three to five words used to describe an image or its link. In some browsers, when an image is missing or broken, alt text will display in place of the image. It’s also read by search engines and screen readers. Screen readers convert text-to-speech for people with low vision or cognitive disabilities. Since search engines and screen readers can’t look at an image and describe it, alt text provides a description for them.
All images must have an alt attribute. Alt text is the value of the alt attribute. Sometimes that value describes an image, sometimes it describes a link and sometimes it should be left blank.
How you write alt text depends on the purpose of the image. Some images add meaning or information to the content around them. Other images are linked and help you navigate to a new page. Then there’s decorative images, which have no purpose other than to look cool.
When writing alt text, first determine the purpose of the image:
CASE 1: Does the image add meaning or information to the page?
CASE 2: Is the image a clickable link with no text under it describing what it links to?
CASE 3: Is the image a clickable link with text under it describing what it links to?
CASE 4: Is the image decorative or in the background?
Next, write appropriate alt text based on the purpose of the image:
In CASE 1: Describe the image the way you would to someone who can’t see it. Be specific, but not too wordy and don’t include information that isn’t on the image.
In CASE 2: Don't describe the image in the alt text but instead, describe the content the image links to.
In CASE 3: Leave the alt text blank but include both the image and the descriptive text under it in the same link.
In CASE 4: Leave the alt text blank.
▶ View examples of each case
When writing alt text, there’s no need to include words like "graphic", "logo", "image of" or "a link to" since these will be obvious to the user. In addition, in CASE 1, if your image includes text, include it in the alt text along with a description of the image.
How to Add Alt Text on County Websites
When using the WYSYWYG editor to insert an image, enter alt text in the “Image Description” box that displays on the pop up window.
▶ Watch video "Add Alt Text in WYSIWYG Editor" (0:60)
When using the HTML editor, alt text is placed in the image tag and is the value of the alt attribute.
Example: <img src="cow.jpg" alt="cow in corn field" />
Alt text: cow in corn field
For more information on web accessibility and writing alt text, visit the WebAIM site.
###
Site Bytes is a regular column in Nebraska Extension – Keeping UP that provides quick tips for enhancing your county website. Written by Anne Holz, IANR Media web strategist.
