Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#47190 closed defect (bug) (fixed)

Twenty Seventeen: Native audio and video embeds have no focus state.

Reported by: kjellr's profile kjellr Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 5.2.3 Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-patch fixed-major needs-testing
Focuses: accessibility Cc:


As raised in Tenon's accessibility audit of Gutenberg, it looks like audio and video elements in Twenty Seventeen have no focus state.

The full text of the original issue is below:

Media players receive focus but show no visible focus state

  • Severity: High
  • Affected Populations:
    • Low-Vision
    • Motor Impaired
    • Cognitively Impaired
  • Platform(s):
    • All / Universal
  • Components affected:
    • Output Markup

Issue description

Keyboard users who are navigating through a published (or previewed)
page may come across media players implemented with native audio and
video elements. These receive keyboard focus in most or all browsers,
but the page does not visually show it. This results in invisible Tab

All interactive elements should have a visible and obvious focus
indicator, so that sighted keyboard users have a clear indication of
which element has focus.

Issue Code

    :focus {

        outline: none;


Remediation Guidance

Whenever the native focus outline is removed from focusable
elements, a replacement visual focus state must be provided, with a
minimum contrast ratio of 3:1.

Recommended Code

audio:focus, video:focus {

        outline: 1px solid #0085ba;


Relevant standards

2.1.1 Keyboard (Level A)

2.4.7 Focus Visible (Level AA)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-106 in Tenon's report

Attachments (1)

47190.patch (427 bytes) - added by kjellr 5 years ago.

Download all attachments as: .zip

Change History (8)

5 years ago

#1 @kjellr
5 years ago

47190.patch adds the missing focus states.



It looks like this is necessary because Twenty Seventeen clears out :focus styles globally:

That seems like a somewhat aggressive approach, and may be a better way to accomplish what that line of code is intending to do. But in general, this patch should fix the current problem.

Version 1, edited 5 years ago by kjellr (previous) (next) (diff)

#2 @ianbelanger
5 years ago

  • Milestone changed from Awaiting Review to 5.3
  • Version changed from 5.2 to 5.0

Changing version to 5.0, as that is when this issue was most likely introduced to core and moving to 5.3 milestone, as there is currently no plans to release a bundled theme update until the next major release. This could possibly be revisited for 5.2.2 if there are a large number of bundled theme fixes ready.

#3 @SergeyBiryukov
5 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 45425:

Twenty Seventeen: Accessibility: Add missing focus state for native audio and video embeds.

Props kjellr, karlgroves.
Fixes #47190.

#4 @JeffPaul
5 years ago

  • Keywords fixed-major added
  • Milestone changed from 5.3 to 5.2.3
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening this so it can be back-ported to the 5.2 branch.

#5 @JeffPaul
5 years ago

  • Keywords needs-testing added

This also needs testing to validate if this ticket is good to land in 5.2.3.

#6 @SergeyBiryukov
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 45846:

Twenty Seventeen: Accessibility: Add missing focus state for native audio and video embeds.

Props kjellr, karlgroves.
Merges [45425] to the 5.2 branch.
Fixes #47190.

This ticket was mentioned in Slack in #core by sergey. View the logs.

5 years ago

Note: See TracTickets for help on using tickets.