<video> elements must have captions (Impact: Critical) (WCAG 2.0 A)

Feature Requests / Improvements
1

When adding a background video to a container (Style > Background > Background Video) it triggers an accessibility audit issue:

Problem:
<video> Elements Require <track> For Captions (WCAG 2.0 A)

Impact:
Critical

Source:

Bricks Version:
2.4.2

This may apply to other areas where Bricks inserts <video> elements.

I guess we need to be able to mark a video element as being decorative and have the ability to add captions?

2

Are you playing audio on the background video?

3

No, there is no audio on the background video.

4

Hi Jamie,
Thanks for the additional report.

I tested a background video with Axe DevTools but couldn’t reproduce the reported warning.

Could you share the affected page URL and the exact audit tool/version and result? This will help us test the same setup.

5

Hi

The website is not yet public. We used Screaming Frog, which I believe uses AXE accessibility engine. Can I send over access details privately to you?

Thanks
Jamie

6

If there’s no audio what would you need to caption? It’s just a false positive. The vast majority of WCAG pass/fails cant be determined by automated tests and need manual intervention - this is one of those cases.

8

That’s why I would like to be able to mark such a video as decorative / aria hidden

9

Please send the login credentials and details so we can see where the problem is, and a screenshot of the screaming frog notice to help@bricksbuilder.io :v:

10

I have done just that :+1:

11

Thanks for sending the details. I inspected the background video on your page. It uses autoplay, loop, playsinline and muted, with no caption track.

The key detail in your Screaming Frog screenshot is that the captions notice appears under Incomplete, rather than Fail. This means it requires manual review. “Critical” describes the potential impact of missing captions when they are needed; it doesn’t confirm a critical accessibility failure on this page.

WCAG 1.2.2 requires captions for prerecorded audio content in synchronized media. As you’ve confirmed that this background video has no audio, there is nothing to caption.

Your suggestion to mark a background video as decorative makes sense. There’s currently no dedicated option for this in the background video control, but you can use the following workaround:

  1. Add the CSS class decorative-background-video to the container that has the background video.
  2. Add this snippet under Page settings → Custom code → Body (footer) scripts:
<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll(
    '.decorative-background-video > .bricks-background-video-wrapper video'
  ).forEach((video) => {
    video.setAttribute('aria-hidden', 'true')
  })
})
</script>

This adds the attribute directly to the self-hosted background <video>. Please don’t add aria-hidden="true" through the container’s Custom attributes control: that would also hide the container’s headings, links and other content from screen readers.

Use this only when the video is decorative and carries no information visitors need. After adding the snippet, rerun Screaming Frog with JavaScript rendering enabled so it can inspect the updated DOM.

12

Thanks for looking at this and for your thorough explanation and workaround.