question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

WCAG 2.1 compliancy: Disable keyboard controls for embedded player

See original GitHub issue

Expected Behavior

A parameter for the embedded Vimeo player to disable keyboard controls similar to Youtube’s disablekb https://developers.google.com/youtube/player_parameters

This is needed to be WCAG 2.1 compliant (accessibility). https://www.w3.org/WAI/WCAG21/Understanding/character-key-shortcuts

Actual Behavior

No such parameter exists for Vimeo: https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters https://developer.vimeo.com/player/sdk/embed

Steps to Reproduce

Visit https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters And you will see there exists no parameter to disable keyboard controls for the embedded player.

This prevents using the player on websites that require WCAG2.1 compliancy level A (the lowest rating).

Even better would be to make the controls disabled by default, and add the parameter to enable keyboard controls.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:74
  • Comments:24 (4 by maintainers)

github_iconTop GitHub Comments

42reactions
rianrietveldcommented, Jul 7, 2021

Thank you @bskibinski, I agree with this 100%.

When embedding a Vimeo video on a webpage, the video has shortcuts, for e.g. to like, set fullscreen etc. These are one character shortcuts. These shortcuts can not be disabled.

It is important this shortcuts can be disables, because they hinder the shortcuts of assistive technology like a screen reader.

This is also a violation of the Web Content Accessibility Guidelines (WCAG), version 2.1, level A: Success Criterion 2.1.4: Character Key Shortcuts.

This Success Criterion states: If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

  • Turn off: A mechanism is available to turn the shortcut off;
  • Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc);
  • Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.

All of these options are not available in the Vimeo settings at the moment.

Therefore Vimeo videos can not be used for websites that need to comply to WCAG 2.1. Vimeo can not be used for government and public service websites in the EU and the UK at the moment. And many more in the future.

Please add a way to disable the shortcuts, Like @bskibinski said: just like the option YouTube offers with the parameter disablekb=1 or by making the controls disabled by default, and add the parameter to enable keyboard controls.

More information can be found on the W3C website: Understanding Success Criterion 2.1.4: Character Key Shortcuts

Related https://github.com/vimeo/player.js/discussions/673

19reactions
rkrishnan8594commented, Jul 7, 2021

Hey all - I want to thank everyone for raising awareness about this gap in the Vimeo API and its impact on WCAG compliance. It’s important to us that the player is at the forefront of accessibility standards and that our libraries enable developers to build accessible experiences.

To that end, we have this issue on our radar and a solution involving adding a new parameter is queued up for development work within the next 1-2 weeks. I’ll keep this thread posted as we make progress and have more updates to share.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Web Content Accessibility Guidelines (WCAG) 2.1 - W3C
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible.
Read more >
Web Accessibility and Third-Party Video Players: 4 Tips
Third-party video players are a common cause of keyboard traps, which occur when keyboard-only users navigate to the controls of the video.
Read more >
Accessibility and usability considerations for disabling buttons ...
HTML buttons and inputs accept a Boolean disabled attribute. This stops the element from receiving events like clicks and keyboard focus.
Read more >
Web Accessibility Criteria - Embedded Content
Do not disable scrolling for iframes and frames. Avoid keyboard traps within a frame or iframe; Iframes should also be designed with distinct...
Read more >
2.1 Keyboard Accessible (Level A)
WCAG 2.1 acknowledges that some tasks cannot reasonably be done with a keyboard, such as real-time flight simulations. Tasks that depend on continuous,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found