- 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.
- On our websites, there are also Embeddable Content Types, such as grid layouts, image galleries, (on some sites) video and audio.
Below are instructions for embedding from cloud services.
Requirements
The output for all multimedia must be accessible, semantic, and responsive.
- All multimedia should be captioned with text transcription and audio description. If no captions are available then there must be a transcript and explanation.
- If an embed includes an iFrames, it must include a descriptive title attribute value. Review, http://webaim.org/techniques/frames/.
- 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.
- 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.
- 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">
- add
YouTube Example
Copy the code from the Embed share code (not just the sharable link). Click this icon:
Then 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>
SoundCloud
The HTML5 player is the most accessible option. It’s less visually cluttered and you have better control over contrast issues.
Contrast:
- Of the available play/pause button colors: #2c4149 is the only on that passes with the background color: #f5f5f5
- You can add a color to the button, but you have to check it with this contrast checker against the background color: #f5f5f5
- The button color just has to pass AA for normal, large and graphical objects.
- Warning: standard burnt orange: #cc5500 and the web accessible burnt-er orange: #bf5700 do not pass color contrast against #f5f5f5
Title Attribute: SoundCloud iFrames don’t automatically have a title attribute, so it needs to be added. The instructions for adding an iFrame title can be found here.
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.
