Skip to Main Navigation. Each navigation link will open a list of sub navigation links.

Skip to Main Content

Apply Now to the University of Wyoming apply now
Visit Campus
Download UW Viewbook
Give to UW

Alternative Text

Alternative text for images

All images within a page must be given an alternate text equivalent. Text equivalents for non-text elements communicate the meaning of images to users who cannot perceive the image such as users of screen readers. Proper equivalents provide text which contributes the same level of understanding to the content of the page as the image itself. In instances where the image does not contribute to the understanding of the content and is purely decorative, it needs to be marked in a way to indicate its purely decorative purpose.

Add an appropriate alt attribute for images including poster images of videos that do not contain alt attributes. An alt attribute should be a concise and meaningful replacement for the image. For example, when describing a picture of a red balloon, entering alt="red balloon" will be more helpful than alt="This is a picture of a red balloon". The alt text of the image should be in the language of the page or if the page contains multiple languages the language of the surrounding or any referring content.

If the image does not convey any meaning, such as a spacer image or separation line, or if the image is redundant to adjacent text enter a null alt attribute (alt="") should be assigned, the image should be turned into a CSS background image, or role="presentation" should be applied to the image. Some assistive technologies may not support role="presentation". Other types of decorative images include borders, spacers and images that do not convey meaning. Logos are not considered decorative images.

Circumstances in which it is appropriate to use an empty or null alt attribute:

  • An image is decorative.
  • An image is not meant to be displayed to users.
  • An image consists of text that is repeated as plain text in another location on the page.
  • The image is part of a group of images that form a single picture and one of the other images in the group has a text alternative which serves as the text alternative for the entire picture.
  • The image is included as the content of a link and there is other content included that describes the link target.

The page developer should add appropriate alt attributes for progress bar images that do not contain alt attributes. An alt attribute should be a concise and meaningful replacement for the progress image. For example, when describing a progress bar, entering alt="task 50 % complete" will be more helpful than alt="This is a picture of a progress bar". If the progress image is redundant to adjacent text a null alt attribute (alt="") should be assigned.

When the ARIA role="img" container is used for a collection of elements, developers must use aria-label or aria-labelledby" reference to assign alternative text -- the alt attribute cannot be used. For a collection of graphic images, assistive technologies render the alternative text for the element with role="img" element only instead of multiple alternative texts for each image.

It may also be possible to use the title, aria-labelledby reference, or aria-label attribute on images to provide an alternative. The title attribute or ARIA only solution such as aria-label can only be used in lieu of the alt attribute when it is accessibility supported under WCAG conformance requirements. Thus, whenever it is possible to use the alt attribute it should still remain the gold standard for providing short alternative text for images. Both alt and an ARIA solution should not be used together and whenever alt="" is used to mark an image as purely decorative, another ARIA based alternative must not be applied.

SVG elements must also provide meaningful alternative text. The support for SVG elements varies through browsers and screen readers. To provide alternative for SVG graphics, add a title element within the SVG tags and a desc element. The title element represents the accessible name of the SVG element and the desc element represents the description of the graphic. To make sure the appropriate role and accessible name is rendered through the various browsers and screen reader combinations, use ARIA role="img" within the SVG element and aria-labelledby to reference the IDs of the title and desc elements.

If the SVG element is decorative and needs to be ignored by screen readers, add aria-hidden="true" and role="presentation" attribute should be set within the SVG element. Use of role=presentation is particularly important for inner shapes that appear as children of an svg element as the role of presentation may not be inherited. Use of aria-hidden is the safest way to make sure decorative SVG including sub content is not seen by assistive technology..

In some situations a figure element may also need an alternative, this is necessary when it contains non-text content that does not provide an equivalent alternative.

When an image is part of a link and the image's alternative is a necessary part of understanding the link's purpose, an alternative needs to be applied to the image or otherwise included in the accessible name calculation of the link. If the link has an accessible name that does not rely on the image having an equivalent alternative, the image must still be marked as decorative with alt="" or role="presentation".

For videos that have poster images, an alternative needs to be provided that describes the time-based media. If there is no img element to apply the alternative to - the alternative may be placed on the video element itself via the title attribute, aria-label, etc. or via on-screen text or equivalent.

Ensure images provide informative alternative text

Images that convey meaning must provide informative alternative text. Alternative text that is default, or non-meaningful text, can negatively impact the accessibility of a page. In some cases, alt text could be insufficient while in others it may be inappropriate. The goal of alt text should be to present text which will provide the same level of understanding to those who cannot see the image as it does to those who can. Whenever possible, page developers should ensure alternative text for images including progress bar images is as terse, yet informative as possible.

