3

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.

James W.
  • 154
  • 3
  • 13
  • Yes, you can check whether the video has audio or not using html5 audio/ video volume control.Hope this helps, https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_muted and https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_volume – Hema Nandagopal Aug 02 '17 at 13:26
  • 1
    As I understand the question, the point isn't checking that the video has audio or not, that's a fact: the video has no audio. The goal is rather to indicate that fact in some accessible way – QuentinC Aug 02 '17 at 15:32
  • That's correct @QuentinC. I could probably add an descriptive audio track but really after guidance on how best to say there is no audio. – James W. Aug 02 '17 at 15:34

1 Answers1

2

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.

  1. 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.

  2. 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

Adam
  • 17,838
  • 32
  • 54
  • IF the video is decorative, I would say aria-hidden=true rather than role=presentation. There is almost no interest to fill the buffer of screen readers with contents that are anyway totally uninteresting. Addiitionally, role=presentation basicly means "this element has no role" or "remove the default role this element should normally have". Put on the parent of the video, probably a div or something similar with no semantic significance, it won't have any effect. – QuentinC Aug 03 '17 at 16:37
  • 1
    @QuentinC The `aria-hidden` attribute should be privilleged to information not visible to any user (and not only to information not visible by AT users). The inheritance of the `presentation` role is quite hard to understand (https://www.w3.org/TR/wai-aria/roles#presentation) and seems to apply only to *required owned elements* which does not include the `video` element. For that reason, I change in favor of the `aria-hidden` attribute but i would rather have set the `presentation` role on the `video` element if it had been possible, like for `img` elements. – Adam Aug 03 '17 at 21:21
  • 1
    A decorative video without sound is totally uninteresting for a screen reader user anyway, so better is not to pollute uselessly the read information. I'm screen reader user myself, so I can tell you; that's the same as line numbers for code snippets. Look also at the techniques used to use text-based icons and you will see in that case that aria-hidden is applied to something visible to normal users but should be hidden to screen readers. For me that would be the same here if the video is effectively decorative. – QuentinC Aug 04 '17 at 06:42
  • @QuentinC The difficult aspect is that `aria-hidden` will remove the element from any assistive technology. For instance, an eye tracking device might need to activate the play/pause button even though the media is purely decorative. But I agree perfectly that in the current usage of ARIA, `aria-hidden` is better than `presentation` role. – Adam Aug 04 '17 at 13:30