Make WordPress Core

Opened 18 months ago

Closed 14 months ago

Last modified 14 months ago

#47190 closed defect (bug) (fixed)

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

Reported by: kjellr Owned by: 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 18 months ago.

Download all attachments as: .zip

Change History (8)

18 months ago

#1 @kjellr
18 months 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 there 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.

Last edited 18 months ago by kjellr (previous) (diff)

#2 @ianbelanger
18 months 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
17 months 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
14 months 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
14 months ago

  • Keywords needs-testing added

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

#6 @SergeyBiryukov
14 months 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.

14 months ago

Note: See TracTickets for help on using tickets.