Visual indicators on focusable elements are required for Keyboard Users

[mercime]

Per WCAG 2.0 (2.4.7):

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

We currently have outline: 0 or outline: none on focusable elements -- links and form controls (input fields, textareas, buttons, select boxes). When keyboard users tab through the BP sections of the webpages, there are no visual indicators to guide where they are on the current screen. i.e., They will not know when they can press the SPACE bar or ENTER key to submit a form, or click on a link, etc. because they cannot see any changes or have any clues (outline, change in background color, etc.) where they are on screen.

The simplest solution is to add a simple outline for the focusable elements on :focus e.g.

a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: thin dotted;
}

Other solutions (JS, background color, etc.)

• Paciello Group: How to remove CSS outlines in an accessible manner
• Patrick Lauke: Don't Lose Your :focus
• a { outline: none; } DON'T DO IT!

Having posted those links, I would recommend the one-line CSS-only solution so themers can easily override it if they want to.

[hnla]

Yep historical rule, although we do describe a background!

The correct approach here is to remove the outline 0 or rather not to deal with this issue as it might conflict with the themes approach, we should be wary of what the theme might do. A CSS approach is proper here though.