Visually hidden additional video switch

Hi Brianna,

To confirm what’s happening: the video does not have a second video associated with it. Because there’s no second video associated with it, the “Switch to video with audio description” button is not visible. Despite the button not being visible on the screen, that button is still keyboard navigable and appears to screen readers.

If this is the case, then this is a bug we need to fix within the plugin. Please hide the button in the meantime.

If this is not the case, can you please send a link to a sample page that’s experiencing this issue?

Thank you!

Hi, actually, there is a visible button that correctly swaps the video between primary and secondary, but a duplicate button appears with the class “visually-hidden” that hides in the top left of the video.

The site is still in development and has IP-driven password protection on it. In lieu of the link, here’s a screen recording of me tabbing through the block with my computer’s VoiceOver on:

I’ve identified where in the plugin code this is coming from, but am unsure of its purpose. /src/blocks/block/view-script.js lines 46-50:

this.switchControls.forEach( switchControl => {
	const cloneBtn = switchControl.cloneNode(true);
	cloneBtn.classList.add('visually-hidden');
	this.node.prepend(cloneBtn);
} );

Hi Brianna,

Thank for the video showing what’s happening. Yes, that visually hidden button is there intentionally when there is an audio-described video.

We put it there as the very first item in the DOM order so a screen reader user would have an indicator that there was an audio described video available before potentially hitting play on the video that loaded. This was a way to offer up the toggle to keyboard/screen reader users as their first interaction.

If the visually-hidden button wasn’t there, a screen reader or keyboard only user would get to the first YouTube Video then have to navigate through all of those buttons and eventually would get to the button that switches videos. They would have no indication that a video has a secondary (audio described) version until after they’ve potentially tried to watch/play the first video.

Question for you: was the audit done manually (a human inspecting the code line by line) or with accessibility auditing tools? We’ve audited our site with a variety of different tools and none of them had previously flagged this as an issue. Very curious about what else might have been flagged.

Thanks again!

Thanks for that explanation!

There was both automatic and manual testing through Level Access. It hit 2 violations, both at rather high severity levels. Below are the full explanations from them for each. Please let me know if you agree or disagree with their assessment. I think your reasoning makes a lot of sense, but I also agree with some of the points the auditors made. Maybe there’s a way to achieve both?

• Violation 1: Ensure keyboard focus is indicated visually
  • Description:
    [Issue]
    There are interactive controls that are not visible therefore without a visible keyboard focus indicator. Examples include: “Switch to video with audio description” button that is visually hidden right before the video frame
    [User Impact]
    Keyboard users will have difficulty determining their position on the page.
    [Code Reference]
    <button type="button" class="wp-block-button__link visually-hidden" data-control="switch"><span class="video-accessibility__control-text">Switch to video with audio description</span><span class="video-accessibility__control-text video-accessibility__control-text--switch" hidden="">Switch to video without audio descriptions</span></button>
    [Steps to Reproduce]
    1- Press Tab repeatedly until the control is focused.
    2- Notice that there is no visual indicator that the control is there or that it is focused.
    [Recommendation]
    Make sure that the control is visible. Ensure keyboard focus is indicated visually. When interactive controls receive focus, the control must appear on screen and a visible focus indicator must be present.
    Focus can be indicated in a variety of ways. Most commonly, the browser default outline is used. To use the browser default, remove any outline: none or outline: 0 CSS declarations. Alternatives to the browser default outline include underlines, a change of background, and borders. A custom focus indicator must have a minimum contrast ratio of 3.00:1 against the background.
• Violation 2: Ensure the focus order of interactive elements on the page is logical
  • Description:
    [Issue]
    The following focus order is illogical:
    1. Jump to section. 2. Visually hidden “Switch to video with audio description” button. 3. Video iframe and its content.
    [User Impact]
    Screen reader users and keyboard users will have difficulty efficiently navigating the site.
    [Code Reference]
    <button type="button" class="wp-block-button__link visually-hidden" data-control="switch"><span class="video-accessibility__control-text">Switch to video with audio description</span><span class="video-accessibility__control-text video-accessibility__control-text--switch" hidden="">Switch to video without audio descriptions</span></button>
    [Steps to Reproduce]
    1- Press Tab repeatedly until the control is focused.
    2- Notice there is a hidden control getting focused.
    [Recommendation]
    Make sure that the control is visible. Ensure keyboard focus is indicated visually.

Thank you for the detailed violation explanations! We’re regrouping as a team to see how to best remedy these and plan on having an update soon.

Hi Brianna — Wanted to give a quick update. We chatted with a few different advisors, including the experts at the Constellation Collective, and have a potential solution in the works. Will hopefully have an updated version of the plugin available soon.