[wp-trac] [WordPress Trac] #41286: Focus style and High Contrast Mode

[WordPress Trac]

#41286: Focus style and High Contrast Mode
-----------------------------+--------------------------------
 Reporter:  afercia          |       Owner:
     Type:  defect (bug)     |      Status:  new
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  Administration   |     Version:
 Severity:  normal           |  Resolution:
 Keywords:  has-screenshots  |     Focuses:  ui, accessibility
-----------------------------+--------------------------------

Comment (by svinkle):

 I put this CodePen together to conduct a bit of testing:
 https://codepen.io/svinkle/pen/dRQxMP

 Attached below are a couple GIF images showing the focus styles in a high
 contrast (Win7/IE10) and non high contrast environments.

 == Test results
 1. Using browser default focus states are always encouraged as this is
 what the user will be most familiar with and will be able to recognize.

 2. Using `outline` is also a good option as this displays nicely with the
 default color scheme of the theme. The downside is slightly limited
 styling available (cannot apply rounded corners.)

 3. Using a `border` for the focus state also work and has more styling
 options available. The downside is `border` adds extra width to the
 element on `:focus`, creating a “bump” effect. This is not likely ideal.

 4. It is possible to get around this “bump” effect by applying transparent
 `border` to the element by default. The downside here is this default
 border will _always_ be displayed in a high contrast theme, defeating the
 purpose really.

 5. Using a `background` color for a focus state is not really an option as
 older versions of Windows/IE remove `background` styles in high contrast
 themes (Edge browser does not remove these styles.)

 6. Repeating the default styling here to make sure I’ve reached the end of
 the list.

 == Recommendation
 I’d suggest relying on default focus styles as this would have the most
 consistent and reliable support. Failing that, using `outline` would also
 suffice.

 I would also recommend including a `:focus` selector when a `:hover`
 selector is used by default, unless custom `:focus` styles are required.

 == GIF demonstration
 === Non high contrast theme
 [[Image(https://user-
 images.githubusercontent.com/1392632/28068763-e7429938-6614-11e7-9d86-0565e19ec775.gif,
 alt=Animated GIF of a user tabbing through list of links as described
 above in non high contrast theme.)]]

 === High contrast theme
 [[Image(https://user-
 images.githubusercontent.com/1392632/28068942-952cd70c-6615-11e7-8074-0895e9de22f2.gif,
 alt=Animated GIF of a user tabbing through list of links as described
 above in Windows high contrast theme.)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/41286#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform