Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A11Y - Broken ARIA menu on Chapters and Closed Captions (Web Accessibility) #7688

Open
dave105010 opened this issue Mar 22, 2022 · 2 comments
Labels
a11y This item might affect the accessibility of the player good first issue

Comments

@dave105010
Copy link

dave105010 commented Mar 22, 2022

Description

WAVE Accessibility Tester
and
This example official video.js page: https://videojs.com/city or wherever video.js is loaded

brings up a Broken ARIA menu "Error" on the following hidden player options if they are not used (no chapters added or no CC added etc.).

  1. Chapters
  2. Closed Captions
  • Maybe Captions or CC related ul tags(vjs-menu-content) shouldn't be appended to the video.js div(vjs-menu) if they are not used?

  • or as a second option? role=menu attribute shouldn't be added to the "vjs-menu" div's "vjs-menu-content" ul tag if the "unordered list(ul tag)" doesn't have any children(when there are no captions or no chapters added)

Considering 90% of the time people don't add Chapters or Closed Captions. This accessibility error shows up almost all the time on all video.js instances.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

  1. Go to https://videojs.com/city
  2. Activate WAVE Accessibility Tester (WAVE Chrome Plugin can be used to test this error)
  3. Broken ARIA Menus are visible and can be seen/reproducible after turning the "style" off on the WAVE accessibility tool. (see screenshots below)

Results

Expected

There shouldn't be any ARIA errors.

Actual

There are Accessibility errors due to the "role=menu" div having zero children.

Error output

If there are any errors at all, please include them here.

Screen Shot 2022-03-21 at 6 01 13 PM

Screen Shot 2022-03-21 at 6 01 49 PM
Screen Shot 2022-03-21 at 6 02 03 PM
Screen Shot 2022-03-21 at 6 02 30 PM
Screen Shot 2022-03-21 at 6 03 00 PM

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

what version of videojs does this occur with?

  • All versions starting from 7.0.8 to 7.18.1(The Latest Version)

browsers

what browser are affected?

  • All browsers

OSes

what platforms (operating systems and devices) are affected?

  • All OSes

plugins

are any videojs plugins being used on the page? If so, please list them below.

  • Not applicable (N/A)
@welcome
Copy link

welcome bot commented Mar 22, 2022

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

@mister-ben
Copy link
Contributor

Thanks. Setting/unsetting the role here is probably enough.

if (this.items && this.items.length <= this.hideThreshold_) {
this.hide();
} else {
this.show();
}

@mister-ben mister-ben added the a11y This item might affect the accessibility of the player label Mar 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y This item might affect the accessibility of the player good first issue
Projects
None yet
Development

No branches or pull requests

3 participants