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

Design Critique: Zillow (website)

Zillow’s homepage

 

Introduction

Zillow is an online real estate database, which aggregates content from multiple listing services across the United States and Canada. Users may search the site for home rentals, sales, auctions, and foreclosures. Features of the site include the ability to save searches with multiple criteria, save favorites homes, and share these favorites with others.

Searching Zillow

When users first visit Zillow, they are presented with a search box on the homepage as pictured in the screenshot at the top of this post. If you are a repeat visitor that has saved search criteria before, the search box will contain a number in orange that indicates results for your saved search. This is a good signifier that a specific action—to see new results that meet your criteria—can be taken. The gulf of execution can be crossed easily on Zillow’s website. Most users know what a search box looks like and how it operates, and are easily prompted by a “Search” button to complete a search. Users receive feedback that their search has occurred, and cross the gulf of evaluation when they are presented with their search results. Zillow’s search results screen divides the screen in half, with a map on the left and thumbnails of home results on the right. This provides a good conceptual model of how Zillow works—seeing both a zoomable map and results next to it helps users visualize the scope of the homes available in Zillow.

Zillow’s search results screen

 

Saving Homes

Zillow users complete Norman’s seven stages of action while performing searches. Their goal is ultimately to find a home they might like to rent or purchase. They plan their search by deciding to visit the website, specify their criteria using Zillow’s filters, perform the search when they click “search,” perceive and interpret the results that are returned, and then compare them against each other. When users have found home results they like, they can save the home to their favorites list (which creates knowledge in the world) by clicking the black heart on the thumbnail list or by clicking “Save <3” on the home’s detail view.

Zillow’s home detail view

 

The feedback at this step is subtle and could be improved upon. When a user clicks either save option, the only indications that the home has been saved is that heart button changes from black to white and the text “Save” changes to “Saved.” I would recommend a quick pop-up of overlaid text that says “Saved!” and that the heart changes to a vibrant color like purple.

Recommendations for changes to ZIllow’s “Save” feature for better feedback.

 

When users close the home detail view, they may also notice that the homes they have saved are now indicated by small hearts on the map (left) side of their search results. However, the tiny hearts are the same color red as the dots on the map that indicate search results. I would recommend making the tiny hearts the same purple as the heart I’ve recommended on the thumbnail view.

Recommendation for how saved homes should appear on the search results screen.

Sharing Homes

When users want to visit their saved homes, they click “Saved Homes” from the top right menu. The screen refreshes, and the user is now viewing a split screen with a map on the left and thumbnail results on the right, but they’re only seeing their saved homes. On the top right side of the screen, users can easily see who they are sharing homes with, and are able to add more people to share with. On this page the search filters have disappeared from the top bar, providing a good constraint for what is possible on this page.

Zillow’s Saved Homes page

 

I would once again recommend changing the color of the hearts to purple, as this establishes saved homes as distinct from the red and blue dots of search results on the map. I also recommend changing the header bar color on the Saved Homes page to purple as well, to better indicate to the user which part of the website they’re viewing. If users navigate away from the Saved Homes page to another task, upon returning they may forget where they left off (which may cause a slip or mistake), so the purple header bar acts as knowledge in the world to indicate to the user where they are in the Zillow website when they return.

Recommendations for changes to Zillow’s Saved Homes page.

 

Conclusion

Zillow’s website is fairly user friendly in its existing state. It provides a good conceptual model of how it works with its prominent search box and easily understandable search results; it maps to other behaviors that users are familiar with on the web—searching and mapping places onto a geographical map; it provides feedback in the form of a number indicator in the search box for updated results, and a heart/saved button that changes color when clicked; and provides a constraint for what can be accomplished on the Saved Homes page. With some small changes as recommended here, Zillow’s site can become even more user friendly.