Tips on how to present your media content in different formats.

Adding audio, images, and video content, also called media content, is a great way to enhance your site. However, consider how this information will be experienced by visitors who can't fully see or hear the content.

Use this guide to learn more about the alternative ways to present your media content to visitors.

Note: This guide is available as a resource to help you get started, but shouldn't be construed or relied upon as legal advice. Squarespace can't provide advice about making your site compliant with any specific accessibility laws, regulations, or standards.

Images

The internet is a visual medium where images can play a significant role in the presentation of your site. Elements like alt text and how you format animated images or .gifs are important to keep in mind.

Alt text

When scanning a page, screen readers identify images and read the descriptive text (alt text) to visitors. When adding alt text, take a moment to consider why you’ve used the image in the first place. For example, is it to convey information, or is it decorative? What do visitors with vision impairments need to know about the image to access all the information available to sighted visitors?

A best practice is to briefly describe the image as you would to a friend over the phone. Purely decorative images, like graphics separating content or abstract background images, don't require descriptions. It’s important to remember that alternative text is content on a page. It should be written clearly and concisely.

Animated .gifs

You can add animated images, or .gifs, to most areas of your site. Ensure your animated .gifs don't flash three or more times in a one-second period. This type of content is known to cause seizures or other physical reactions.

Tip: If your site is on version 7.1, your visitors can turn off some animated features through their device settings. This way, they'll encounter less motion when visiting your site. For example, if a Mac user chooses to reduce screen motion on their device, animations you enabled for Background image effects or background art won't appear animated for that visitor.

Videos

When adding videos to your site, keep these tips in mind:

• Add synchronized captions using the integrated closed-captioning features for YouTube and Vimeo. This way, viewers can enable or disable captions from within the video block. Visit YouTube and Vimeo for more information on adding captions.
• Add no more than two background videos per page. Too much motion can be challenging for people with motion sensitivities.
• Avoid content in your video that flashes three or more times in a one-second period.

Audio

You can help visitors with hearing impairments access your audio content, like podcasts, by adding a transcript. To keep your pages organized, you may want to include transcripts on not linked pages.

Motion

Motion and animation can make your site more interactive, and eye-catching. However, it’s important to ensure that it doesn’t disorient visitors. Design choices, especially those involving motion, can negatively affect those with motion sensitivities. The following are design elements you may want to use in a subtle way or avoid all together to ensure your site is fully accessible.

Parallax effect

A parallax effect is when background elements move at different speeds than foreground elements while scrolling. When using these types of effects, consider the needs of those with vestibular disorders.

Parallax effects can be most challenging when they:

• Take up a lot of space
• Appear behind or near text
• Occur multiple times on a page

To turn off any background image effects follow the steps in Section background images. Ensure you choose None as the image effect. If you use parallax effects, consider limiting them to one per page and minimizing the size and depth of each effect.

To learn more about decreasing movement and animation on your site, visit Site wide animations.

Flashing

Content with flashing, or rapidly changing colors may cause seizures in susceptible visitors. When possible, avoid using content that flashes, or rapidly changes colors and consider implementing the following guidelines:

• It doesn't flash more than three times in one second.
• It is below the general flash and red flash thresholds.

Flash thresholds are different for each color. People are more affected by red flashes than any other color.

You can use the Trace Center’s Photosensitive Epilepsy Analysis Tool to test for seizure risk and flash thresholds.