Disabilities come in all sorts. So do users. Some users can manipulate a mouse. Some rely on keyboard alone. Others have assistive technology. When you use a mouse, where your mouse is located is visible. This lets the sighted mouse user know what they are clicking on and where the focus is. Keyboard only users need something else. Let’s get into the details of what is needed.
The criteria is pretty straight forward. “Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.”
Since we want all our user interfaces keyboard operable (Yes, phones too), we need to show where the user focus is placed. For web, browsers give us one for free. The problem often comes from some sort of cross-browser “reset” in the CSS. One of the first to do this was Eric Meyer’s reset which included one line of code:
* {outline: 0;}What does this do?
By default, browsers include an outline around a control when it has focus. These vary by browser. For some it is a 1 pixel dotted black line. Others show a solid black line. Some present a blue glow. Eric included this in he reset with the explanation that you must assign a custom one. But most developers and designers skipped this step.
This one line of code got picked up in other resets, then in front end frameworks. And it continued to be forgotten until the frameworks themselves included a proper assignment.
How do we fix it?
We need to provide a proper visual indicator. In most cases this should be the outline being back in. However, it doesn’t need to be this. You can use borders, shapes, contrast, bold and an assortment of other things. We do want to be careful with animation though. Animation should respond to prefers-reduced-motion media queries.
Per WCAG 2.1 A and AA 1.4.11, we need to make sure there is a contrast ratio of 3:1 to either the background color or the control color. The best way to handle this is to look at the background color of most pages. Provide a color that has at least a 3:1 ratio. In many cases where white is the default background, black is used. When the background changes, provide a custom solution for those areas.
*:focus-visible {outline: 1px solid #000000;}
.header:focus-visible {outline: 1px solid #FFFFFF;}For many low vision users, 1 pixel isn’t enough. I recommend at least 3 pixels wide. Additionally, we should give it some space from the control. While we need to make sure it has a 3:1 contrast with either the background or control, I often see teams use a color variant of the control as the border. When placed outside the control the change in side may not be enough to determine the focus as this is what it often appears as. To make it stand out a little more, we can provide an outline-offset.
*:focus-visible {outline: 3px solid orange; outline-offset: 2px;}
.header:focus-visible {outline: 3px solid yellow; outline-offset: 2px;}
You can play with and the interaction at Visible Focus on Codepen.
Have questions? Want to discuss this? Reach out to me on LinkedIn or BlueSky!
Comments are closed.