amp-story: Controls cannot be used with a keyboard

[TetraLogicalHelpdesk]

Controls cannot be used with a keyboard

WCAG Level

Level A

Priority

Critical

Pages/screens/components affected

• Navigation
• RTL
• Video
• Audio - amp-story background audio
• Audio - amp-story-page background audio
• Audio - amp-story using amp-audio
• Animation
• Sharing
• Tooltip
• Page attachment
• Branching
• Consent
• Prerender - Image
• Prerender - Video
• AMP Story Player - Player
• AMP Story Player - AMP Story 360

Description

Good design means supporting different modes of interaction, because there are many reasons why someone might use a keyboard instead of a mouse, and if keyboard interaction is not fully supported the website is effectively unusable.

AMP Stories have various controls which currently can't be operated using a keyboard - both in large-screen/desktop mode and small-screen/smartphone mode. These include the bookends, share dialogs, "swipe up" controls for page attachments, and the ability to trigger tooltips for certain types of content.

User impact

Someone with mobility problems will often use a keyboard instead of a mouse to navigate a web page. A screen reader user will also tend to use a keyboard if they cannot see the screen to use the mouse. Therefore if the web content does not properly support keyboard interaction, a large number of people are effectively prevented from using it.

It's worth emphasising that the small-screen/smartphone view of AMP Stories won't only be used on an actual touch screen operated smartphone. This view will also be used by desktop users that have sized/zoomed their browser window to a small-enough size to trigger the "smartphone" view, but are still navigating using keyboard or mouse. And even on actual smartphones, users may be navigating with an external mouse or keyboard. For this reason it's crucial that this view also work well for keyboard users.

Required solution

Make sure that all interactive controls are focusable and operable using a keyboard.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the website.

Implementation guidance

Controls that can't be focused/operated with the keyboard

The "Get link" control in the "Share" modal dialog (both in large-screen/desktop view and small-screen/smartphone view) is currently implemented as a <div> with a click handler.

<div class="i-amphtml-story-share-icon i-amphtml-story-share-icon-link">
  <span class="i-amphtml-story-share-label">Get Link</span>
</div>

The large-screen/desktop version of the share dialog also includes an "X" close control. This is currently implemented as a <span>. It is not focusable/operable with the keyboard (though technically, keyboard users are still able to close the dialog using the Esc key).

<span class="i-amphtml-story-share-menu-close-button" role="button">×</span>

Note that in Sharing the share modal contains additional controls (for "Facebook", "Twitter", "WhatsApp"). These use the <amp-social-share> component, which is keyboard-focusable and operable by default - but the "Get Link" and "X" close control exhibit the same problems as in the other samples.

<amp-social-share ... role="button" tabindex="0" aria-label="Share by facebook">...</amp-social-share>

In small-screen/smartphone view, once navigating past the last page, a "bookend" appears. The "Get Link" and the "Replay" controls in this bookend can't be focused/operated using the keyboard.

<div class="i-amphtml-story-bookend-replay i-amphtml-story-bookend-top-level">
  <div class="i-amphtml-story-bookend-article-text-content">
    <h2 class="i-amphtml-story-bookend-article-heading">QA Story</h2>
    <div class="i-amphtml-story-bookend-component-meta">www.gstatic.com</div>
  </div>
  <div class="i-amphtml-story-bookend-replay-icon"></div>
</div>

<div class="i-amphtml-story-share-icon i-amphtml-story-share-icon-link">
  <span class="i-amphtml-story-share-label">Get Link</span>
</div>

In Page attachment pages feature a visible "Swipe up" control. This control is implemented as an <a> anchor element without an href, which does not receive keyboard focus by default. As a result, this control is not operable using the keyboard.

<a class="i-amphtml-story-page-open-attachment i-amphtml-story-system-reset" role="button">
  <span class="i-amphtml-story-page-open-attachment-icon">
    <span class="i-amphtml-story-page-open-attachment-bar-left"></span>
    <span class="i-amphtml-story-page-open-attachment-bar-right"></span>
  </span>
  <span class="i-amphtml-story-page-open-attachment-label">Swipe up</span>
</a>

Triggering the "Swipe up" on the first example slide opens modal dialog with an "X" close control. This is currently implemented as a <span>. It is not focusable/operable with the keyboard (though technically, keyboard users are still able to close the dialog using the Esc key).

<span class="i-amphtml-story-page-attachment-close-button" aria-label="X" role="button"></span>

The same type of "X" close control also appears in the Tooltip AMP story, where it is used for the "expanded tweet" modal dialog.

In all these cases, the simplest solution would be to use an actual <button> element, which by default receives keyboard focus and can be triggered using Enter and Space.

<button class="...">
  <span class="...">Get Link</span>
</button>

<button class="..." aria-label="Close">×</button>

In more complex cases, such as the bookend, you may need to implement separate buttons (to avoid validation errors, as <button> can't contain <h2> elements, for instance).

<div class="i-amphtml-story-bookend-replay i-amphtml-story-bookend-top-level">
  <div class="i-amphtml-story-bookend-article-text-content">
    <h2 class="i-amphtml-story-bookend-article-heading">
      <button ...>QA Story</button>
    </h2>
    <div class="i-amphtml-story-bookend-component-meta">
      <button ...>www.gstatic.com</button>
    </div>
  </div>
  <button ...>
    <div class="i-amphtml-story-bookend-replay-icon"></div>
  </button>
</div>

Alternatively, make sure that these controls are keyboard-focusable (by adding tabindex="0") and include additional JavaScript to trigger the click event when Enter and Space are pressed.

<div class="..." tabindex="0" role="button">
  <span class="...">Get Link</span>
</div>

<span class="..." tabindex="0" role="button" aria-label="Close">×</span>

Tooltips on tweets/large elements

The Tooltip AMP Story has a page where a user can tap/click an embedded tweet to bring up a tooltip. This tooltip provides an "Expand Tweet" control. For a keyboard user, it's not possible to trigger this particular type of tooltip, as it appears to be triggered by a clickable/tappable overlay, and there is no "button" or focusable control for the embedded tweet - keyboard users will navigate directly through the actual controls/links in the embedded tweet instead.

The solution here will require some form of control that can receive keyboard focus and trigger the tooltip. Additionally, if the intention is to suppress the actual embedded tweet from being directly actionable, consider explicitly suppressing any links/controls in the embedded tweet with tabindex="-1", so they do not receive focus.

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:

1. Check that all interactive buttons/controls can be navigated to using the Tab key.
2. Check that all interactive elements can be activated using the Enter and/or Space keys.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

• All issues identified within the test sample have been resolved.
• The rest of the website has been tested for the same issue.
• All issues identified throughout the rest of the website have been resolved or filed as new issues.

Related standards

• WCAG 2.1 Success Criterion 2.1.1 Keyboard (Level A)

More information

• WebAIM: Keyboard

Test data

Test date: January 2021

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.