Ok, this is really simple. Whenever you apply styling or JavaScript on hover do the same for focus. Keyboard users all over the world will thank you. Easy right? And you thought I was going to write this super complicated post on accessibility and stuff. Nope. I just wanted to tell you this.
Ok, so I do understand that this might not be super-obvious for some people so I’ll give a little explanation. When it comes to styling every browser has built-in styling for focus called the outline. It looks like a dotted line in some browsers and like a blue or yellow border in others. It is possible to remove this outline with CSS. Do not do that! You might argue that this is enough styling for focus but sometimes the outline is really hard to see (I’m looking at you Firefox!) so a good rule of thumb is to apply that styling you put on hover on focus as well.
Next thing. JavaScript. It’s not as nice as CSS. There is no built-in fallback in the browser. If you only script for things to happen on hover, touch or (the horror) mouseover it will not be accessible on focus. In real life this means that it will be inaccessible to keyboard users. So do not forget to throw in a little focus in your script.
People often argue that they do not have the time or budget to care about things like accessibility. When it comes to thinking about focus those arguments are simply not valid. It takes you a couple of seconds to fix this. Just do it!
