3

I think I understand the WCAG 1.2.5 Audio Description (Prerecorded) rule, but what I can't find a straight answer on is if what if the per-recorded background video provides no real value, like if it's just a short video of someone walking on a loop with no talking/audio. Does this rule still apply?

echristo66
  • 198
  • 1
  • 14

1 Answers1

6

Short Answer

Assuming the video serves no purpose other than decoration then you are safe to hide it with aria-hidden="true".

Longer Answer

While the above is perfectly valid for accessibility, there are other considerations from an accessibility perspective.

Do you provide a way to pause the video? If someone has an anxiety disorder then the video can be distracting so you must provide a way to pause the video. (or you could use the Prefers Reduced Motion media query and use that to stop the video auto playing, however the support is not fantastic at 80%.)

You should also add the muted attribute to indicate that the video has no sound to screen readers.

If the video does provide a purpose (i.e. it emphasises what the company does) then you should add a description to the video using aria-describedby and pointing that to a hidden <div> with a description of the video contents as a minimum.

Final Thoughts

If the video is purely decorative, has no meaning within the page and is there just to 'look cool' perhaps consider replacing it with an image. It will massively help your page load times and so can only help with conversions, video backgrounds hurt more than they help as they take focus away from your call to action.

Community
  • 1
  • 1
GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • 1
    Thanks for this and I don't disagree with your "Final Thoughts", I have given my opinion but I don't have final say. :) – echristo66 Jan 21 '20 at 20:35
  • 1
    For an element that is not hidden for everyone, I think that `role=presentation` might be a more suitable alternative than `aria-hidden` – Adam Jan 21 '20 at 21:52
  • `role="presentation"` only removes the semantics of an item, it doesn't indicate that an item is decorative. I am not sure where this started but it gets overused and misused, it is designed for things like lists and tables being used for layout (urgh) where you don't want the semantic meaning. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role – GrahamTheDev Jan 22 '20 at 06:28
  • Sorry that was a poor link, this article explains it a little better https://timwright.org/blog/2016/11/19/difference-rolepresentation-aria-hiddentrue/ as does this information from W3C https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role – GrahamTheDev Jan 22 '20 at 07:14
  • I share your point of view, but a purely decorative video has the same semantic meaning as a purely decorative image which is a `presentation` (=`none`) role. User with disabilities may want to interact with decorative elements (focus, zoom-in for instance) from their assistive technology. Yes that's purely theoretical. – Adam Jan 22 '20 at 09:26
  • it doesn't quite work like that, with an image you can have a blank alt attribute and add `role="presentation"` (although unneeded) that works fine, however if you put a blank track on a video element it starts announcing the video title etc. and adding `role="presentation"` does nothing as it isn't valid. If a user is interacting with an element through focus it isn't decorative so it shouldn't have `role="presentation"`. `role="presentation"` is not valid on a video so some testing tools will complain about it as well. Try it with any screen reader, it won't do anything. – GrahamTheDev Jan 22 '20 at 10:44
  • 1
    You're correct, ` – Adam Jan 23 '20 at 20:49
  • aaaah I get you now, forgot about object elements. Wondered why you were so adamant! Do people still use `object` for video? If they do I despair! – GrahamTheDev Jan 23 '20 at 22:45