It is important to properly format your images before uploading them to your website as it can drastically impact the user experience of visitors to your page. When an image is too large, it can dramatically slow down the loading times of your site, leading to higher bounce rates and user frustration. When an image is too small for its intended size, it will appear pixelated and unprofessional. Before adding any images to your site, adjust the size your image will become based on your layout, or refer to the template's recommended sizing for the associated placement. Image sizing on the web is typically measured in pixels. Images can be edited in photo editing software such as Photoshop, which is provided for free to University affiliates, and can also be resized when downloading from the University DAM system Canto.

Alternative Text

Adding alternative text for images is the first principle of web accessibility. Visually impaired users who are using screen readers will be read an alt attribute to better understand an on-page image. Alt tags will be displayed in place of an image if an image file cannot be loaded, and search engine crawlers are able to read alt tags, which helps with SEO.

According to the WebAIM webpage on techniques the alt attribute should typically:

• Be accurate and equivalent in presenting the same content and function of the image.
• Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
• NOT be redundant or provide the same information as text within the context of the image.
• NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc., is important content, it may be useful to include this in alternative text.

Images of Text

In general, websites should avoid images of text. Images of text are best reserved when a particular visual presentation is essential, such as a logo. If the image is of a small amount of text, the alt text must match the text in the image exactly. If the image contains a considerable amount of text, the text should also be elsewhere on the page.

In general, text in images should be a generous size to mitigate pixilation when zoomed. A minimum size of 19px is a good rule of thumb, with larger being better. Text in images should match color contrast ratio minimums. For text that is at least 24px and normal weight or 19px and bold, use a contrast ratio that is at least 3:1. Ideally, use a contrast ratio that is at least 4.5:1.

Charts, Graphs and Complex Images

For charts, graphs, diagrams, illustrations and other complex images, simple alt text may not be sufficient to convey the information. In such cases, the information should be provided in addition in text on the page. For charts and graphs, authors may want to provide a data table with the equivalent information. For flow charts and diagrams, a discussion of the relevant information in the following paragraphs may be best. In any case, the image's alt text should direct the user to the long description.

Captioning

Any video content, whether hosted on sites such as YouTube or Vimeo or native in HTML5, is required to have captioning. Not only is this a legal requirement for accessibility, but it also improves the user experience and video accessibility for all viewers. There are several methods of creating captioning, such as auto-captioning done by the video hosting platform, manually writing captions or paid third-party services.

• Adding Captions Guide for YouTube, Vimeo, Facebook (via Vimeo Blogs)
• University Video and Audio Accessibility Guide (Kaltura)
• Request through Video Services

Transcripts

"Basic transcripts are a text version of the speech and non-speech audio information needed to understand the content. Descriptive transcripts also include text description of the visual information needed to understand the content. Descriptive transcripts are required to provide video content to people who are both Deaf and blind" (Transcripts | Web Accessibility Initiative).

Transcripts are required for...

• Prerecorded video without audio
• Audio-only media, such as podcasts

Prerecorded video may also use audio descriptions instead that audibly announce a transcript of what is happening in the video.

More detailed information regarding audio and video media accessibility can be found online at the Web Accessibility Initiative (WAI), whose level AA standards Clemson is required to meet.

The web templates have native styling included for adding video files to webpages with HTML5. To use these, please refer to the formatting in the code snippet below for reference on how to link your video source, captions or audio descriptions. All video files should be sized and rendered appropriately for online use before being uploaded and added to a website. Supported formats are H.264(MP4), AV1(WebM) and VP8/9(WebM).

NOTE: Do not upload or host video files directly on the Cascade Server.

iFrame Accessibility

iFrames are HTML elements that embed the contents of a separate HTML page into another. They are typically used to embed images, maps and video content on a page. iFrames have accessibility requirements that must be met when including on a Clemson site.

• iFrames must have a meaningful title attribute.
• iFrames should have a unique title attribute.
• The source page embedded in the iFrame should have a meaningful title.
• Hidden or empty iFrames should be hidden from assistive technology with aria-hidden="true".

Responsive Embed

Wrap inframe embedded content like videos, maps and calendars in a responsive embed container to allow your content to properly resize to smaller screen sizes while maintaining a proper aspect ratio. More information about this can be found on the Responsive Embed page of the Foundation website.