Player - Slide | Accessibility issue

[tiphaine-dfr]

WCAG Information

• WCAG Guideline Reference No: 2.4.6 Headings and Labels
• WCAG version: 2.1
• WCAG level: AA

Testing environment

• MAC OS X - Chrome - ARC plugin

Steps to reproduce

• As a logged out user, open https://www.perlego.com/institutions/
• Use ARC plugin
• Observe that there is an accessibility issues with the sliders:

Issue explanation

The error occurs because the embedded web player contains two sliders (role="slider") with identical or overlapping aria-label attributes: "Progress Bar" and "Volume (use up/down arrow keys to change)". While these labels are intended to describe separate controls, their implementation may lead to confusion for users of assistive technologies.

Actual Behaviour

Duplicate labels used
Description: The form contains multiple fields with the same label text.
WCAG 2.1 Success Criterion:AA 2.4.6 Headings and Labels External link
frame:
<div class="FocusTarget_module_focusTarget__4fd67130 shared_module_focusable__450f8d3a" role="slider" aria-label="Progress Bar" aria-valuemin="0" aria-valuemax="67" aria-valuenow="0" aria-valuetext="00:00 of 01:07" tabindex="0" data-progress-bar-focus-target="true"></div>
html/body/div/div[7]/div[8]/div[2]/div/div[1]/div/div[1]
frame2: https://player.vimeo.com/video/1017638334?h=a95b910aactabindex: 0
frame:

<div role="slider" class="VolumeControl_module_volumeControl__a0c94891 volume shared_module_focusable__450f8d3a" tabindex="0" aria-label="Volume (use up/down arrow keys to change)" aria-valuenow="100" aria-valuetext="100% volume" aria-valuemin="0" aria-valuemax="100" data-volume-control="true" style="overflow: hidden; opacity: 0; pointer-events: none;"></div>
html/body/div/div[7]/div[8]/div[2]/div/div[2]/div/div/div[1]/div

frame2: https://player.vimeo.com/video/1017638334?h=a95b910aactabindex: 0

Expected Behaviour / Recommendation

Recommendations

1. Provide Unique and Descriptive aria-label Attributes
   To ensure clarity, update the aria-label attributes to distinguish between the controls. For example:

Progress Bar:

html
Copy code

Volume Control:

html
Copy code

2. Add aria-describedby for Additional Context For enhanced clarity, you can add aria-describedby to point to additional text descriptions that provide context.

Example:

html
Copy code

Use left and right arrow keys to adjust the playback position.

3. Ensure Controls Are Clearly Separated Visually While this is primarily an accessibility issue, separating controls visually also helps reinforce clarity for all users.

Summary of Fixes
Assign unique and descriptive labels (aria-label) to each interactive element.
Optionally, use aria-describedby to supplement labels with additional instructions or descriptions.
Test the updated labels and descriptions with a screen reader (e.g., NVDA or VoiceOver) to ensure they are clear and usable.
These changes will resolve the Duplicate Labels Used issue and ensure compliance with WCAG 2.1 Level AA.