![Clemson University](../../images/wordmark-univ_wordmark-copur.jpg)
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 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.
![qr code linking to Clemson university website](_images/qr-sample.png)
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!
![qr code linking to Clemson university website](_images/qr-sample.png)
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.
![qr code linking to Clemson university website](_images/qr-sample.png)
Clemson University (clemson.edu)
Additional Resources
- Images tutorial (W3C)
- Understanding non-text content (WCAG 2.1)
- Understanding images of text (WCAG 2.1)
- Understanding Pause, Stop, Hide (WCAG 2.1)
- Understanding Three Flashes or Below Threshold (WCAG 2.1)
- Clemson University Style Guide