Images and Media

Good images versus bad images

Broadly speaking, there are two types of images or graphics on a web page. Those that add value and context to the content and those that don’t.

It’s best to avoid generic or decorative images. Not only do they add unnecessary bandwidth overhead in a world where we are increasingly using measured mobile broadband to access content, but they can distract from the main point of your content or overload users with too much visual information.

One measure of the value of an image: can you write a very short sentence to describe this image in a way that supports or enhances the content of the page? “Three students sitting under a tree” doesn’t do much to support the message of most pages on a university website.

On the other hand, quality images that enhance and support the message are highly encouraged. Images showcasing outcomes and success stories, highlighting events, visualizing data, or telling a story can all serve to engage and inform the audience.

Making images accessible

Accessibility compliance requires images to have text equivalents. Someone who is unable to see the screen should be able to acquire the same information and/or context from an image that a seeing person would. To accomplish this, we use the image’s “alt” attribute.

Normally for images that are purely decorative, like an image of a leafy vine used as a visual border element, the alt attribute would explicitly be left blank. However, the option for blank alt text for decorative images is disabled in our templates because we are trying to discourage the use of images for decoration.

Common accessibility issues with images and media

Missing or too-short alt text

The “Text Description” field when adding images to webpages must contain a short, literal description of the image (8 - 50 characters is appropriate).

Vague or generic alt text

Generic references or descriptions, like “Admitted Spartan Day photo” or “Picture 1”, are not appropriate. The alt text of an image must describe the image. It doesn’t have to provide context — it just needs to be a literal description of the contents of the image.

Images with embedded text

Embedding charts or tables as graphics with embedded text (meaning text as part of the image, and not as part of the machine readable text on the page) can be a challenging accessibility problem. The content of the page and alt attribute must describe the same information seen in the table or chart. There are a number of ways to support this need.

Penn State has a good breakdown of techniques for Charts and Accessibility for when the data in a graph or chart is especially relevant or useful to the audience. It also has excellent advice to ensure that the visuals themselves are accessible with regard to color.

For simpler data visualizations, Amy Cesal’s article on Writing Alt Text for Data Visualization is an excellent starting point.

When in doubt, contact web-ops@sjsu.edu for help working out the best way to make your information available to everyone.

Flyers

Although it can be tempting to convert a physical flyer or poster into a graphic to put on your website, it results in a poor user experience, especially on a mobile device. The text will be too small to be useful and the design will appear too cluttered to be easily understood.

Instead, make sure all the appropriate event details are written out in plain text. If you wish to include an accompanying visual, choose an appropriate non-flyer visual to use consistently across all of your communications about the topic or event. Remember to include alt text/alt attributes when using the image on a webpage or in social media.

Images that are too big (or small)

Images take longer to load than text. When adding an image, be sure that it is sized appropriately for the page. A high-resolution image will take too long to load, and pages that are slow to load may be ‘downranked’ by search engines.

The campus web template’s main content area for Content Page templates is 838 pixels wide.

Captions

Captions are visible descriptions of images or other media. A caption is usually a text line immediately under the image. It is often used to identify individuals, events, dates or other information about the image and enhances the user’s understanding of what the image is conveying. It’s also useful in conjunction with the alt attribute to provide additional context. A common way to think about image captions is how they appear in newspaper articles. An image caption is not generally required, but is very useful when applied appropriately.

On a video, a caption is the text equivalent of the audio component that would otherwise be lost on non-hearing users. Video captions are required. In a circumstance where video captioning isn’t an option, the information in the video must be provided in the page content. Our compliance responsibility is to ensure that all users have equal access to information.

Captioning support is available through the Center for Faculty Development.

Audio

Users who can hear, but not see, must be presented visual information in audible form. Many of these users employ screen readers to glean information from image alt attributes and page content. It’s important to note, however, that video often contains information that isn’t verbalized and is thus unavailable to those who can’t see it. 

Users who can see, but not hear, will find audio-only information such as a recorded interview or lecture completely unusable. For these users transcripts are necessary.

In short, for every media type you include on a page, you must also include alternative methods of accessing the given information. Alt attributes, captions, and audio transcripts are some of the ways you can remain in compliance and provide a supportive environment for all users.