Something that has annoyed me lately, is how in-accessible some web sites are for people who browse using their keyboard. Number one issue is, in my opinion, that some people simply remove outlines from links. Outlines are those gray borders around links when you click on them. But is is very okay if you remove outlines for some links, but only if you add a proper focus state to that link.

Let me give an example first. The first menu has a nice hover state. The second menu also has an hover state applied to it, but also hides the outline. Some designers dislike the outline, and try to hide it. Also some CSS reset methods (like the popular reset method by Eric Meyer) ‘reset’ the outline.

To be better accessible it is good to declare a focus state for your links. Focus states are, like hover states, a pseudo-class for CSS, which you can apply easily. If an element can receive actions with a keyboard, the state’s properties are applied. Think of typing into a text box, or hitting space when you use tab to navigate.

You could, for example, declare both focus and hover in one selector, using a comma to separate them. See this example. It should be noted, that I change both the color and shape of the element. This is done for people with a color deficiency, because if you use (slight) color changes the link would be much more difficult to recognize by colorblind people.

If all was that simple.