We love embedding video in webpages, but there are several things we need to do to make sure we are meeting accessibility standards:
Keyboard controls are essential for those with physical disabilities. Currently, most videos are still embedded using <iframe> tags. In this scenario, a computer user would tab to the video and click enter. If the embedded video is from YouTube.com the video will open up in a new window and play from YouTube.com's website. This will satisfy the accessibility standard, but a there are better methods for web developers. The <iframe> embed code for the video embedded on this page from YouTube.com is as follows:
<iframe width="560" height="315" src="https://www.youtube.com/embed/93UgG72os8M?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>Your browser does not support iframes.</iframe>
If you have access to your website's html code, you can control YouTube's IFrame player using API JavaScript Functions. However, Internet Explorer 7 does not support this method. Visit Google Developers for more information on YouTube's IFrame Player API.
Another method for embedding video uses HTML5 which has a <video> tag which makes videos very accessible. Unfortunately, not all browsers support this method yet as there is still a debate going on about what the standard codec will be. Below is an example from www.W3schools.com showing an embed using the HTML5 <video> tag:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
If you are a web developer, you may opt to integrate Able Player into your site or webpages. Able Player plays audio and video files using the HTML5 <audio> and <video> tags. It will also fallback to a JW Player for browsers that do not support the HTML5 tags. It is available through GitHub: https://github.com/ableplayer/ableplayer. This method is the best solution for video and audio files delivered from your site.
Standard
When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
How to Meet the Standard
Content and functionality provided by scripting is directly accessible to assistive technologies and the keyboard. <noscript> content does not constitute a suitable alternative to inaccessible scripting.
Who does this help?
Controlling video and multimedia with the keyboard is essential for those with physical and cognitive disabilities, but is helpful for everyone!
Sources:
W3C Web Accessibility Initiative Videos
WebAIM.org Section 508 Checklist
Last Updated: April 21, 2018