Spotlight provides out-of-the-box accessibility support for exhibits when possible, but exhibit curators are ultimately responsible for ensuring their content is accessible. While there is no one-size-fits-all set of instructions for CUL exhibits, below are a few tips and considerations for improving the accessibility of your CUL exhibit.
Images
uploaded images: caption
embedded exhibit items: "Alt text" or item title - images displaying with the IIIF viewer (e.g. Item Embed Widget) are not currently able to display with alt text.
Images can be added to exhibit pages (Home, Featured, About) using page widgets that embed exhibit items (Item Row, Carousel, Slideshow, and Grid widgets) or the Uploaded Item Row widget.
It is important to set the right alt text for images displayed on your exhibit pages so that screen readers can read aloud a text alternative. From WCAG: "When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image."
Embedded Exhibit Item
If embedding an exhibit item to your page, you can set custom image alt text by using the "Alt text" field.
If you do not set this field, the alt text will default to your item's title.
Uploaded Image
When uploading an image using the Uploaded Item Row widget, use the "Caption" field instead. This is especially important when you also add a "Link Url".
Add screenshots!
Videos
Videos embedded on CUL exhibits can typically only be made as accessible as the video uploader allows. If the video uploader has not enabled captions or transcripts, the video will not be able to cannot be embedded with captions or transcripts. Consider uploading only videos that have subtitles enabled. Non-automatically generated subtitles are typically more accurate. For more information about transcribing videos for captioning: https://vimeo.com/blog/post/how-to-transcribe-a-video/
...
There are also certain attributes in the Iframe code itself that can impact the accessibility of content that exhibit curators should keep an eye out for:
Unique Ids
You may need to be careful when adding multiple iframe widgets to the same exhibit page. If your iframe code includes an id="SOMETHING" attribute, make sure your ids are unique for each iframe block. For example, if you'd like to embed multiple Kaltura videos, make sure the id attribute is different for each one:
| Code Block | ||
|---|---|---|
| ||
<iframe id="kaltura_player-1" src="EMBED_URL_1" width="800" height="750" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" frameborder="0" title="VIDEO TITLE 1"></iframe> |
| Code Block | ||
|---|---|---|
| ||
<iframe id="kaltura_player-2" src="EMBED_URL_2" width="800" height="750" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" frameborder="0" title="VIDEO TITLE 2"></iframe> |
WCAG: Ensuring that id attributes are unique on a Web pageif using ids in iframe code, use unique ids
Title attribute
Use the title attribute to describe the iframe's content: https://www.w3.org/WAI/WCAG21/Techniques/html/H64
<iframe src="LINK" title="Kaltura video: TITLE OF VIDEO">
Videos
YouTube videos: https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cadd-captions-to-an-embedded-video
Vimeo videos: https://help.vimeo.com/hc/en-us/articles/12426275503377-Enable-captions-and-subtitles-in-embeds-by-default
. For example, if embedding a Kaltura video, the title attribute can be set to the title of the video:
| Code Block | ||
|---|---|---|
| ||
<iframe id="kaltura_player" src="EMBED_URL" width="800" height="750" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" frameborder="0" title="Kaltura Video: TITLE OF VIDEO"></iframe> |
WCAG: Using the title attribute of the iframe element
Video captions & transcripts
As mentioned in Videos above: Videos embedded on CUL exhibits can typically only be made as accessible as the video uploader allows. If the video uploader has not enabled captions or transcripts, the video cannot be embedded with captions or transcripts. Consider uploading only videos that have subtitles enabled. Non-automatically generated subtitles are typically more accurate. For more information about transcribing videos for captioning: https://vimeo.com/blog/post/how-to-transcribe-a-video/
Kaltura
If embedding a Kaltura video with a transcript available, the transcript should automatically display in the transcript widget below the video as it plays. This is configurable on Kaltura's side, not in the iframe code.
YouTube
If embedding a YouTube video with user-generated captions, you can add ?cc_load_policy=1&cc_lang_pref=en to the end of your YouTube embed URL to display captions on the video by default. This will not work with automatically-generated captions. For more information, see: YouTube Help: Embed videos & playlists.
Vimeo
Vimeo also iframe embed code to enable caption display by default. For example, to enable the display of automatically generated english captions, you would add &texttrack=en-x-autogen to your Vimeo embed URL. For more information, see: Vimeo Help Center: Enable captions and subtitles in embeds by default.https://learn.canvas.cornell.edu/getting-started-with-kaltura/