Do YouTube and Vimeo Meet WCAG 2.1 Keyboard Accessibility Guidelines?

Introduction

A screenshot of the WCAG 2.1 webpage.

The World Wide Web Consortium’s Web Content Accessibility Guidelines 2.1

 

In June 2018 the World Wide Web Consortium (W3C) released the updated Web Content Accessibility Guidelines (WCAG 2.1). The W3C is the main international standards organization for the World Wide Web that develops protocols and guidelines that ensure long-term growth for the Web. It was founded by Tim Berners-Lee, the inventor of the World Wide Web.

The WCAG 2.1 provide guidance to developers to make the Web accessible to people with disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. While the guidelines strive to make accommodations for all different types of abilities, they cannot address every degree and combination of disability. However, they do improve usability for most people.

The WCAG are arranged in a hierarchy of layers, overseen by four key principles: Perceivable, Operable, Understandable, and Robust (POUR). Under the principles are nested guidelines, testable success criteria (A (lowest), AA, and AAA (highest)), and techniques. For the purposes of this blog post, I have broadly evaluated two popular Web video platforms, YouTube and Vimeo for their adherence to Guideline 2.1, Keyboard Accessibility, under the Operable principle.

 

YouTube

A screenshot of the YouTube homepage with personalized recommendations for channels.

Personalized YouTube homepage

 

YouTube seems to meet all Guideline 2.1 standards; it’s broadly Keyboard accessible, including the following functionalities:

  1. Use arrow keys to navigate up and downKeyboard arrow keys, as well as the Page Up and Page Down keys on an extended keyboard allow scrolling the full length of the page.
  2. Tab to highlight linksUsing the Tab key successively highlights each clickable link on the page. Using Shift + Tab reverses the order of selection of links. In YouTube, this includes highlighting all controls within the video watching window, like stop, play, volume, CC, and settings.
  3. Enter to select linksPressing the Enter acts as a click on a link and follows that link.
  4. Shift + F10 for link menuWhen a link is selected with the Tab key, pressing Shift + F10 functions the same way as a right-click from a mouse, bringing up a menu of possible actions to take on that link, including copy link address, open link in new tab, etc.

 

Vimeo

A screenshot of Vimeo's Staff Picks Watch page.

Vimeo’s Staff Picks Watch page

 

I found Vimeo to be less Operable by keyboard than YouTube. Vimeo has the following functionalities:

  1. Use arrow keys to navigate up and downKeyboard arrow keys, as well as the Page Up and Page Down keys on an extended keyboard allow scrolling the full length of the page.
  2. Tab to highlight linksUsing the Tab key successively highlights each major clickable link on the page. Using Shift + Tab reverses the order of selection of links. However, in Vimeo, you cannot access the in-video controls like play, stop, volume, and settings with Tab.
  3. Enter to select linksPressing the Enter acts as a click on a link and follows that link.

Conclusion

In terms of Keyboard Accessibility, YouTube is superior to Vimeo. This makes sense as YouTube is owned by Google, a company that has extensive resources available to make sure that their products meet all recommended guidelines. There are in fact many videos on YouTube created by Google engineers to demonstrate how to use their products with accessibility tools like screen readers and keyboard functions. Vimeo is a private company that caters to niche filmmakers and video artists. They have done their community and the greater population of Web users a disservice by not making all functions of their site accessible via keyboard. With some code-level improvements to address accessibility of all in-video tools, their site will meet the WCAG 2.1 Keyboard Accessibility guideline.

References

Web Content Accessibility Guidelines (WCAG) 2.1: https://www.w3.org/TR/WCAG21/

WCAG 2.1 Guideline 2.1, Keyboard Accessible: https://www.w3.org/TR/WCAG21/#keyboard-accessible