Don’t forget focus

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!

Arranging t12t

I’m really excited right now. Tomorrow evening me and a couple of colleagues will host the very first meetup on web accessibility in Stockholm.

It all started after discussing web accessibility together with the other frontend devs in the office. Some people suggested that we should have an evening were we really dug into a11y-things. I got the thought that why just us digging into things why not have an open evening where anyone could come? Like a meetup?

This was about a month ago and now it’s here. Our meetup! It’s called t12t (tillgänglighet) as a swedish equivalence to a11y (accessibility). We got a page up at and a fair amount of people seems to be interested and have signed up. When I’m writing this we still have a couple of spots left so if you happen to be in Stockholm tomorrow evening and don’t have anything in particular to do please come by!

I don’t think web accessibility is a boring thing that involves checklists and threats about lawsuits. Personally I think web accessibility is an awesome thing. Just how many other mediums are as accessible as the web by default? I mean just compare it to a printed magazine. Right! The web is awesome and If we have some knowledge about the capabilities of the web and its accessibility we can keep it that way.

I’m hoping the meetup tomorrow will be the first one of many. Excited!