Images that contain text must also provide alternative text. Placing text in images can create multiple problems, depending upon the application. Even when images contain alt attributes, the alt attribute is often not equivalent. In addition, the text inside an image cannot be resized by users who have manipulated their browser settings or created their own style sheets to display fonts in sizes bigger than the default.

Alternative text should be replaced with a more informative type of alternative text. For example, "f12_new.jpg" is not an informative description of the image. Page developers should ensure that alt text is a concise and meaningful replacement for the image.

Developers should supply alternate text for progress images which clearly indicates the progression status as well as stating (or implying) what remains in the progression. When the image is a progress bar, developers must use the alternative text to indicate the current value as a percent, the fact that it is a progress bar, and any other information such as the minimum and maximum values. When describing a progress bar, entering alt="task 50 % complete" will be more helpful than alt="This is a picture of a progress bar". In cases where the progress bar is paired with on-screen text indicating progression, the progress image should be given an empty alt attribute.

Make a concerted effort to replace all images that contain text with style sheet controlled alternatives. If this is not a viable option, set the alternative text for the image to be the same as the text contained within the image.

Using text instead of images means that the information will be available to a greater number of users (i.e. those with speech synthesizers, Braille displays, graphical displays, etc.). Using style sheets will also allow users to override author styles and change colors or fonts sizes more easily.

Finally, regarding the actual length of image alternative text, a two-tiered approach applies. It is strongly recommended that alt text should not exceed 80 characters. But alt text that exceeds 150 characters should be considered unacceptably long and must be shortened. Beyond the desires to be concise (yet informative), this guidance is also based on practical considerations of Assistive Technology use, such as the 80-cell width of larger braille displays and the 150-character setting for how some screen readers break up long lines of content.

Alternative text for image buttons

All images - including those which are form buttons - must provide a proper text equivalent within an alt attribute which will meaningfully replace the image for users who cannot see the image. For example, users of screen readers and text-only browsers will rely on this information to determine the purpose of the button.

Developers must provide alternative text for image buttons. This should be done through the use of the alt attribute of the input element. Developers should also ensure that the text is meaningful (not "click here") and appropriately describes the functionality of the image button. For example, if an image is a button, add an alt attribute that describes the functionality of the link, such as alt="promotional offer on cell phones", or "Search".

Alternative text is meaningful and concise

An image map is composed of a single image with multiple area elements, each of which is a link to a different URL. Each area must have an alt attribute to meaningfully indicate the target of the link. Like regular image alt attributes, certain descriptions such as "click here" and "more..." are non-meaningful text because they are not descriptive of the content to be found or function to be performed at the target destination. If the title attribute is used, it should not duplicate the alt text.

Developers should replace non-meaningful alt attributes with more precise alt attributes. These alt attributes should describe the target of the area, such as alt="Maryland stores" or alt="special offers on computer accessories". If using a title attribute in addition to the alt attribute, developers should ensure that they're not redundant.

Alternative text for image links is informative

Img elements which are used as links must have alt attributes that describe both the image and the target of the anchor. Links require meaningful alt attributes which describe their target, such as alt="CNN home page" or "Yahoo's NFL page". In this regard, the image's alt text should adhere to the same principles as necessary for regular linked text. The alternate text description should function as a replacement for the image link.

Developers should ensure descriptions are precise and meaningful and avoid using vague attributes such as alt="Follow this link...". The alt description should effectively describe the target of the link.

Note: When developing for WCAG Level AAA compliance developers must ensure that the image's alternative text is informative when taken out of context. However, when developing toward Level A and AA compliance developers may also take into account the context of the image link in addition to the alternative text on the image in determining conformance.

Link Context includes the same

  • Sentence, paragraph, or list item or
  • Heading immediately preceding the link or
  • Table cell as the link or
  • In the table header cell for a link in a data table

 

Contact Us

Marketing Web Services Group

Dept. 3226, 1000 E. University Ave.

Laramie, WY

Phone: (307) 766-2457

Phone: (307) 766-2455

Email: webhelp@uwyo.edu

1000 E. University Ave. Laramie, WY 82071
UW Operators (307) 766-1121 | Contact Us | Download Adobe Reader

Accreditation | Virtual Tour | Emergency Preparedness | Employment at UW | Privacy Policy | Harassment & Discrimination | Accessibility Accessibility information icon