I am currently working on a web page with a silent video banner.
I am using the aXe Chrome browser plugin that highlights potential accessibility issues with the content of the page and it's throwing two issues related accessibility for the video element:
Ensure <video> elements have captions
Ensure <video> elements have audio descriptions
I just wanted to know if there are any recommendations in communicating that the video element has no audio in an accessible way.
video accessibility has two concerns : captions for replacing sound, and audio decription (or textual alternatives) for describing the images.
The fact that your video is silent does not mean that you do not need a textual description of what appears in the video.
In your case, I would look at the attribute controls="muted" which can be an hint for indicating assistive technologies that a video does not have currently any sound.
I will choose between one of the following:
a) I will set the aria-describedby attribute on the video element to point to the div containing the description.
b) OR If your video is only decorative, then I would set the aria-hidden=true attribute on a parent element
Related
I am developing an application where I need to display some animation in the canvas along with the video as a separate element, for the same I need to maintain the synchronisation between two DOM elements very precisely.
I was thinking of playing the animation as video tag plays the video. Is there any way I could see how the html5 video tag is implemented?
Theoretically, each browser can have their own implementation of the video tag. Besides of that, they will try their best to follow some rules specified by w3.org
This is the video tag draft:
https://www.w3.org/TR/2011/WD-html5-20110113/video.html#video
If yout want to sync something with a video you will want to use some video tag events:
https://www.w3.org/2010/05/video/mediaevents.html
A timeupdate event listener can be set on the video which will allow you to synchronize other elements on the page with the video as it plays. Video elements have many other events in addition to timeupdate, such as play, pause, and seeking.
The implementation of video elements will differ depending on the browser and may not be completely public, such as how they work with DRM.
our clients gave us a video that is mostly B-roll so they are saying they do not need to add captions to make is ADA compliant, but I'm not sure that is true. I know for images, if it's purely decorative you just leave your alt tag empty, but does the same rule apply to videos? Or do they still need to have captions describing what is going on in the video even though it's mainly decorative?
According to WCAG
1.2.3 Audio Description or Media Alternative (Prerecorded): An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)
The video may be secondary but screenreader users or hard of hearing people for instance have the right to access the description of what happens in the video (i.e. audio-description). If nothing happens in the video, I would really wonder why people want to publish such video.
Is there a good way of using JWplayer to instantiate a video tag in stead of a plain div?
Here's a support thread (https://support.jwplayer.com/customer/portal/questions/6062676-jw-player-not-working-with-video-tag), but basically JW admin comes back and tells the OP to not use a video tag at all.
This is the example markup from JW:
<div id="myDiv">This text will be replaced with a player.</div>
<script>
jwplayer("myDiv").setup({
"file": "http://example.com/myVideo.mp4",
"image": "http://example.com/myImage.png",
"height": 360,
"width": 640
});
</script>
SEO wise, this is utterly useless, the video won't get crawled if it's only instantiated into a plain div by JavaScript after page load.
What I want to do is to have a proper video tag on the page and then instantiate a JW player instance from it. This way the video tag is visible to crawlers without it having to execute JS (which not all do)
The JW Team removed the "support" for embedding over the <video> tag in the upgrade from JW5 to JW6, primarily because they were experiencing too many support issues with embeds failing as a result of conflicts between the initial <video> tag loading and what their code was trying to do.
I wrote an article in 2012 which explains the problem they were faced with: http://powered-by-haiku.co.uk/?p=1
Rather than fix it, they decided to go with the current embed into <div> solution.
Now, you can still technically embed over a <video> tag with JW6 and JW7 - you just need to ensure the "preload" attribute is set to "none" in the original tag, and that this video is also not set to autostart.
However, in terms of SEO using the current JW approach, there is still a way to allow search engines to index and show your videos in search - actually the biggest issue with the move away from embedding over native <video> tags is to do with accessibility - not SEO.
Check out https://developers.google.com/webmasters/videosearch/schema#adding-videoobject-to-a-video-page for details of how to add schema.org markup to your page to support video tagging.
Ideally, in time, JW will allow a built-in means to progressively enhance this Schema.org metadata and build a JW config object dynamically (like they used to do with the video tag) - as it stands however, you'd either need to do that yourself or duplicate the associated information.
Either way, the accessibility issue still exists!
I have an audioless video implemented using HTML5's <video> tag. I'm trying to find out if auto-playing the video and automatically looping it (assuming I add a button to remove loop as well) would cause accessibility issues? I know there are rules regarding audio as well as video with audio that prevent you from doing that, so I'm also wondering if this video is practically considered a GIF.
The video can be found here for reference:
http://www.med.uottawa.ca/bmi/eng/lee.html
This is technically an accessibility violation if it plays for more than 5 seconds. It affects users with disabilities such as attention deficit disorder. You need to provide a button to stop the video from playing immediately, not only a button that disables the automatic loop.
Update: This question is no longer valid. See comment below.
YouTube embedding is done using iframes nowadays.
HTML5 introduces the seamless attribute, that not only should affect presentation, but make the integration with the host page tighter. (It should not be announced to screen readers as a separate document.)
HTML5 introduces the sandbox attribute, that restricts the iframe and thus improves security.
In a world where browser support for these 2 attributes is complete, will they benefit or in any way adversely affect the page, when embedding YouTube videos? (Yes, the last half of the question is primarily about seamless.)
I am thinking about recommending my students to always use these 2 attributes for YouTube videos and benefit automatically as browser support becomes available.
I'll focus on just discussing the sandbox attribute.
To play YouTube videos in a sandbox you need to do the following:
Add sandbox="allow-scripts allow-same-origin"
Add ?html5=1 to the video URL
A problem with #1 is that Flash will not be loaded; whether Flash is required depends on a few things, such as the end-user's browser, their YouTube settings or when a video is simply not available as an HTML5 video (this is worsened by #2).
Another (more serious) problem with #1 is that the combination of allow-scripts and allow-same-origin effectively removes any security benefit you would have otherwise enjoyed.
Conclusion
Forget about using the sandbox attribute for YouTube video embedding.
Further reading
HTML5 Sandbox and some notes
Error playing embedded youtube video in a sandboxed iframe
No, fullscreen does not seem to work with both attributes enabled, if you are in the HTML5 beta check an example here:
http://bcmoney-mobiletv.com/view/2133/monty-python-tax-sketch/
However, when I leave the HTML5 beta program it plays back in the standard YouTube Flash player, which ignores those iFrame attributes completely.
So, it really depends what your goals are. If you want added security and an experience that feels more like an in-page web video that is controlled by your page, go ahead and use those attributes, however, if you want to give the user a full range of controls and options, leave off sandbox and/or seamless.