{"id":375,"date":"2020-08-23T22:27:14","date_gmt":"2020-08-24T05:27:14","guid":{"rendered":"https:\/\/idwerkz.com\/blog\/?p=375"},"modified":"2020-08-23T22:27:22","modified_gmt":"2020-08-24T05:27:22","slug":"accessible-video-players-content-container-united","status":"publish","type":"post","link":"https:\/\/idwerkz.com\/blog\/31-days-to-a11y\/accessible-video-players-content-container-united\/","title":{"rendered":"Accessible Video Players &#8211; Content &#038; Container United"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/alex-litvin-MAYsdoYpGuk-unsplash-1024x683.jpg\" alt=\"digital projector illuminated beam of light reveals dust and smoke in the air.\" class=\"wp-image-376\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/alex-litvin-MAYsdoYpGuk-unsplash-1024x683.jpg 1024w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/alex-litvin-MAYsdoYpGuk-unsplash-300x200.jpg 300w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/alex-litvin-MAYsdoYpGuk-unsplash-768x512.jpg 768w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/alex-litvin-MAYsdoYpGuk-unsplash-1536x1024.jpg 1536w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/alex-litvin-MAYsdoYpGuk-unsplash-2048x1365.jpg 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/@alexlitvin?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Alex Litvin<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/movie?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n<p>In the world of digital media accessibility, there is a balancing act between the capabilities of the container to support accessibility and how far you need to go (or can go) in terms of formatting and enhancing content for accessibility.<\/p>\n\n\n\n<p><strong>CONCEPT: Content can be formatted for accessibility only so far as the container provides the capability to support that formatting.<\/strong><\/p>\n\n\n\n<p>Video Players are a great demonstration of content capabilities for accessibility being determined by the container. You might be surprised to learn that not all video players can actually play captions.<\/p>\n\n\n\n<p><strong>TAKE AWAY: <\/strong>As a teacher, you (hopefully) already have a life in addition to a full-time load. The last thing you need is to spend time captioning a video only to find that the captions can\u2019t be turned on when you embed the video in your LMS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Containers of Accessibility Potential<\/h2>\n\n\n\n<p>Obviously, digital information comes in a lot of different forms. Text, images, audio, video, and tactile information can all be communicated through different digital technologies and file formats.<\/p>\n\n\n\n<p>Not surprisingly, not all digital containers are capable of providing the same range of options and support for describing the content they are carrying.<\/p>\n\n\n\n<p>Many file formats contain what is called \u201cmeta\u201d information, which is information that refers to the file and the information it contains. Meta information is self-referencing information, and it can contain a variety of data including accessibility-related data.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Text Containers<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/max-chen-lud4OaUCP4Q-unsplash-1024x768.jpg\" alt=\"colorful digital text comprising computer code fills the screen.\" class=\"wp-image-377\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/max-chen-lud4OaUCP4Q-unsplash-1024x768.jpg 1024w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/max-chen-lud4OaUCP4Q-unsplash-300x225.jpg 300w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/max-chen-lud4OaUCP4Q-unsplash-768x576.jpg 768w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/max-chen-lud4OaUCP4Q-unsplash-1536x1152.jpg 1536w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/max-chen-lud4OaUCP4Q-unsplash-2048x1536.jpg 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/@maxchen2k?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Max Chen<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/text?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n<p>There are several file formats that can contain digital text. Some can only contain text, while others can contain a variety of digital information, including information about the text.<\/p>\n\n\n\n<p>In the same way, support for accessibility is also varied across text file formats.<\/p>\n\n\n\n<p>For example, much as Microsoft Word has a lot of features for editing text, it also provides a deep set of capabilities for accessibility in addressing these features.<\/p>\n\n\n\n<p>Someone using a screenreader can tell you what font style, size, and color is being used in MS Word.<\/p>\n\n\n\n<p>Notepad, on the other hand, has a minimal set of features, and correspondingly few capabilities for accessibility.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Image Containers<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"793\" height=\"1024\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/sebastien-gabriel-O0zLR_lVt8I-unsplash-793x1024.jpg\" alt=\"cellphone being held in a single hand, taking a picture.\" class=\"wp-image-378\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/sebastien-gabriel-O0zLR_lVt8I-unsplash-793x1024.jpg 793w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/sebastien-gabriel-O0zLR_lVt8I-unsplash-232x300.jpg 232w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/sebastien-gabriel-O0zLR_lVt8I-unsplash-768x992.jpg 768w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/sebastien-gabriel-O0zLR_lVt8I-unsplash-1189x1536.jpg 1189w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/sebastien-gabriel-O0zLR_lVt8I-unsplash-1586x2048.jpg 1586w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/sebastien-gabriel-O0zLR_lVt8I-unsplash-scaled.jpg 1982w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/@sgabriel?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Sebastien Gabriel<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/digital-picture?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n<p>Image files do not typically hold extra information about the image beyond what is visually apparent.<\/p>\n\n\n\n<p>There are some situations where extra information is stored in an image file, but it requires special knowledge and an image editing program that can access and display the information.<\/p>\n\n\n\n<p>Most image files do not have easily editable meta information we can exploit for accessibility.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Audio Containers<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"680\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/william-iven-TMOeGZw9NY4-unsplash-1024x680.jpg\" alt=\"headphones attached to a cellphone\" class=\"wp-image-379\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/william-iven-TMOeGZw9NY4-unsplash-1024x680.jpg 1024w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/william-iven-TMOeGZw9NY4-unsplash-300x199.jpg 300w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/william-iven-TMOeGZw9NY4-unsplash-768x510.jpg 768w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/william-iven-TMOeGZw9NY4-unsplash-1536x1020.jpg 1536w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/william-iven-TMOeGZw9NY4-unsplash-2048x1360.jpg 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/@firmbee?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">William Iven<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/mp3?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n<p>Some audio files provide extra information beyond the sonic data you can hear, but not all.<\/p>\n\n\n\n<p>MP3 files contain extra information, and it can be used for accessibility.<\/p>\n\n\n\n<p>The MP3 file format supports text information in a meta data field labeled \u201cLyrics\u201d. You can put any kind of digital text in there, not just lyrics!<\/p>\n\n\n\n<p>Of course, your audience has to be told they can find a transcript in the lyrics field, and they also have to have an MP3 player that can reveal the data from the Lyrics field.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Video Containers<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"678\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/immo-wegmann-kMLhgAoo7k-unsplash-1024x678.jpg\" alt=\"remote control buttons\" class=\"wp-image-384\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/immo-wegmann-kMLhgAoo7k-unsplash-1024x678.jpg 1024w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/immo-wegmann-kMLhgAoo7k-unsplash-300x199.jpg 300w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/immo-wegmann-kMLhgAoo7k-unsplash-768x509.jpg 768w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/immo-wegmann-kMLhgAoo7k-unsplash-1536x1017.jpg 1536w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/immo-wegmann-kMLhgAoo7k-unsplash-2048x1356.jpg 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/@macroman?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Immo Wegmann<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/pause-button?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n<p>Video files are often combinations of the different aspects of the final presentation we watch.<\/p>\n\n\n\n<p>Video information can be presented directly through the browser when it is supported, but not all browsers support video playback without a video player application.<\/p>\n\n\n\n<p>Some form of application is required in order to present the video information and provide the user with a PLAY\/PAUSE button, a STOP button, Fast Forward, Rewind, etc.<\/p>\n\n\n\n<p>A video player is often overlooked in terms of video accessibility, while Captioning gets the main attention.<\/p>\n\n\n\n<p>However, providing captions is not enough.<\/p>\n\n\n\n<p>For video to be accessible, it needs to be possible for the viewer to play the captions. If the player doesn\u2019t have a button to turn on the captions, then the captions might as well not exist. In fact, as far as the viewer is concerned, they don\u2019t.<\/p>\n\n\n\n<p>In addition to the video player needing to be able to play the caption information, the video player needs to have controls that are keyboard accessible.<\/p>\n\n\n\n<p>This disqualifies many of the web-based video players, but not all of them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessible Video Players<\/h2>\n\n\n\n<p>Happily, the video players used by YouTube and Vimeo are accessible. When you add captions top the videos you load or use from these sites, the video will be presented through accessible players when viewed at youtube.com or vimeo.com.<\/p>\n\n\n\n<p>If you are embedding the video payer into your LMS, always check to make sure the video player can be controlled via the keyboard.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">AblePlayer<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"703\" height=\"261\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/ableplayer.png\" alt=\"Able Player Fully accessible cross-browser HTML5 media player.\" class=\"wp-image-385\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/ableplayer.png 703w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/ableplayer-300x111.png 300w\" sizes=\"auto, (max-width: 703px) 100vw, 703px\" \/><figcaption>Able Player Fully accessible cross-browser HTML5 media player.<\/figcaption><\/figure>\n\n\n\n<p>If you find that your LMS is using an inaccessible video player, you can use the AblePlayer for free.<\/p>\n\n\n\n<p><a href=\"https:\/\/ableplayer.github.io\/ableplayer\/\">AblePlayer<\/a> provides full support for captioning as well as timed text transcripts, so your students can click on the transcript and be taken directly to that point of the video.<\/p>\n\n\n\n<p>This capability is a great study aid, allowing students to quickly search and view the parts of your instructional video they need to study.<\/p>\n\n\n\n<p>Here is an <a href=\"http:\/\/apps.3cmediasolutions.org\/oei\/modules\/reading\/story\/#transcript\">example of the AblePlayer in use<\/a>.<\/p>\n\n\n\n<p>Now you can ensure that your students are actually able to use the access strategy you provide when you caption your instructional videos.<\/p>\n\n\n\n<p>Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the world of digital media accessibility, there is a balancing act between the capabilities of the container to support accessibility and how far you need to go (or can go) in terms of formatting and enhancing content for accessibility. CONCEPT: Content can be formatted for accessibility only so far as the container provides the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/idwerkz.com\/blog\/31-days-to-a11y\/accessible-video-players-content-container-united\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Accessible Video Players &#8211; Content &#038; Container United&#8221;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[9,79,82,80,78],"class_list":["post-375","post","type-post","status-publish","format-standard","hentry","category-31-days-to-a11y","tag-a11y","tag-able-player","tag-container-vs-content","tag-digital-content-a11y","tag-video-player"],"_links":{"self":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/comments?post=375"}],"version-history":[{"count":2,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/375\/revisions"}],"predecessor-version":[{"id":386,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/375\/revisions\/386"}],"wp:attachment":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/media?parent=375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/categories?post=375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/tags?post=375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}