WordPress.org

Making WordPress.org

Opened 5 months ago

#4111 new defect

Consider to audit the focus style across the .org network

Reported by: afercia Owned by:
Milestone: Priority: normal
Component: General Keywords:
Cc:

Description

Keyboard users, or users who make a mixed use of a pointing device and keyboard, need to actually see where focus is to be able to navigate a web page using their keyboard.

The focus style is a necessary indication for these users. Great care has been taken in WordPress core and the bundled themes to make the focus style as good as possible, and there's still work to do to improve it. It would be great to see also the .org network sites taking care of the focus style.

For reference, this is also part of the WCAG recommendation:

Success Criterion 2.4.7 Focus Visible
https://www.w3.org/TR/WCAG21/#focus-visible

While a complete analysis of all the links and controls across all the .org network would be impossible for me, I've taken the time to volunteer and analyze the focus style only on the main navigation menu in the main .org sections.

To recap:

  • Home: has focus style (browser native style)
  • Showcase: no focus style outline: none;
  • Themes: has focus style outline: thin dotted;
  • Plugins: has focus style outline: thin dotted;
  • Mobile: has focus style (browser native style)
  • Support: has focus style outline: thin dotted;
  • Get involved (Make): has focus style (browser native style)
  • About: has focus style outline: thin dotted;
  • Blog: has focus style (browser native style)
  • Hosting: has focus style (browser native style)

Suggested:

  • never reset the native outline style, unless that's meant to provide a better, improved focus style
  • use a consistent style across all the pages: worth reminding the browsers native focus style greatly varies across operating systems and browsers
  • buttons, form elements, and custom interactive elements need a focus style as well
  • use a style that is compatible with Windows High Contrast mode, or provide one specifically for Windows High Contrast mode

Note: in Windows High Contrast mode, basically only outline and border work. In core, https://core.trac.wordpress.org/ticket/41286 introduced a specific style that uses a transparent outline, as already done for the new block editor Gutenberg.

Change History (0)

Note: See TracTickets for help on using tickets.