videojs/video.js

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

Open

#7,688 创建于 2022年3月22日

在 GitHub 查看
 (2 评论) (0 反应) (0 负责人)JavaScript (39,742 star) (7,502 fork)batch import
a11ygood first issue

描述

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)

贡献者指南

技术栈
javascripthtmlcss
领域
accessibility
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
half day
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
mostly clear
前置要求
HTMLARIA attributesJavaScript DOM
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
60
研究方向
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.
A11Y - Broken ARIA menu on Chapters and Closed Captions (Web Accessibility) · videojs/video.js#7688 | Good First Issue