Skip to main content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Creating Accessible LibGuides

What is alt text?

Alternate text (or alt-text) for images and other graphics is incredibly important while creating/editing online content. To start, alt-text is vital for low-vision and blind internet users who browse websites using screen-readers. Screen-readers are a form of assistive technology that communicate what’s on-screen via text-to-speech, Braille, or some other form. If your graphics don’t have alt-text, the screen-readers can’t communicate the needed information to those users. In other words, because your images are presumably making a contribution to your content, low-vision and blind users are deprived of full access to the content if you fail to include alt-text or have unhelpful alt-text.

Additionally, alt-text is a significant part of search engine optimization (SEO). We know that most users don’t navigate our well-organized menus to find content. Instead, they’ll use a search engine to hop on that one page, and then move on to their next thing. Given that users very rarely search using images, adding alt-text allows search engines to recognize the content in your graphic. Particularly for graphic-heavy pages, failing to add alt-text will make your content far less likely to appear in searches.

Finally, alt-text is used whenever your graphics fail to load for any reason. Whether it’s a slow internet connection, an older device, or an unexpected server issue, a slow-loading page will display the alt-text even when the images themselves cannot be shown.

How do I write alt text?

While writing image descriptions might seem simple, there are some key parts to keep in mind:

 

Be specific: If your alt-text is fewer than five words, it’s probably insufficient. A good exercise is to write as if you were describing the graphic to someone with their eyes closed. So “a chicken” would be unhelpful, but “an adult rooster crowing in a barnyard” is something you can use to create a mental image.

Keep it brief. While you’re trying to be specific, overly-wordy descriptions can be just as frustrating as vague ones. Do your best to keep your descriptions under 150 characters unless it’s a particularly complex graphic.

Use keywords: When writing your alt-text, include words that you think users might use to search for your content. This in particular helps with SEO. If showing an image of a desk on your IT info site, try “three students standing at an information technology desk” rather than simply “three students standing at a desk”. This way, users searching for IT info will be more likely to find your page.

Never use ‘image of’ or ‘picture of’: It may feel natural to use these when describing a graphic, but avoid them: the fact that alt-text is being used already communicates that this is a graphic. Most screen-readers will read out an image as: "Graphic, This your included alt-text," so if you include this, it's redundant (i.e. "Graphic, image of your alt-text"). Beyond redundancy, this is a waste of space, which can be detrimental when you have so few characters to work with.

 

For examples of a variety of situations that may require alt-text, please visit our Writing Effective Alternative Text page.

Common Image-Related Errors

Description

This warning will always appear for images on your pages because you need to manually make sure that there is no text in images.

Images that contain text within them are not accessible. Examples of this could include an image that contains the text 'Red shoes on sale'. An alternative text will help screen reader users understand the concept, but other user groups do not benefit from alternative texts. Here's an example:

  This is real text in a color box.

An image of text being shown solely in an image

 

Dyslexic users who use different tools for reading aloud than visually impaired users will not be able to access either the text in the image or the alternative text with their kind of assistive technologies.

In addition, users with low vision who use magnification programs to enlarge elements on the page can experience that the image becomes pixelated and more difficult to read when enlarged.

 

How to fix it:

Images of text should be avoided except in special cases, such as in logos. Review the images to assess whether images of text are used and remove them if possible. If images of text can’t be avoided, the alt-text should contain the same text as the image.

 

How to fix it:

Right click on the image and go to "Image Properties". Type in appropriate text in the "Alternative text" field.

 

Image properties dialog box with focus on the Alternative Text input

Description

The image does not have an 'alt' attribute (alt="").

 

How to fix it:

It’s important all images have the attribute for alternative text regardless of whether an alternative text is added.

A screen reader knows how to handle both an empty alt attribute and one with a text. If there is no attribute some screen readers will compensate and read the path to the image instead, which will often give no value to the end user. For example, it would read out: "Graphic, /accounts/226049/images/Screenshot__105_.png."

The rich text editor should apply the 'alt' regardless of whether you insert alternative text or not, avoiding this problem. If your page is being flagged, it's either from an older version of editor that didn't do this or was accidentally removed in the source code. To fix this, simply open Image Properties, add some random alt-text, and save. Then open Image Properties again, erase the alt-text, and save. This should make it up-to-date.

 

 

 

 

GW Libraries • 2130 H Street NW • Washington DC 20052202.994.6558AskUs@gwu.edu