[wp-trac] [WordPress Trac] #47190: Twenty Seventeen: Native audio and video embeds have no focus state.

[WordPress Trac]

#47190: Twenty Seventeen: Native audio and video embeds have no focus state.
---------------------------+-----------------------------
 Reporter:  kjellr         |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Bundled Theme  |    Version:  5.2
 Severity:  normal         |   Keywords:  has-patch
  Focuses:  accessibility  |
---------------------------+-----------------------------
 As raised in Tenon's accessibility audit of Gutenberg, it looks like
 `audio` and `video` elements in Twenty Seventeen have no focus state.

 [[Image(https://cldup.com/RnYMMlGa0A-3000x3000.png)]]

 https://github.com/WordPress/gutenberg/issues/15312

 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
 stops.

 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)
 https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable

 2.4.7 Focus Visible (Level AA)
 https://www.w3.org/TR/WCAG20/#navigation-mechanisms-focus-visible

 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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47190>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform