Visible focus is an integral part of website accessibility.

Note the WCAG 2.1 Guideline:

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

Who Does Visible Focus Help?

• People who navigate by keyboard only.
• People with visual or cognitive impairments who need a clear indication of where they are on a web page, regardless if they use a keyboard or mouse.

Visible focus should always be active, and is indicated via a visible border that surrounds web page objects, such as links, form fields, etc.

How to Test

To check your website’s current visible focus indicators, use the tab key to navigate to all page elements. As each element receives focus, there should be a clearly visible outline around the element.

Solution:

1) Adjust your CSS

Go through your CSS files and delete all declarations that shut off outlines:

{outline: none;} or {outline: 0;}

2) Re-style the focus declarations in your CSS.

Here is an example on how to add visible focus to your website links:

a:focus { outline: thin dotted; }

===

WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:

WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints

Find out more about Mary Gillen’s Accessibility Testing & Remediation Services: Websites, PDFs, Office Docs & Videos

===