How can I add keyboard only focus styling?

Question

I would like to add focus states for interactive elements on my website, however I don't want the styling I add to apply when clicking on elements. If I just use :focus in my css I see the styles come through when clicking elements, or touching them on touchscreens. Is there a way I can style focus states just for keyboard navigation, when tabbing through the site?

Answer

This is a fairly common technical requirement developers and designers run into once they are aware of the need for focus states on keyboard navigation. We'll often recommend a solution called what-input that is relatively popular, and robust. If you are looking for a smaller solution, or to create your own, you might find it helpful to reference this javascript solution one of our developers created before we came across what-input that illustrates another possible solution to the problem.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.