Tips for connecting screen reader-friendly text with a video.js component, like the Play icon

When it comes to passing Section 508 accessibility testing for HTML pages with multiple embedded videos, the issue at hand involves a total of four videos. The problem was pinpointed as:

"The play button lacks any screen-reader identification of the video title that is about to be played."

The specific player being used in this instance is video.js with a Brightcove player implementation. The objective is for the screen reader to announce the video's title when tabbing to the play button before it is activated.

To address this, adding an aria-label line to a div enclosing the video code enables access for screen readers. However, users still need to tab again to reach the actual player controls, as the default tab order in the video.js code does not include these elements. Additionally, this method appears to disrupt logical tab ordering, where tabs cycle through all the div containers before returning to the play button of the first video. Attempts to fix this using tabindex numbers have proven ineffective as they are seemingly disregarded.

Answer №1

An innovative solution was discovered to address the issue of tabbing order with "advanced" embedding code:

  tabindex="0"

Simply adding this attribute to the div containers surrounding each block of video.js code effectively resolved the problem. To provide further clarity: This specifically pertains to Brightcove's "advanced" code format, which typically begins with

<video-js data-account= ...

in contrast to their "standard" code implementation that utilizes an iframe.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting HTML widget code to NEXTjs code for integration in an application (CoinMarketCap Price Marquee Ticker)

Having trouble integrating the CoinMarketCap Price Marquee Ticker Widget into my NEXTjs app. I'm outlining my process and hoping for some suggestions from others who may have attempted this. Template Code: To embed the widget in an HTML page, here is ...

What is the most effective method for informing the browser about changes in the database?

I've been working with django for about 6 months now and it has been effective for the websites I create. However, I recently encountered an issue while developing a website where users receive notifications whenever another user updates a blog post. ...

What is the best way to showcase objects within a specific timeframe determined by their time feature?

As part of my university project, I am working on showcasing the lecture times for students. I am exploring the best method to present this information accurately based on their time properties. The goal is to have each lecture's rectangle space cover ...

The async and await functions do not necessarily wait for one another

I am working with Typescript and have the following code: import sql = require("mssql"); const config: sql.config = {.... } const connect = async() => { return new Promise((resolve, reject) => { new sql.ConnectionPool(config).connect((e ...

Locate the internal IP address of an Express server

Currently, I have a Node express server up and running on Machine 1 with the IP address of (0.0.0.0). On separate machines such as Machine 2, 3, and others, there are client applications also connected to the same Wi-Fi network. My query is how do I obtai ...

I am interested in developing a select box with autocomplete functionality

Here is the HTML code I have: <select class="form-control" id="city" style="width:100%; margin-left:2%;"> <option>Sonal</option> <option>abcd</option> <option>3</option> <option& ...

Why is "this" not undefined even though I did not bind it in my function's constructor?

When I click my button, it triggers the onClick function below: <button onClick={() => this.onDismiss(item.objectID)} type="button" > The onDismiss function filters a list and updates my React application. Interestingly, I didn't bind th ...

Trouble with Multiple Google Maps in Bootstrap Modal

I'm currently working on a website that has the capability to display users' locations and generate maps based on their coordinates. I have successfully implemented the functionality for showing a single user's location on the map using moda ...

"The Material UI date picker is encountering an issue with the error prop, which is being evaluated

I have developed a date picker that utilizes the Jalali calendar. While attempting to pass error checking using the error prop in the following code: <LocalizationProvider dateAdapter={AdapterJalali}> <MobileDatePicker label={lab ...

methods for transforming JSON array output objects into individual non-array values

I'm facing an issue with a JSON result that contains latitude and longitude as an array like [13.0801721, 80.2838331]. I need help in converting this to comma-separated values without the array brackets, similar to 13.0801721, 80.2838331. This is my ...

A volume slide will decrease to zero if the 'mute' button is selected

Well, the title pretty much sums it up. I successfully managed to make it so that when you slide the volume to 0, it mutes the video. However, I am struggling with achieving this: if the video is muted, the volume slider should automatically move to 0. I ...

Unexpected outcomes when using three.js getWorldPosition method

Please check out the gist I put together over at https://gist.github.com/sparkbuzz/f1f8d0d8bbc7757b679f In this gist, you'll find a TypeScript class named OrbitControls. I've been delving into 3D and three.js to explore creating orbit-style con ...

Using Jquery to automatically populate an input field if the user already exists

I'm currently working on populating a form if the user input for name and firstname already exists in my database. However, I am facing an issue with my JavaScript program where it fails to check if the name and firstname combination already exists i ...

cannot wait for promise in loop to avoid delaying the request

In the API endpoint of a Next.js webapp, this code is designed to fetch all the GitHub repositories, including their names and number of contributors. However, an issue arises when using Promise.all - the call does not return anything (resulting in a stall ...

Issue: React error message indicates that the .map() function is not recognized. The API response is in the form of an object, making

As a newcomer to REACT.JS, I am currently facing the challenge of extracting data from an API for my project. Utilizing "Axios" for sending the get request, I have encountered a situation where the response comes back as an array in one API and as an objec ...

JavaScript: Display all global variables on Internet Explorer

Is there a way to retrieve the instance name of my class without passing it as a parameter? I have tried looping through all global objects and comparing them with the this pointer. This method works in Chrome and Firefox, but not in Internet Explo ...

The Django POST request is rejecting due to a missing or incorrect CSRF token, despite having included the token in the form

I'm encountering a 403 response when making a POST request despite including csrf_token in the data for an AJAX request. I made sure that csrf_token is not empty before sending the request, so everything seems correct. What could be causing this error ...

What is the best way to retrieve information utilizing Http.get within my project?

I have a TypeScript file containing user data: File path: quickstart-muster/app/mock/user.mock.ts import {User} from "../user"; export const USERS:User[]=[ new User(....); ]; I have a service set up at: quickstart-muster/app/services/user.service.ts ...

JavaScript code to allow two textboxes to be enabled at the same time when a checkbox is

One question I have regarding the code snippet below : <input id="myCheckBox" type="checkbox" name="alamatCat" onClick="apply(this.checked, 'textBox3', 'textBox4')"> OT Date </td> <td> From <input id="text ...

How to iteratively process JSON array using JavaScript?

I am currently attempting to iterate through the JSON array provided below: { "id": "1", "msg": "hi", "tid": "2013-05-05 23:35", "fromWho": "<a href="/cdn-cgi/l/email-pro ...