Accessibility issues with Cornerstone's video player

Support
#1

Hello,
I have an issue with Cornerstone’s video player.

This is the website: https://wheninculture.com.

We are testing the tab index by tabbing down from the logo (top left), all the way down the page. When we reach the “Hear from Students Like You” section, the tab highlight “disappears”. It focuses on the video poster but it doesn’t show the outline (unlike the buttons and other links). How do I make it appear?

Subsequent tabs will lead to the player’s PLAY button and progress bar. Then it takes you to the next video poster, PLAY button, and progress bar.

How do you create the outline when the video poster, PLAY button, and progress bar are in focus?

Thank you in advance.

#2

Hello @Stabal,

Thank you for the inquiry.

Since the video poster is a Div element, unlike links and buttons, it doesn’t have a focus style by default. You’ll have to apply the style manually, either in the Custom Code > Global CSS field or in the Customize > Element CSS field of the element.

In the Element CSS field, you can try something like this:

$el:focus {
   border: 2px solid blue;
}

This type of customization is usually outside the scope of support, so if you require further help, please check out One service.

Best regards,

#3

Thank you @Ismael. The suggestion works for the PLAY button and progress bar. But I cannot get it to work for the video poster. Let me explain.

Kindly visit the site and tab sequentially down. After the “Get Started” button (“Hear from Students Like You” section), it goes missing. Then the next tab will highlight the PLAY button. How do you find out which CSS class is impacted when it “disappears”?

Right now, I have the below CSS:

.mejs-video .mejs-layer:focus,
.mejs-video .mejs-overlay-play:focus,
.mejs-button button:focus,
.mejs-time-total:focus{
  outline: 3px solid #007bff; /* Blue outline for high visibility */
  outline-offset: 2px; /* Adds space between outline and button */
  background-color: rgba(43, 101, 224, 0.5); /* Light background change */
}

The CSS just doesn’t seem to impact the video poster when the TAB focuses on it.

#4

Hey Erica,

My colleague forgot that you need to add tabindex with value of 0 Custom Attribute to the Video element for the Element CSS to work. Watch the video below to see how it works.

image
image551×582 16.2 KB

https://youtu.be/MjhtY9oTkzk

Please note that custom CSS is beyond the scope of our support. If you need custom styling, please consider subscribing to our One service.

Thank you.

#5

Thank you @christian

#6

You are most welcome, Erica.