Consider to audit the focus style across the .org network

[afercia]

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.

[joedolson]

With the WordPress.org site redesign, much of this is improved; the main focus styles are much better than they were before. However, the High Contrast mode focus styles are inconsistentr; the main navigation has no visible focus at all in High Contrast mode.

I'll open an issue specifically about that on the appropriate repository, once I figure out which one it is...

[joedolson]

See: ​https://github.com/WordPress/wporg-mu-plugins/issues/648