html5-videoaccessibilityclosed-captions

Making a video accessible when used as a background

I am trying to make an existing website accessible but I'm struggling with a banner that has a video background streamed from vimeo. I found an identical issue in this SO thread Making a video element with no sound accessible. The poster stated that axe Tools failed the video as it had no captions - the same situation I face.

The accepted answer does not solve that issue though. Setting a parent element to aria-hidden has no impact on axeTools. I need to make the site accessible but also to pass an audit. Does anyone know a way to do this? It seems to me that WCAG is not well thought out here as it seems to have no video equivalent to alt="" or aria-role="presentation" as it does for images when a video is purely decorative and conveys no meaningful information.

Solution

  • Ignore axe or any other automated testing tool for the moment because they often have errors in their reporting. Axe-like tools are not the standard for measuring accessibility. WCAG is. Using a human and the Web Content Accessibility Guidelines is your sure source to know if you are conformant or not.

    In this case, you have two guidelines that apply.

    For the first, it says:

    Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.

    So two key points here are:

    1. You can either have an alternative for time-based media (which is often a transcript, and in this case you could have a transcript that describes what is going on in the video) or you can have an audio track that describes the same thing.
    1. You only need this alternative if the video has meaning. The guideline says the alternative must provide "equivalent information". So what's the purpose or meaning of the video? Does it provide information or is it decorative? If the video were removed, would critical information be lost? If it's purely decorative and doesn't provide anything, then the "equivalent information" would essentially be "nothing". The video could be hidden from assistive technology. But you'd want to talk to your designers about the purpose or meaning of the video.

    The second guideline, 2.2.2, says if there's moving content (usually an animation but a video counts as moving information), then the user needs a way to stop it. That's normally done with a pause button on the video but it could be done with lots of other ways.

    In summary, you need to decide the purpose of the video and whether it conveys information, and if so, decide what an "equivalent" experience would be, and also provide a way to pause the video.