Title: Visually hidden additional video switch
Last modified: March 20, 2024
---
# Visually hidden additional video switch
* [Brianna](https://wordpress.org/support/users/bneiderm/)
* (@bneiderm)
* [2 years, 2 months ago](https://wordpress.org/support/topic/visually-hidden-additional-video-switch/)
* Hi, I’m using this plugin for my client’s site, and they had an accessibility
audit performed by a third party company. They identified an issue that comes
directly from the plugin:
* > There are interactive controls that are not visible therefore without a visible
> keyboard focus indicator: “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.
* Is there an accessibility-related reason for this button that I can communicate
to my client and the auditors? If not, I’ll just programmatically hide the button.
Viewing 6 replies - 1 through 6 (of 6 total)
* Plugin Author [Ford Foundation](https://wordpress.org/support/users/fordfoundation/)
* (@fordfoundation)
* [2 years, 2 months ago](https://wordpress.org/support/topic/visually-hidden-additional-video-switch/#post-17516198)
* 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!
* Thread Starter [Brianna](https://wordpress.org/support/users/bneiderm/)
* (@bneiderm)
* [2 years, 2 months ago](https://wordpress.org/support/topic/visually-hidden-additional-video-switch/#post-17516456)
* 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:
* ```wp-block-code
this.switchControls.forEach( switchControl => {
const cloneBtn = switchControl.cloneNode(true);
cloneBtn.classList.add('visually-hidden');
this.node.prepend(cloneBtn);
} );
```
* Plugin Author [Ford Foundation](https://wordpress.org/support/users/fordfoundation/)
* (@fordfoundation)
* [2 years, 2 months ago](https://wordpress.org/support/topic/visually-hidden-additional-video-switch/#post-17519065)
* 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!
* Thread Starter [Brianna](https://wordpress.org/support/users/bneiderm/)
* (@bneiderm)
* [2 years, 2 months ago](https://wordpress.org/support/topic/visually-hidden-additional-video-switch/#post-17522122)
* 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]``[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]`
`[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.
* Plugin Author [Ford Foundation](https://wordpress.org/support/users/fordfoundation/)
* (@fordfoundation)
* [2 years, 2 months ago](https://wordpress.org/support/topic/visually-hidden-additional-video-switch/#post-17529877)
* 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.
* Plugin Author [Ford Foundation](https://wordpress.org/support/users/fordfoundation/)
* (@fordfoundation)
* [2 years, 1 month ago](https://wordpress.org/support/topic/visually-hidden-additional-video-switch/#post-17711096)
* Hi Brianna — Wanted to give a quick update. We chatted with a few different advisors,
including the experts at the [Constellation Collective](https://www.theconstellation.co/),
and have a potential solution in the works. Will hopefully have an updated version
of the plugin available soon.
Viewing 6 replies - 1 through 6 (of 6 total)
The topic ‘Visually hidden additional video switch’ is closed to new replies.
* 
* [Video Accessibility](https://wordpress.org/plugins/video-accessibility/)
* [Support Threads](https://wordpress.org/support/plugin/video-accessibility/)
* [Active Topics](https://wordpress.org/support/plugin/video-accessibility/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/video-accessibility/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/video-accessibility/reviews/)
* 6 replies
* 2 participants
* Last reply from: [Ford Foundation](https://wordpress.org/support/users/fordfoundation/)
* Last activity: [2 years, 1 month ago](https://wordpress.org/support/topic/visually-hidden-additional-video-switch/#post-17711096)
* Status: not resolved