Making audio, images, and videos more accessible

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

Last updated June 12, 2023

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.

Do
  • Consider the purpose of the image and try to convey that meaning in 125 characters or less.
  • If the image has a clickthrough URL or any other functional use, describe the function. For example, alt text for an image of an engaged couple laughing that links to a page with engagement photos could be Engaged couple laughing. Links to engagement photos.
  • For images that require detailed descriptions, like charts, graphs, or complex graphics, include a description of the image nearby in the text of your site. As an alternative, you can add a separate page containing a description of the image, then add a clickthrough URL from the image to that page.
 
Don't
  • Include phrases like “an image of” or “a picture of” in your alt text. Assistive technologies automatically identify them as images.
 

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.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.

Making audio, images, and videos more accessible