Images

Images are an integral aspect of design: they provide depth, can provoke emotion and summarize complex information efficiently. Inaccessible images can also be distracting and create barriers to communication. Consider the following when including images in your work.

Alternative text

Accessible images require "alternative text," also known as "alt text," describing its visual information. Alt text is conveyed by text-to-speech software and is typically hidden visually.

Provide a relevant description of images to help readers understand what the image represents related to its surrounding content. Alt text should be relatively brief, as if you’re describing a picture to a friend.

Example: microscope

Using an image of a microscope to accompany a summary of research laboratory equipment, the alt text for the image may include product specifications so that those interested in using the lab would have a detailed understanding of equipment available for their research.

However, using an image of a microscope to accompany information about a youth STEM summer camp, the alt text may be more general, such as "Four students with microscopes gather at a picnic table."

In either case, "microscope" alone is an accurate but insufficient description.

Example: people

One or two people are the subject of a photo…

[name] and [name] [action] [location]

Liz Montgomery and Alivia Alverez wait in line at the ticket counter at the Brooks Center.

Three or more people are the subject of a photo…

[describe group] [action] [location]

A group of Clemson University employees sit around a lunch table in McAlister’s dining hall.

Decorative Images

Sometimes, an image, line or filled shape is included in a design to enhance visual appeal; the graphic adds no new or supporting information to the surrounding content. When visuals are used this way, they can be marked as "decorative." Decorative images are ignored by screen readers.

Images of Text

Images that contain text can present a variety of accessibility barriers. For example, people with low vision may prefer to increase the zoom level of content, resulting in pixelated text in an image. If possible, avoid images of text and use "real" text to communicate information. Note that there are exceptions to this rule, i.e., for use in logos. If an image of text is essential, ensure the alt text includes the text in the image.

Animations

Used sparingly, animations can draw attention, emphasize content and add visual flair. However, moving content can distract people from the information that matters. For animations presented alongside other content, ensure that the motion lasts no longer than five seconds, or provide a mechanism to stop, pause, or hide the animation.

Further, flashing content can cause seizures for people with photosensitive epilepsy. If you choose to use animations, ensure they do not flash rapidly.

Before reaching for a glitzy GIF, consider if an animation is needed.

QR codes

QR codes offer a creative, modern way to send readers to digital content (a website, email or social media account). Since QR codes are accessed using a phone's camera, they can lose their functional purpose when viewed on a mobile device. Different considerations apply when sharing QR codes electronically or in a print format.

QR Code Examples

QR codes for print

If a QR code is used for print only, include its destination URL to help readers access the destination from any device without needing a camera.

clemson.edu

QR codes online

If a QR code is used online only:

• Provide alt text for the QR code (e.g., "QR code for Clemson homepage") to convey its meaning to screen readers.
• Provide a clickable link to the destination so that readers can select the link directly – particularly helpful if they are reading on a smartphone… where their camera is!

Clemson University

QR codes for print and online

If a QR code will be used both in print and online, use a combination of both approaches:

• Provide alt text for the QR code (e.g., "QR code for Clemson homepage").
• Provide a clickable link to the destination.
• Include its destination URL.

Clemson University (clemson.edu)