Skip to Main Content

Accessibility Best Practices

Alt Text

Alt Text

“Providing a text alternative that describes media such as images or audio narration is important for people with compromised vision. The primary way to make our media accessible is by creating ALT tags for images and text transcripts for audio.” [1]

Alternative Text (or Alt Text) is text information that is added to non-text elements such as images, icons, and buttons. Alt text allows interpretation for people with comprised vision, but it also allows interpretation for individuals who turn off images on a browser (in instances such as low bandwidth or poor connections) and programs such as web browsers.

To add alt text to an image, use an alt tag followed by the alternative text in your HTML.

<img src="https://..." alt="Alternative Text here.">

Tip:

When inserting an image in LibGuides, the program provides a text box for you to enter Alternative Text. So, you don't have to worry about the code!
In Canvas, when you are embedding an image, you will also be given a text box to provide Alternative Text. In this program, the line is labeled Alt Text.

Images should include equivalent alternative text, meaning that users who view the alt text will get an equal experience to users that do not. This can be accomplished by following these best practices when building a web page:

Best Practice 1:

Keep alt text concise and remember that punctuation is important because it makes the content easier to understand.
  • As discussed on Penn State's site Image ALT Text, "A good rule of thumb to consider is to include what you might relay over the phone." [2]

Example:

Concise Description

The Google Chrome logo serving as an example of an image that uses a concise description. 

Correct Alt Text: Google Chrome logo.

Incorrect Alt Text: Image of the current Google Chrome logo, which has been used since 2014. Previous versions of the logo have been used since the web browser debuted in 2008.

***If the historical aspects of the logo are important, they should be included in the page's text, not within the alt tag.***

Best Practice 2:

As a follow up to the previous practice - if you include an image that needs a long description, consider these two options:

  • Don't write context into the alt text that would benefit everyone. Consider adding the information to a paragraph around the image instead of inside the alt text.

  • If you absolutely need to include a long description, include a short description in the alt text and then provide a link to the longer description.

Example:

Long Descriptions

A bar chart serving as an example of an image that needs a long description.

Correct Alt Text: Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3.
Image Description

Incorrect Alt Text: Overview: The chart shows the website hits for the first quarter of 2014. It shows that Site 1 has more visitors than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors, while for Site 3 page hits are increasing month on month. Values: Numerical values presented on the image: 2014 First Quarter visitors per site (in thousands). Presentation: The bar chart represents both the number of visitors per month for each website, and the total number of visitors per website for the entire quarter. Website visitors for each month are represented using columns lined up horizontally, with heights indicating the number of visitors. A fourth column is provided for each website with the accumulated site visitors for the quarter.

Alternately...

If you have included a textual breakdown of the chart somewhere else on the page, you could include that information in the alt text. (e.g., alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3. Described under the heading Site visitors full text." OR alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3, described in detail below.")

Example taken from W3C page Complex Images. [4]

Best Practice 3:

If an image is purely decorative, meaning that it conveys no information and is only used for aesthetic purposes, use a null or emptytag. This option will tell screen readers to skip the image. Otherwise, some screen readers will read the image name or just say "image", which could be distracting.
  • To insert a null tag, add two empty quotation marks without space after the alt= ( <img alt=""> )
  • Remember, if a user would miss out on information without the image, it would not be considered decorative.

Example:

Decorative Images (using the null tag)

A vine serving as an example of a decorative image that would use the null tag.

Correct Alt Text: <img alt="">

Incorrect Alt Text: Green vine decorating the site.

***This image is purely decorative and serves no function other than filling blank space for aesthetic purposes. Describing the image may cause confusion to users because it could be interpreted as an image that is important to the information on the page. However, failing to include the alt tag could also cause confusion because it could imply the user is missing important information on the page.***

Tip:

When inserting an image in LibGuides, if you leave the Alternative Text text box blank, the program will automatically add the Null Tag to your image in the coding. This is a great backup, but remember - null tags should only be used if the image is purely decorative. Otherwise, you should always include Alt Text.
The Null Tag works a little bit differently in Canvas. When you embed an image in Canvas, you are given a checkbox labeled Decorative Image. Checking this box will add a null tag to the code indicating "the image is for decorate purposes only and should not be read by screenreaders." If you leave the Alt Text line blank and fail to check the Decorative Image box, Canvas will add the name of the image as the Alt Text. This could be very confusing and not very helpful depending on your personal naming conventions. Plus, it will include the file extension type (e.g., book.png, library_example_1.jpeg, etc.).

Best Practice 4:

Avoid using phrases like "picture of" or "image of". Screen readers automatically announce images, meaning if your alt text was "Image of cell phone" the screen reader would read "Image, image of cell phone".
  • There will be some instances when it is important "to distinguish between paintings, photographs, or illustrations, etc., but it’s best to avoid the more generic use of the terms." [3]

Example:

Avoiding "Picture of" or "Image of"

University of Tennessee, Knoxville logo.

Correct Alt Text: University of Tennessee, Knoxville logo.

Incorrect Alt Text: Image of University of Tennessee, Knoxville logo.

***If you include "image of" in your alt tag, a screen reader may read "Image, Image of University of Tennessee, Knoxville logo."***

Best Practice 5:

If the image is active, meaning it is used as a link, button, or other interactive elements, describe the item's function or action rather than its description.

Example:

Active Image

Previous button used as an example of an active image that needs a functional description.

Correct Alt Text: Navigate to the previous slide.

Incorrect Alt Text: Blue circle with a white arrow pointing left.

***Describing the image will not help visually impaired users to navigate the page.***

Best Practice 6:

Context is important.
  • An image of a painting will contain very different alt text depending on a website's function. If the painting is on a website about art, it may be included in order to highlight brush strokes, color choices, or canvas type. That same painting on a history site may completely ignore the media used to create the piece and instead focus on historical elements in the painting (i.e., the subject(s), a style of clothing, etc.)

Example:

Descriptive Variation Based on Page

The UT mascot, Smokey, serving as an example of an image used to explain how a photo can have different alt tags.

Page: Information about the University of Tennessee.

Alt Text: Smokey, a bluetick coonhound, that serves as the University of Tennessee's live mascot.

The UT mascot, Smokey, serving as an example of an image used to explain how a photo can have different alt tags.

Page: Photography course about the usage of color.

Alt Text: A bright orange background contrasts against the darker subject matter.

Additional Best Practice Information:

From the W3C website Non-text Content: Understanding SC 1.1.1 [5]

Sometimes there is non-text content that really is not meant to be seen or understood by the user. Transparent images used to move text over on a page; an invisible image that is used to track usage statistics; and a swirl in the corner that conveys no information but just fills up a blank space to create an aesthetic effect are all examples of this. Putting alternative text on such items just distracts people using screen readers from the content on the page. Not marking the content in any way, though, leaves users guessing what the non-text content is and what information they may have missed (even though they have not missed anything in reality). This type of non-text content, therefore, is marked or implemented in a way that assistive technologies (AT) will ignore it and not present anything to the user. [e.g., by using a null tag <img alt=""> ]

Sometimes content is primarily intended to create a specific sensory experience that words cannot fully capture. Examples include a symphony performance, works of visual art etc. For such content, text alternatives at least identify the non-text content with a descriptive label and where possible, additional descriptive text. If the reason for including the content in the page is known and can be described it is helpful to include that information.