Are there any practical reasons as to why one should show css outline on a focused radio button?

Question

A while ago, I found a css stylesheet for checkboxes and radio buttons, which could use font-awesome icons as symbols. I had just used the checboxes until recently, but expanded my form to include radios as well. When clicking a radio button, the outline was very prominent for the active radio button, which puzzles me. The stylesheet is so great, and well structured, I figured this is probably the authors intent, and not a bug, as there is a seperate CSS bracket for this alone:

.radio input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

I don't understand why anyone would have outline activated on radiobuttons though, as they are all about state, not changing content, like a text input. I would like to remove it, but thought I should ask if there are any good reasons to keep it, from a UX perspective. Are there?

No outline - with outline

Answer 1

Accessibility. Focus state tells keyboard users where their cursor currently is on the page.

By just visually looking at a form with a focus state on a radio button I would instantly know that if I press tab then I will move from this field to the next.

Without the focus state you won't have any visual indication of where they are on the page.

Now, whether or not you need to show the focus state when clicking with the mouse is a different question. But the reason for having a focus state is for keyboard users.