Multiple accessibility experts discuss the importance of the default focus style.
Thanks to Tenon for sponsoring the transcript for this episode.
Transcript
Nic
Hi, I’m Nic Steenhout. And you’re listening to the accessibility rules soundbites. This one’s a bit different. We have designers and developers talking about why focus outline is important. I want to thank Tenon for sponsoring the transcript for this episode. Tenon provides accessibility as a service. They offer testing, training and tooling to help fix this ability, fast!
Nic
Someone was saying on Twitter: “The thing with the outline that I’m struggling with, is that when you click a button with mouse, it shows the outline so designers asked me to remove it because it’s ugly.” I don’t think there’s anyone in the digital accessibility community that hasn’t heard something along the same lines. So I asked the twitterverse for feedback, and got some really awesome responses. For me, though, the interaction that strikes me still are the long discussions I had with the designer that was forced to keep focus outlines. He did, but he styled the button to be the exact same blue as the Chrome default outline color. His approach defeated the purpose of course, I’m not sure he ever truly understood why it wasn’t a good idea. However, here’s some great thoughts on focus outline from folks on Twitter. Kylie Timpani says we should talk about people before guidelines.
Kylie
I think it would help to explain why the outline is important, making sure to lead with how removing the outline could affect people before talking about any specific guidelines. For what by saying that the outline can be customized and that we could work together on something more aesthetically pleasing.
Nic
Hidde de Vries offers an analogy comparing focus outline to streetlights.
Hidde
And I like to talk about focus outlines, in terms of streetlights. When people tell me focus outlines aren’t very pretty, and it might be designers or other people on the project. I’ll tell them that street lights aren’t very pretty either. But they are extremely useful because they like to know where you are, in the dark when you walk home or something like that. It’s the same thing for focus outlines, they help people see where they are. And even if they’re not very pretty, they’re still very helpful. And yeah, you could do the work to make them for the audience leave them ugly, but they’re so essential that you wouldn’t want to get rid of them just like you wouldn’t want to get rid of street lights.
Nic
Another analogy as offered by Charles Halls. He compares removing focus offline to removing handles from doors and windows.
Charles
Have them remove all the handles from the windows and doors because they interrupt the elegant smooth surfaces and remove all the street signs because they can obstruct views, then remove all the numbers and lights and indicators from elevator buttons because they’re visual clutter.
Nic
Lasse Diercks tells us to consider how the button would behave without CSS.
Lasse
So I had to push this topic for native HTML point of view. How does that behave without CSS? And the button has a focus state. So my question would be what the… What is the alternative for this focus state, which is present in Native HTML? And if the answer to this is there shouldn’t be a focus state that this isn’t about the outline. It’s about focus states at all. And then we can shift the conversation to why this is important. But my stab at what I’ve tried to argue is that if we take away capabilities that native HTML has, we actually make our page work without any CSS at all.
Nic
Deborah Edwards-Onoro asks the designer why they think it’s ugly, then suggests they try using only a keyboard to navigate their design.
Deborah
I start with why. I ask the colleague why they believe it’s ugly. And ask them if they’re open to trying something out. And have them use their keyboard to navigate a design with missing focus.
Nic
Along the same lines, Denis Boudreau suggests they use a keyboard and see the reaction when they realize how hard it is to do without focus outline.
Denis
As someone who understands accessibility, the way that I would convince a designer colleague, who wants developers to remove default outline because they feel it so ugly, would simply be to suggest to them to use the web for about 10 minutes without the use of their mouse or a trackpad. As they use their keyboard to navigate, you can easily watch their jaw drop, their minds blow up, and both their cheeks grow crimson red with embarrassment, when they realize how broken the web is without a mouse. And when they’re actually asking if the developers when they’re telling them not to use the outlines.
Nic
Kit Paige adds that it’s not ugly. If you take care of coordinating the design.
Kit
It’s not ugly if the outline coordinates or if the button was designed to not be ugly with a focus outline. Plus, would you want so called slight incongruity, or someone not being able to use the design at all because they couldn’t tell where the focus is, or if they were on the button in the first place?
Nic
Chance Strickland suggests something similar, and tells us to incorporate the focus style into the design with more purpose. He suggests looking at it as a design challenge.
Chance
You know, anytime a designer comes to me and asks if we can remove the outline styles, from a focus style on, say, like a button. There, it’s usually because they’re convinced that the outline is ugly, it’s this blue glowy thing that probably clashes with the design overall. And I like to remind them that you can actually and should actually incorporate your focus styles and incorporate that outline into the design more purposefully. Rather than simply rely on these browser defaults that you think clash with your system. And you know, it’s just like any other staple design of an element, a designer is going to likely give you a button design in a hover state and active state and disabled state. There’s no reason why they shouldn’t also come to you with a design for a button in a focus state. And as long as you can teach them the constraints, I think that opens up a new world of opportunities for creativity, and designers get really excited about that. It would be great if we could just wave a wand and make everyone care about accessibility the same way that we do. But the truth is, you often have to talk to people and make arguments from where they stand and from the values that they hold dear. And if you can find a way to do that, and communicate diplomatically, I think you’ll have a lot more success.
Nic
Julie Moynat says that the focus style should be made beautiful and contrasting. She also suggests a script to remove focus style on mouse click while leaving it there for keyboard interaction. If there’s no other options.
Julie
If someone wants to remove the default outline, because it’s ugly, I would tell him or her to make it beautiful and contrasted enough. The focus style doesn’t have to be ugly. And in last resort, if there is nothing to do to convince this person, there is fortunately a script on GitHub, called focus visible. It’s a polyfill based on the proper CSS focus visible pseudo class. It allows you to disable focus style on mouse click, but not on keyboard navigation. So it’s a good way to ensure visible keyboard navigation. If designers or clients don’t care about accessibility,
Nic
Philip Blume points out that taking the outline away is just lazy and irresponsible.
Philip
The focus outline doesn’t have to be ugly. And making it nice in most cases only takes a little bit of work. Then again, the “ugly” outline is what most people are used to. So that’s a consideration. Taking the outline away is simply lazy, from a design point of view, not to mention irresponsible, as it inhibits use of your site by people who won’t or cannot use a mouse or trackpad. So that’s a no go. Anyone who claims that accessibility must be balanced against aesthetics. hasn’t thought about the problem carefully enough.
Nic
There you have it, folks, several ideas to consider about focus outlines. The nutshell? Consider people before guidelines. Don’t remove default focus outlines, style focus outlines to fit within your overall design. Make it beautiful. It’s your job as a designer, isn’t it? And then everybody wins.