When you're designing or building a website, you'll probably make sure it appeals to your target group, or your client's target group. You'll carefully choose the images and the colours and for the content you'll use wording and vocabulary that fits the target group. But have you thought of the usability and accessibility? Not all visitors can navigate the same way. If you can't use a mouse, how do you know where you are?

When creating a website, think about the people who will use it. You may be able to see the elements on a website and use a mouse on a computer or your finger on a mobile device, but that doesn't mean all your visitors can as well. 

Something I regularly see in websites is the absence of a focus indicator on interactive elements. If you point your mouse or your finger to a menu item, a button or an input field in a form, you know where you are. But what happens if you use the keyboard (pressing the tab key) only to navigate through a website? Without a visual focus indicator you have no idea where you are.

A common reason to remove the focus indicator is because "it looks ugly". And yes, each browser has its own focus style, they are not very appealing and they probably don't match the style of your website. Until a few years ago the focus indicator was also displayed when clicking on an element and people considered that ugly and obtrusive. Now browsers display a focus indicator only when it is really needed, for example when using the tab key on the keyboard or when a text box needs user input. Additionally to the :focus pseudo-class, the :focus-visible pseudo-class has been available since 2022. This pseudo-class matches the focused element when needed and can be used to style the focus indicator without changing when the focus indicator appears.

If you are creating a website with accessibility in mind - and you should be doing that - removing the focus indicator will give you a fail on several WCAG success criteria:

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

SC 1.4.11 Non-Text Contrast (Level AA): A contrast ratio of at least 3:1 against adjacent color(s) is required for user interface components.

And three new success criteria in WCAG 2.2:

SC 2.4.11 Focus Not Obscured (Minimum) (Level AA)

SC 2.4.12 Focus Not Obscured (Enhanced) (level AAA)

SC 2.4.13 Focus Appearance (Level AAA)

In short, don't do this:

:focus {
    outline: none;
}

Better do something like this:

:focus-visible {
    outline: 2px solid crimson;
    outline-offset: 4px;    
}

Keyboard accessibility is one of the most important aspects of web accessibility and it is really easy to check: disconnect your mouse and click the tab key on your keyboard. Can you reach and operate all interactive elements (menu items, dropdowns, form inputs, buttons, links)? Do you know where you are all the time? Then you are on the right track.

Keep the focus on your interactive elements on your website and keep the focus on your visitors. Each person is different and each will use your website in an individual way, but all of them should have a good experience visiting your website.

Read more about focus:

• :focus: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
• :focus-visible: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
• Keyboard Accessibility: https://webaim.org/techniques/keyboard/
• Focusing on Focus Styles: https://css-tricks.com/focusing-on-focus-styles/
• :focus-visible Is Here: https://matthiasott.com/notes/focus-visible-is-here
• Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators: https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/
• A guide to designing accessible, WCAG-conformant focus indicators: https://www.sarasoueidan.com/blog/focus-indicators/