Multimedia and Embeddable Content

Advanced content editors who have been granted the, “Content Administrator Advanced” user role, can add embed code from cloud services, such as YouTube, Vimeo and SoundCloud to any page on the website, as long as they first switch the field to use the Advanced Text Format. See the Advanced Rich Text Editor page for instructions.

Requirements

The output for all multimedia must be accessible, semantic, and responsive.

  1. All multimedia should be captioned with text transcription and audio descriptionIf no captions are available then there must be a transcript and explanation.
  2. If an embed includes an iFrames, it must include a descriptive title attribute value. Review, http://webaim.org/techniques/frames/.
  3. The media player buttons used to interact (push play and pause, etc.) with the media, must be accessible. As of this writing, the embed code from Vimeo, YouTube and SoundCloud is not natively fully accessible. If you have a Video content type form, it has an accessible player. You are encouraged to follow these steps to embed an accessible video content type.
  4. To make it work for visitors on secure connections, over SSL, the source should be protocol-relative. In other words, remove the http or https from the source path.
  5. To make it responsive
    • add class="responsive-video__embed" to the <iframe> tag and
    • add div around the iframe with the class <div class="responsive-video">

YouTube Example

Copy the code from the Embed share code (not just the sharable link). Click this icon:Embed iconThen adjust the code as follows:

<div class="responsive-video">
<iframe title="Description of video" class="responsive-video__embed" width="560" height="315" src="//www.youtube-nocookie.com/embed/WL1GMBbz9OM" frameborder="0" allowfullscreen></iframe>
</div>

Courtesy

  • Do not set multimedia to auto play.
  • Provide alternate access to the media such as a direct link to the content on YouTube, SoundCloud or other site. Access may be hindered by various issues so the direct link provides an alternate option, which may play better for one reason or another.
  • You are also encouraged to include your email address with an invitation to contact you if for any reason the visitor is unable to access the media.

Non-Accessible Media Players

Section 508 also requires buttons to interact with the content, such as play and pause, to be accessible. Unfortunately, the embeds from most cloud services do not provide an accessible media player.

The Web team is currently implementing an accessible media player and Video content type that utilizes content on cloud services (see the Department of Theatre and Dance homepage). Until it is implemented on your site, please refrain from adding video content that cannot be accessed in other ways. When you have a Video content type, please follow these instructions: embed an accessible video content type.

Access may be hindered by various issues, so you are encouraged to include the link to the content directly on YouTube, SoundCloud or other site as an alternate option, which may play better for one reason or another.

Updates

Technology, browsers, multimedia and embed codes are constantly changing. Review pages with multimedia frequently and be aware of changes in the cloud services.

Test & Evaluate

Because this content is so “shifty”, we highly recommend running these pages through the recommended tests and evaluations.

Learn More

For more specific details about the requirements please see the WebAIM site and for solution ideas see the DIAGRAM (Digital Image and Graphic Resources for Accessible Materials) Center.