videojs/video.js

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

Open

#7,688 opened on Mar 22, 2022

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (39,742 stars) (7,502 forks)batch import
a11ygood first issue

Description

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)

Contributor guide

Tech stack
javascripthtmlcss
Domain
accessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
HTMLARIA attributesJavaScript DOM
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the creation of menu elements for Chapters and Closed Captions in video.js. Look for where the ARIA role='menu' is added and ensure it is only added when the menu has children. The relevant code is likely in the menu component files (e.g., src/js/menu.js or similar). The issue suggests two approaches: either conditionally append the ul element or conditionally add the role attribute. Review comments in the issue for any further guidance.