Embedded Player - Title_module_portraitLink | Accessibility Issues

[tiphaine-dfr]

WCAG Information

• WCAG Guideline Reference No: 4.1.2 Name, Role, Value
• WCAG version: 2.1
• WCAG level: A

Testing environment

• MAC OS X - Chrome - ARC plugin

Steps to Reproduce

• As a visitor to https://www.perlego.com/institutions/
• Use ARC plugin
• Observe that the embedded player has an accessibility issue.

Actual Behaviour

Non-active element in tab order
Description: The element has been placed in the Tab order using tabindex="0", but it lacks a specific role="..." attribute.
WCAG 2.1 Success Criterion:A 4.1.2 Name, Role, Value External link
frame
<div variant="minimal" tabindex="0" class="Title_module_portraitLink__b135ea6e shared_module_focusableCircle__450f8d3a"></div>
frame2: https://player.vimeo.com/video/1017638334?h=a95b910aactabindex: 0
frame

<div variant="minimal" tabindex="0" class="Title_module_subtitle__b135ea6e shared_module_focusable__450f8d3a"></div>
html/body/div/div[7]/div[4]/header/div[2]/div[2]

#Issues explanation:
The error occurs because a non-interactive

element has been placed in the tab order with tabindex="0", but it lacks a semantic role (role="...) to inform assistive technologies of its purpose. This results in confusion for screen reader users, as they cannot discern the element's purpose or interaction.

Expected Behaviour

No Accessibility issues.

ChatGPT suggestion:

Context-Specific Suggestions
Case 1: Title_module_portraitLink
This element might be acting as a clickable link or button. In that case:

Replace the

with a semantically correct (for links) or (for actions).
Add proper attributes for accessible functionality.
Example for a link:

html
Copy code

Title or label for the link

Example for a button:

html
Copy code

<button type="button" class="Title_module_portraitLink__b135ea6e shared_module_focusableCircle__450f8d3a">
  Title or label for the button
</button>

Case 2: Title_module_subtitle
If this element is purely decorative or non-interactive:

Remove tabindex="0". Non-interactive elements should not be part of the tab order.
If the element has any meaningful content, ensure it is correctly communicated using semantic HTML.
For decorative content:

<div class="Title_module_subtitle__b135ea6e shared_module_focusable__450f8d3a" aria-hidden="true"></div>
For meaningful content: If it needs to be part of the tab order (e.g., for focus or assistive tech), provide a role and/or additional accessible properties.

<div role="region" aria-labelledby="subtitle" tabindex="0" class="Title_module_subtitle__b135ea6e shared_module_focusable__450f8d3a">
  <span id="subtitle">Subtitle or description here</span>
</div>

Video iFrame Example (frame2)
For embedded videos (e.g., Vimeo):

Ensure the iframe has a title attribute describing its purpose.

<iframe 
  src="https://player.vimeo.com/video/1017638334?h=a95b910aactabindex:0" 
  title="Video title or purpose description" 
  tabindex="0"
  frameborder="0" 
  allowfullscreen>
</iframe>

If the iframe is interactive (e.g., it has controls):

Confirm the video player meets WCAG requirements (e.g., keyboard accessibility, focus management).
If the iframe is purely decorative or not required in the tab order:

Remove tabindex="0":

<iframe 
  src="https://player.vimeo.com/video/1017638334?h=a95b910aact" 
  title="Video title or purpose description" 
  frameborder="0" 
  allowfullscreen>
</iframe>

Summary

• Replace non-interactive
  with semantic elements (

or ) if interactive.

Remove tabindex="0" from non-interactive elements that should not be focusable.

Add roles and accessible names to interactive elements if div is used for a specific reason.

For iframes, ensure they have a descriptive title and remove unnecessary tabindex="0".