How can I make the media on my GiveGab profile accessible?

Pictures and videos play a big role in all profiles, but it's just as important to make sure that they are accessible to everyone.

Katrina Grein-Topken avatar
Written by Katrina Grein-Topken
Updated over a week ago

To best ensure that your organization's profile is accessible for everyone, we recommend that you follow the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA. In this article, we'll be visiting on the various aspects of the WCAG that relate to the media, images, and videos in your profile, whether it be on your Giving Day profile, or a campaign or event that your organization is running.

If you'd like to read the article that goes into the text portion of your profile more in-depth, please click here.

For more resources on accessibility in general, please visit our summary article here.

How to ensure your profile is accessible

1. Add alternative text to all images

  • This can be done through the HTML editor, here is a helpful resource from W3Schools that goes over this under the alt attribute

  • The alternative text should be a short description for the image itself, and can draw themes from a caption text

An example of an image with alternative text embedded into the HTML:

<img src="https://www.givegab.com/assets/gg-logo-vector-8b434175bf6c466021b4845f22ca2043dfa631949d7add94ee3e5e96062e9f11.svg" alt="GiveGab logo">

2. Add descriptive text or captions to all images

  • This differs from alternative text, in that it goes alongside the image, rather than in the image itself

  • If the paragraph near the image describes the image well enough, then a caption is not necessary

Descriptive text first example, the paragraph with the text is sufficient

In the above image, there is no caption, but the text nearby sufficiently describes the image.

Descriptive text second example, the paragraph with the text is insufficient

In the above image, there is no caption, and the text near the image does not describe the image.

Descriptive text third example, the paragraph with the text is insufficient, but the caption is sufficient

In the above image, the text near the image does not describe the image, but the caption summarizes it.

Note: It is important to have both a description of the image, as well as alternative text of the image! If you are having issues adding either of these to an image, please reach out to our Customer Success team by email at customersuccess@givegab.com, or by writing into our chat.

3. Add captions or subtitles to all video content

  • Our site allows for organizations to upload a YouTube or Vimeo video to their profile, thank you message, and to Peer-to-Peer fundraisers

  • Here is YouTube's support article for adding subtitles

  • Here is Vimeo's support article for adding subtitles

  • If your supporter base speaks more than one language, provide subtitles in both English, as well as the additional language

An example of a video with closed captions

The above is an example of a video is closed captions, in this case, the video's closed captions were automatically generated.

4. Have a solid flow in all video content

  • Any speakers that are present in your videos should speak in a consistent tone and pace and should not be rushed

  • There should never be a period in your video when there are three or more flashes on screen in less than a single second

Note: If the flashes in your video is crucial to the information portrayed, then include a seizure and flashing light warning at the beginning of the video, and give the viewer ample time to close the video before any content begins.

Did this answer your question?