Default focus outlines: Don’t remove them!

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