amp-story: Lack of visible focus indication

[TetraLogicalHelpdesk]

Lack of visible focus indication

WCAG Level

Level A

Priority

High

Pages/screens/components affected

• Sharing
• Tooltip
• Page attachment

Description

Keyboard users rely on the browser's focus outline to keep track of where they are on web pages. The currently selected form input, button, or hyperlink is the one said to have the focus.

Most browsers use a faint dotted outline to indicate the focus to the user, though some browsers like Chrome or Safari use an enhanced focus outline, consisting of a coloured border around the selected link. It is also possible for developers to provide custom focus indications within the site's cascading style sheets (CSS).

We encountered a few situations where controls that receive focus have no visible focus indication. In addition, due to broken/incorrect focus handling (see separate issue), we found situations where focus lands on a link that is currently not visible (either because focus moved to an element in another page/slide, or because the layout broke when focusing to it - see the separate issue for pages that visually break when navigating with keyboard).

User impact

Without a visible focus indicator it can be difficult or impossible for keyboard users that aren't using additional assistive technology such as a screen reader to know which control (whether it be a link, button, or something else) currently has focus and therefore what action will take place if they press the Enter, Space, or other keys.

Required solution

Make sure that all focusable elements have a clear focus style.

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

In Sharing the <amp-social-share> buttons in the sharing modal and the "bookend" receive focus, but their default focus indication has been suppressed and no alternative has been added.

.i-amphtml-story-share-icon:active, .i-amphtml-story-share-icon:focus {
  outline: none!important;
  box-shadow: none!important;
}

At the most basic level, for standard focusable elements, the default focus style should not be removed unless it is replaced with an alternative focus style. However, the default focus style varies across browsers - and in some cases, notably in Internet Explorer and Firefox, can be very hard to see. For this reason we recommend providing an explicit focus style that is applied consistently across all browsers.

Although there is no specific definition of what "visible" means in the context of this success criterion, we recommend following WCAG 2.1 Success Criterion 1.4.11 Non-text Contrast (Level AA) by ensuring that the contrast ratio against the background and against adjacent colours is at least 3:1.

In addition, when navigating in large-screen/desktop view using Tab, this is one of the samples whose layout badly breaks (see the separate issue about keyboard navigation breaking layout).

When this happens, focus lands on the share buttons, but they are completely off-screen, once more leading to a complete lack of visual focus indication (and content in general).

In Tooltip the container for the embedded tweet receives focus, but no focus indication is provided (though, puzzlingly, it does appear when navigating in reverse using Shift+Tab, albeit quite faintly).

In this case, ensure that there is a consistent and clearly visible focus indication.

In Page attachment, on the first page/slide, the link hidden behind the "Swipe up" widget receives focus, even when the widget has not been swiped/opened, leading to the focus "disappearing" to a visually hidden element (see also the separate focus order issue).

Resolving the focus order issue (and preventing elements that are currently not visible from receiving focus) will also resolve this particular problem.

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. Navigate to a focusable component on the page using the keyboard (using Tab/Shift+Tab and/or any other widget-specific controls, such as cursor keys).
2. Check that there is a visible indication of focus.

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.4.7 Focus Visible (Level A)

More information

• W3C - Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

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.